Olay döngüsü: microtasks ve macrotasks

Node.js’de olduğu gibi tarayıcı JavaScript yürütme akışı da bir olay döngüsüne dayanır.

Olay döngüsünün nasıl çalıştığını anlamak, optimizasyonlar ve bazen de doğru mimari için önemlidir.

Bu bölümde önce işlerin nasıl yürüdüğüyle ilgili teorik ayrıntıları ele alacağız ve ardından bu bilginin pratik uygulamalarını göreceğiz.

Olay Döngüsü

Olay döngüsü kavramı çok basittir. JavaScript motorunun görevleri beklediği, yürüttüğü ve daha sonra uyuyarak daha fazla görev beklediği sonsuz bir döngü vardır.

Motorun genel algoritması:

1. Görevler varken:
   • en eski görevden baÅŸlayarak bunları yürütün.
2. Bir görev görünene kadar uyuyun, ardından 1’e gidin.

Bu, bir sayfaya göz atarken gördüğümüz şeyin biçimselleştirilmesidir. JavaScript motoru çoğu zaman hiçbir şey yapmaz, yalnızca bir script/işleyici/olay etkinleştirildiğinde çalışır.

Görev örnekleri:

• Harici bir script <script src="..."> yüklendiÄŸinde, görev onu yürütmektir.
• Bir kullanıcı faresini hareket ettirdiÄŸinde, görev mousemove olayını göndermek ve iÅŸleyicileri yürütmektir.
• Zamanlanmış bir setTimeout için zaman geldiÄŸinde, görev callback’i çalıştırmaktır.
• …ve benzeri.

Görevler belirlenir – motor bunları işler – sonra daha fazla görev bekler (uyurken ve sıfıra yakın CPU tüketirken).

Motor meşgulken bir görev gelebilir, sonra sıraya girebilir.

Görevler, “macrotask sırası” (v8 terimi) olarak adlandırılan bir sıra oluşturur:

ÖrneÄŸin, motor bir script’i yürütmekle meÅŸgulken, bir kullanıcı faresini hareket ettirerek mousemove’a neden olabilir ve setTimeout zamanı gelmiÅŸ olabilir ve benzeri, yukarıdaki resimde gösterildiÄŸi gibi bu görevler bir kuyruk oluÅŸturur.

Kuyruktaki görevler “ilk gelene ilk hizmet” esasına göre iÅŸlenir. Tarayıcı motoru script ile iÅŸi bittiÄŸinde, mousemove olayını, ardından setTimeout iÅŸleyicisini vb. iÅŸler.

Buraya kadar oldukça basit, değil mi?

İki ayrıntı daha:

1. Motor bir görevi yürütürken oluşturma(Render) asla gerçekleşmez. Görevin uzun sürmesi önemli değil. DOM’daki değişiklikler yalnızca görev tamamlandıktan sonra boyanır.
2. Bir görev çok uzun sürerse tarayıcı, kullanıcı olaylarını işleme gibi diğer görevleri yapamaz. Bu yüzden bir süre sonra “Sayfa Yanıt Vermiyor” gibi bir uyarı vererek görevi tüm sayfayla sonlandırmayı önerir. Bu, çok sayıda karmaşık hesaplama olduğunda veya sonsuz bir döngüye yol açan bir programlama hatası olduğunda olur.

Teori buydu. Şimdi bu bilgiyi nasıl uygulayabileceğimizi görelim.

Kullanım Senaryosu 1: CPU’ya aç görevleri bölme

Diyelim ki CPU’ya aç bir görevimiz var.

Örneğin, sözdizimi vurgulama(syntax-highlighting) (bu sayfadaki kod örneklerini renklendirmek için kullanılır) oldukça CPU ağırlıklıdır. Kodu vurgulamak için, analizi gerçekleştirir, birçok renkli öğe oluşturur, bunları belgeye ekler – çok fazla zaman alan büyük miktarda metin için.

