Photo by Keith Johnston on Unsplash

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.

Basit bir Input Bileşeni

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

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.

Chrome Performance Tab

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store