UI-Tricks
Input Alanları UI Neden Bloklar ?
JS Main Thread Single Thread olarak çalışır. Burda I/O işlemleri her ne kadar Async olarak yapılsada bazen bellekte Single Thread içerisinde yaptığımız arka arkaya işlemler Main Thread kilitlenmesine ve işlevini düzgün yerine getirememesine sebep olur. Aşağıdaki yazıda bu durumlardan bir tanesi olan Input alanındaki keyChange işleminin bu durumu nasıl oluşturduğunu ele almaya çalıştım.
Normal işleyişte bir girdi alanına typing(yazı) yazma işlemi UI Bloklamaz yani yazdığınız metni sadece rendering için kullanır ve bu alanın içerisine render etme işlemi çok maliyetli değildir.
Peki bu Girdi (Input) alanındaki her typing işlemi sonrasında değişirken buna bağlı eş zamanlı başka işlemlerde yapmamız gerekirse örneğin;
- Büyük bir listede filtereleme ve bunu eş zamanlı ekrana yansıtma
- Parsing, Validation processing yapıyorsa
Yukarıda bahsettiğimiz UI işlemlerin maliyeti büyük ise UI kilitlenmeler gerçekleşecektir. Çünkü her tuşa bastığımızda arka arkaya bu ektra processleri çalıştırması anlamına gelecektir
Bu problemleri çözmenin yöntemi kullanıcının typing işlemini belli bir süre bufferlayıp en son bu buffer’daki biriken metin için processing çalışmasını sağlamaktır. Bundan dolayı change işlemine belli bir bekletme süresi eklemek bu problemi çözecektir.
handleChange metodunda bir timeout süresi ekliyoruz. 0.5saniye içerisindeki tüm typing biriktirip sonrasında bunları Long Processing işlemine yönlendiriyoruz. Bu sayede 0.5 saniye içerisinde örneğin 10 defa klavyeye bassakta Lonk Processing 10 defa çalışması gerekmiyor.
Burda sistemin UI Bloklayıp, bloklamadığına nasıl bakacağız diyorsanız. Chrome Developer Aracında → Performans tabında Recording başlatıp Main Tread hangi işlemlerin sistemi nasıl kullandığını görebilirsiniz.
Uzun süredir farklı sektörlerde (Askeri, Telekomünikasyon, Devlet, Bankacılık, Sigortacılık, Tübitak, SaaS) yazılımlar geliştiriyorum. Bu süreçte Havelsan, Milsoft, T2, Cybersoft ve Thundra firmalarında yönetici ve yazılım mühendisi olarak çalıştım. Deneyimlerimi ve teknolojik bilgi birikimi mi olabildiğince OnurDayibasi.com adresinde toplamaya çalışıyorum. Tüm yazılarıma ve daha fazlasını bu site üzerinden erişebilirsiniz.