Motor sözdizimi vurgulama ile meşgulken, DOM ile ilgili diğer işlemleri yapamaz, kullanıcı olaylarını işleyemez vb. Hatta tarayıcının bir süre “hıçkırmasına” ve hatta “takılmasına” neden olabilir ki bu kabul edilemez bir durumdur.

Büyük görevi parçalara bölerek sorunlardan kaçınabiliriz. İlk 100 satırı vurgulayın, ardından sonraki 100 satır için “setTimeout” (sıfır gecikmeli) zamanlayın, vb.

Bu yaklaşımı göstermek için, basitlik adına, metin vurgulama yerine 1 ile 1000000000 arasında sayan bir fonksiyon alalım.

Aşağıdaki kodu çalıştırırsanız, motor bir süre “askıda kalır”. Açıkça fark edilen sunucu tarafı JS için ve tarayıcıda çalıştırıyorsanız, sayfadaki diğer düğmeleri tıklamayı deneyin – sayım bitene kadar başka hiçbir olayın işlenmediğini göreceksiniz.

let i = 0;

let start = Date.now();

function count() {

  // ağır bir iş yap
  for (let j = 0; j < 1e9; j++) {
    i++;
  }

  alert("Done in " + (Date.now() - start) + 'ms');
}

count();

Tarayıcı, “script çok uzun sürüyor” uyarısı bile gösterebilir.

Ä°ÅŸi iç içe setTimeout çaÄŸrılarını kullanarak bölelim:

let i = 0;

let start = Date.now();

function count() {

  // ağır işin bir parçasını yap (*)
  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  } else {
    setTimeout(count); // yeni cağrıyı planla (**)
  }

}

count();

Artık tarayıcı arayüzü “sayma” işlemi sırasında tamamen işlevseldir.

A single run of count does a part of the job (*), and then re-schedules itself (**) if needed: Tek bir count çalıştırması (*) iÅŸinin bir bölümünü yapar ve ardından gerekirse kendisini (**) olarak yeniden zamanlar:

1. Ä°lk çalıştırma sayar: i=1...1000000.
2. Ä°kinci çalıştırma sayar: i=1000001..2000000.
3. …ve benzeri.

Åžimdi, motor bölüm 1’i yürütmekle meÅŸgulken yeni bir yan görev (örneÄŸin onclick olayı) ortaya çıkarsa, sıraya alınır ve sonraki bölümden önce bölüm 1 bittiÄŸinde yürütülür. count yürütmeleri arasındaki olay döngüsüne periyodik geri dönüşler, JavaScript motorunun baÅŸka bir ÅŸey yapması, diÄŸer kullanıcı eylemlerine tepki vermesi için yeterli “hava” saÄŸlar.

Dikkate deÄŸer olan ÅŸey, her iki varyantın da – iÅŸi setTimeout ile bölerek ve bölmeden – hız açısından karşılaÅŸtırılabilir olmasıdır. Toplam sayım süresinde pek bir fark yok.

Onları daha da yakınlaştırmak için bir iyileştirme yapalım.

Zamanlamayı count()un başına taşıyacağız:

let i = 0;

let start = Date.now();

function count() {

  // zamanlamayı en başa taşı
  if (i < 1e9 - 1e6) {
    setTimeout(count); // yeni cağrıyı planla
  }

  do {
    i++;
  } while (i % 1e6 != 0);

  if (i == 1e9) {
    alert("Done in " + (Date.now() - start) + 'ms');
  }

}

count();

Åžimdi count() yapmaya baÅŸladığımızda ve daha fazla count() yapmamız gerektiÄŸini gördüğümüzde, iÅŸi yapmadan önce bunu hemen zamanlıyoruz.

Çalıştırırsanız, önemli ölçüde daha az zaman aldığını fark etmek kolaydır.

Neden?

Çok basit: Hatırladığınız gibi, iç içe geçmiÅŸ birçok setTimeout çaÄŸrısı için tarayıcıda minimum 4 ms gecikme vardır. 0 ayarlasak bile, 4ms (veya biraz daha fazla). Yani ne kadar erken zamanlarsak o kadar hızlı çalışır.

