May 1, 2020
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 ekstra 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 Thread hangi işlemlerin sistemi nasıl kullandığını görebilirsiniz.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
