Geli\u015fmi\u015f Etkinlik D\u00f6ng\u00fcs\u00fc Teknikleri: JavaScript Performans\u0131n\u0131 Zirveye Ta\u015f\u0131mak<\/p>\n
JavaScript’in etkinlik d\u00f6ng\u00fcs\u00fc (event loop), kodunuzun nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131n temelini olu\u015fturur. Etkinlik d\u00f6ng\u00fcs\u00fc, kodunuzu ad\u0131m ad\u0131m y\u00fcr\u00fctmek, asenkron i\u015flemleri y\u00f6netmek ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fc g\u00fcncel tutmak i\u00e7in \u00e7al\u0131\u015f\u0131r. Performans\u0131n\u0131z\u0131 en \u00fcst d\u00fczeye \u00e7\u0131karmak i\u00e7in, etkinlik d\u00f6ng\u00fcs\u00fcn\u00fcn i\u015fleyi\u015fini derinlemesine anlamak ve geli\u015fmi\u015f teknikleri uygulamak \u015fartt\u0131r.<\/p>\n
JavaScript, tek iplikli (single-threaded) bir dildir. Bu, bir seferde yaln\u0131zca bir i\u015fin y\u00fcr\u00fct\u00fclebilece\u011fi anlam\u0131na gelir. Etkinlik d\u00f6ng\u00fcs\u00fc, bu tek i\u015f par\u00e7ac\u0131\u011f\u0131 \u00fczerindeki i\u015fleri s\u0131raya koymak ve y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Etkinlik d\u00f6ng\u00fcs\u00fc, temelde bir “i\u015f listesini” (task queue) i\u015fler. Bu liste, JavaScript kodunun \u00e7al\u0131\u015ft\u0131r\u0131lmas\u0131 gereken g\u00f6revleri i\u00e7erir. Etkinlik d\u00f6ng\u00fcs\u00fc, bir g\u00f6revi tamamlad\u0131\u011f\u0131nda, i\u015f listesinden bir sonraki g\u00f6revi al\u0131r ve bu i\u015flemi tekrarlar.<\/p>\n
Etkinlik d\u00f6ng\u00fcs\u00fcn\u00fcn en \u00f6nemli unsurlar\u0131ndan biri de y\u0131\u011f\u0131n (call stack) ve etkinlik kuyru\u011fu (event queue) d\u0131r. Y\u0131\u011f\u0131n, \u015fu anda \u00e7al\u0131\u015ft\u0131r\u0131lan i\u015flevleri depolar. Etkinlik kuyru\u011fu ise bekleyen i\u015flevleri depolar. \u0130\u015flev tamamland\u0131\u011f\u0131nda y\u0131\u011f\u0131ndan \u00e7\u0131kar\u0131l\u0131r ve etkinlik kuyru\u011fundan bir sonraki i\u015flev y\u0131\u011f\u0131na eklenir. Bu s\u00fcre\u00e7, i\u015flevler tamamlanana kadar devam eder. <\/p>\n
Etkinlik d\u00f6ng\u00fcs\u00fcyle \u00e7al\u0131\u015fman\u0131n performans\u0131n\u0131 art\u0131rmak i\u00e7in kullanabilece\u011finiz birka\u00e7 geli\u015fmi\u015f teknik bulunmaktad\u0131r.<\/p>\n
Asenkron i\u015flemler, \u00f6rne\u011fin a\u011f istekleri veya zamanlay\u0131c\u0131lar, etkinlik d\u00f6ng\u00fcs\u00fcn\u00fc engelleyebilir. Bu i\u015flemler tamamlanana kadar, di\u011fer g\u00f6revlerin y\u00fcr\u00fct\u00fclmesi engellenir. Bu sorunu \u00e7\u00f6zmek i\u00e7in, asenkron i\u015flemleri kullanarak etkinlik d\u00f6ng\u00fcs\u00fcn\u00fc engellemeden devam edebilirsiniz.<\/p>\n
\u00d6rne\u011fin, bir a\u011f iste\u011fini yapmak i\u00e7in XMLHttpRequest kullanmak yerine, fetch API’si gibi asenkron bir y\u00f6ntem kullanabilirsiniz. Bu y\u00f6ntemler, bir i\u015flevi yaln\u0131zca istek tamamland\u0131\u011f\u0131nda \u00e7a\u011f\u0131r\u0131r, bu da etkinlik d\u00f6ng\u00fcs\u00fcn\u00fcn di\u011fer i\u015flevleri \u00e7al\u0131\u015ft\u0131rmaya devam etmesini sa\u011flar.<\/p>\n
A\u015fa\u011f\u0131daki kod par\u00e7as\u0131, bir a\u011f iste\u011fini asenkron bir \u015fekilde nas\u0131l yapaca\u011f\u0131n\u0131z\u0131 g\u00f6sterir:<\/p>\n
“`javascript
\nfetch(‘https:\/\/fatihsoysal.com’)
\n .then(response => response.json())
\n .then(data => {
\n console.log(data);
\n });
\n“`<\/p>\n
Bir i\u015flem etkinlik d\u00f6ng\u00fcs\u00fcn\u00fc engelliyorsa, uygulaman\u0131z donabilir. Bu durum, CPU yo\u011fun g\u00f6revleri ger\u00e7ekle\u015ftirmek i\u00e7in uzun s\u00fcre \u00e7al\u0131\u015fan JavaScript kodlar\u0131 nedeniyle meydana gelebilir. Bu gibi durumlarda, etkinlik d\u00f6ng\u00fcs\u00fcn\u00fc bo\u015faltmak ve di\u011fer i\u015flevlere zaman ay\u0131rmak \u00f6nemlidir.<\/p>\n
Etkinlik d\u00f6ng\u00fcs\u00fcn\u00fc bo\u015faltmak i\u00e7in kullanabilece\u011finiz birka\u00e7 y\u00f6ntem vard\u0131r:<\/p>\n
\u0130\u015flevleri optimize etmek, etkinlik d\u00f6ng\u00fcs\u00fc \u00fczerindeki y\u00fck\u00fc azaltmaya yard\u0131mc\u0131 olur. \u0130\u015fte i\u015flevlerinizi optimize etmek i\u00e7in birka\u00e7 ipucu:<\/p>\n