Son olarak, CPU’ya aç bir görevi parçalara ayırdık – artık kullanıcı arayüzünü engellemiyor. Ve genel yürütme süresi çok daha uzun değil.

Kullanım Senaryosu 2: ilerleme göstergesi

Tarayıcı komut dosyaları için ağır görevleri bölmenin bir başka yararı da ilerleme göstergesi gösterebilmemizdir.

Daha önce belirtildiği gibi, DOM’daki değişiklikler, ne kadar sürdüğüne bakılmaksızın, yalnızca şu anda çalışan görev tamamlandıktan sonra boyanır.

Bir yandan, bu harika, çünkü fonksiyonumuz birçok öğe oluşturabilir, bunları tek tek belgeye ekleyebilir ve stillerini değiştirebilir – ziyaretçi herhangi bir “ara”, tamamlanmamış durum görmez. Önemli bir şey, değil mi?

Ä°ÅŸte demo, i’deki deÄŸiÅŸiklikler fonksiyon bitene kadar görünmeyecek, bu yüzden yalnızca son deÄŸeri göreceÄŸiz:

<div id="progress"></div>

<script>

  function count() {
    for (let i = 0; i < 1e6; i++) {
      i++;
      progress.innerHTML = i;
    }
  }

  count();
</script>

…Ancak görev sırasında da bir şey göstermek isteyebiliriz, örneğin bir ilerleme çubuğu.

EÄŸer ağır görevi setTimeout kullanarak parçalara ayırırsak, o zaman deÄŸiÅŸiklikler aralarında boyanır.

Bu daha güzel görünüyor:

<div id="progress"></div>

<script>
  let i = 0;

  function count() {

    // ağır işin bir parçasını yap (*)
    do {
      i++;
      progress.innerHTML = i;
    } while (i % 1e3 != 0);

    if (i < 1e7) {
      setTimeout(count);
    }

  }

  count();
</script>

Åžimdi <div>, bir tür ilerleme çubuÄŸu olan i’nin artan deÄŸerlerini gösteriyor.

Kullanım Senaryosu 3: olaydan sonra bir şeyler yapmak

Bir olay iÅŸleyicide, bazı eylemleri olay kabarıp tüm seviyelerde iÅŸlenene kadar ertelemeye karar verebiliriz. Bunu, kodu sıfır gecikmeli setTimeout içine sararak yapabiliriz.

<bilgi:olayları gönderme(dispatch-events)> bölümünde bir örnek gördük: menu-open özel olayı(custom event) setTimeout içinde gönderilir, böylece “click” olayı tamamen iÅŸlendikten sonra gerçekleÅŸir.

menu.onclick = function() {
  // ...

  // tıklanan menü öğesi verileriyle özel bir olay oluşturun
  let customEvent = new CustomEvent("menu-open", {
    bubbles: true
  });

  // özel olayı eşzamansız(asynchronously) olarak gönder
  setTimeout(() => menu.dispatchEvent(customEvent));
};

Macrotasks ve Microtasks

Bu bölümde açıklanan macrotask’ler ile birlikte, bilgi:microtasks-sırası bölümünde bahsedilen microtask’ler vardır.

Microtask’ler yalnızca kodumuzdan gelir. Genellikle promise’larla oluÅŸturulurlar: .then/catch/finally iÅŸleyicisinin yürütülmesi bir microtask haline gelir. Microtask’ler, bir baÅŸka promise iÅŸleme biçimi olduÄŸu için, wait’in “örtüsü altında” da kullanılır.

Ayrıca, microtask kuyruÄŸunda yürütülmek üzere func’u sıraya sokan özel bir queueMicrotask(func) fonksiyonu da vardır.

Her macrotask’dan hemen sonra, motor, diğer macrotask’ları çalıştırmadan veya oluşturmadan veya başka herhangi bir şeyden önce tüm görevleri microtask kuyruğundan yürütür.

Örneğin, bir göz atın:

setTimeout(() => alert("timeout"));

Promise.resolve()
  .then(() => alert("promise"));

alert("code");

Buradaki sıra ne olacak?

1. Sıradan bir eÅŸzamanlı(synchronous) çaÄŸrı olduÄŸu için önce kod gösterilir.
2. promise ikinci sıradadır, çünkü .then microtask kuyruÄŸundan geçer ve geçerli koddan sonra çalışır.
3. timeout’u en son gösterir, çünkü bu bir macrotask’dir.

Daha zengin olay döngüsü resmi şöyle görünür (sıra yukarıdan aşağıya doğrudur, yani: önce script, ardından microtask’ler, oluşturma(rendering) vb.):

Tüm microtask’ler, başka herhangi bir olay işleme(handling) veya oluşturma(rendering) veya başka herhangi bir macrotask gerçekleşmeden önce tamamlanır.

Uygulama ortamının microtask’ler arasında temelde aynı olmasını (fare koordinat değişikliği yok, yeni ağ verisi yok, vb.) garanti ettiği için bu önemlidir.

Bir fonksiyonu eÅŸzamansız(asynchronously) olarak (geçerli koddan sonra) yürütmek istiyorsak, ancak deÄŸiÅŸiklikler oluÅŸturulmadan(rendered) veya yeni olaylar iÅŸlenmeden(handled) önce, bunu queueMicrotask ile zamanlayabiliriz.

Here’s an example with “counting progress bar”, similar to the one shown previously, but queueMicrotask is used instead of setTimeout. You can see that it renders at the very end. Just like the synchronous code: Burada, daha önce gösterilene benzer bir “sayan ilerleme çubuÄŸu” örneÄŸi verilmiÅŸtir, ancak setTimeout yerine queueMicrotask kullanılmıştır. En sonunda oluÅŸtuÄŸunu(render) görebilirsiniz. Tıpkı senkron kod gibi:

<div id="progress"></div>

<script>
  let i = 0;

  function count() {

    // ağır işin bir parçasını yap (*)
    do {
      i++;
      progress.innerHTML = i;
    } while (i % 1e3 != 0);

    if (i < 1e6) {
      queueMicrotask(count);
    }

  }

  count();
</script>

Özet

Daha ayrıntılı bir olay döngüsü algoritması (yine de spesifikasyona kıyasla basitleştirilmiş olsa da):

1. En eski görevi macrotask kuyruğundan ayırın ve çalıştırın (ör. “script”).
2. Tüm microtask’leri yürütün:
   • Microtask kuyruÄŸu boÅŸ deÄŸilken:
     • En eski microtask’i sıraya alın ve çalıştırın.
3. Varsa oluÅŸturme(render) deÄŸiÅŸiklikleri.
4. Macrotask kuyruğu boşsa, bir macrotask görünene kadar bekleyin.
5. 1.Adıma gidin.

Yeni bir macrotask zamanlamak için:

• Sıfır gecikmeli setTimeout(f) kullanın.

Bu, tarayıcının kullanıcı olaylarına tepki verebilmesi ve aralarındaki ilerlemeyi gösterebilmesi için büyük bir hesaplama ağırlıklı görevi parçalara ayırmak için kullanılabilir.

Ayrıca, olay tamamen işlendikten (köpürme işlemi) sonra bir eylem zamanlamak için olay işleyicilerinde kullanılır.

Yeni bir microtask planlamak için

• queueMicrotask(f) kullanın.
• Ayrıca promise iÅŸleyicileri microtask kuyruÄŸundan geçer.

Microtask’ler arasında UI veya ağ olayı işleme yoktur: Bunlar birbiri ardına hemen çalışır.

Bu nedenle, bir fonksiyonu eÅŸzamansız(asynchronously) olarak ancak ortam durumu içinde yürütmek için queueMicrotask isteyebilirsiniz.