Uzun görevleri optimize edin

"Ana iş parçacığını engellemeyin" ve "uzun görevlerinizi bölün" şeklinde talimatlar aldınız. Peki bu talimatları uygulamak ne anlama geliyor?

Jeremy Wagner

JavaScript uygulamalarını hızlı tutmayla ilgili yaygın öneriler genellikle aşağıdakilere dayanır:

• "Ana ileti dizisini engellemeyin."
• "Uzun görevlerinizi bölün."

Bu çok güzel bir tavsiye ama ne gibi bir çalışma yapılır? Daha az JavaScript göndermek iyidir ancak bu durum otomatik olarak daha duyarlı kullanıcı arayüzleriyle eş değer midir? Belki, belki de değil.

JavaScript'te görevlerin nasıl optimize edileceğini anlamak için öncelikle görevlerin ne olduğunu ve tarayıcının bunları nasıl işlediğini bilmeniz gerekir.

Görev nedir?

Görev, tarayıcının yaptığı ayrı bir çalışma parçasıdır. Bu işlemler arasında oluşturma, HTML ve CSS'yi ayrıştırma, JavaScript çalıştırma ve doğrudan kontrol sahibi olamayacağınız diğer işlem türleri yer alır. Tüm bu kaynaklar arasında, yazdığınız JavaScript belki de en büyük görev kaynağıdır.

Bir click etkinlik işleyici tarafından başlatılan ve Chrome Geliştirici Araçları'nın performans profil aracında gösterilen bir görev.

JavaScript ile ilişkili görevler performansı birkaç şekilde etkiler:

• Bir tarayıcı, başlangıç sırasında bir JavaScript dosyası indirdiğinde, bu JavaScript'i daha sonra çalıştırabilmek için ayrıştırma ve derleme görevlerini sıraya ekler.
• Sayfanın kullanım süresi boyunca, JavaScript'in çalıştığı diğer zamanlarda (ör. etkinlik işleyiciler aracılığıyla etkileşimler oluşturma, JavaScript destekli animasyonlar ve analiz toplama gibi arka plan etkinlikleri) görevler sıraya alınır.

Web çalışanları ve benzer API'ler hariç tüm bu işlemler ana iş parçacığında gerçekleşir.

Ana mesaj nedir?

Ana iş parçacığı, tarayıcıda çoğu görevin çalıştırıldığı ve yazdığınız neredeyse tüm JavaScript'in yürütüldüğü yerdir.

Ana iş parçacığı tek seferde yalnızca bir görev işleyebilir. 50 milisaniyeden uzun süren tüm görevler uzun görev olarak kabul edilir. 50 milisaniyeyi aşan görevlerde, görevin toplam süresi eksi 50 milisaniye ise görevin engelleme süresi olarak bilinir.

Tarayıcı, herhangi bir uzunlukta bir görev çalışırken etkileşimlerin gerçekleşmesini engeller ancak görevler çok uzun süre çalışmadığı sürece bu durum kullanıcı tarafından fark edilmez. Bununla birlikte, bir kullanıcı çok sayıda uzun görev varken bir sayfayla etkileşimde bulunmaya çalıştığında, ana iş parçacığı çok uzun süre engellenmiş olsa bile kullanıcı arayüzü yanıt vermiyor, hatta bozulmuş gibi görünebilir.

Chrome'un performans profil aracında gösterilen uzun bir görev. Uzun görevler, köşesinde kırmızı üçgenle gösterilir. Görevin engelleyen kısmı, çapraz kırmızı şeritlerle doldurulur.

Ana iş parçacığının çok uzun süre boyunca engellenmesini önlemek için uzun bir görevi birkaç küçük göreve bölebilirsiniz.

Tek bir uzun görevin görselleştirmesi ve aynı görevin beş kısa göreve bölünmüş hali.

Görevler bölündüğünde tarayıcı, kullanıcı etkileşimleri de dahil olmak üzere daha yüksek öncelikli işlere çok daha erken yanıt verebilir. Bu nedenle, görevler bölünmelidir. Ardından, kalan görevler tamamlanana kadar çalıştırılır. Böylece, başlangıçta sıraya eklediğiniz işin tamamlanması sağlanır.

Görevler çok uzun olduğunda ve tarayıcı etkileşimlere yeterince hızlı yanıt veremediğinde etkileşimlere ne olduğunun, uzun görevlerin daha küçük görevlere bölündüğünde ise ne olduğunun görselleştirilmesi.

Önceki şeklin üst kısmında, bir kullanıcı etkileşimi tarafından sıraya eklenen bir etkinlik işleyicinin başlamadan önce tek bir uzun görevi beklemesi gerekiyordu. Bu, etkileşimin gerçekleşmesini geciktirir. Bu senaryoda kullanıcı gecikmeyi fark etmiş olabilir. Alt kısımda, etkinlik işleyici daha erken çalışmaya başlayabilir ve etkileşim anında gerçekleşmiş gibi hissedilebilir.

Görevleri bölmenin neden önemli olduğunu öğrendiğinize göre, JavaScript'te bunu nasıl yapacağınızı öğrenebilirsiniz.

Görev yönetimi stratejileri

Yazılım mimarisinde yaygın olarak yaptığımız bir tavsiye, çalışmanızı daha küçük işlevlere bölmenizdir:

function saveSettings () {
  validateForm();
  showSpinner();
  saveToDatabase();
  updateUI();
  sendAnalytics();
}

Bu örnekte, bir formu doğrulamak, bir döndürme çubuğu göstermek, uygulama arka ucuna veri göndermek, kullanıcı arayüzünü güncellemek ve analiz göndermek için beş işlevi çağıran saveSettings() adlı bir işlev vardır.

saveSettings(), kavramsal olarak iyi tasarlanmış. Bu işlevlerden birinde hata ayıklama yapmanız gerekirse her işlevin ne işe yaradığını öğrenmek için proje ağacında gezinebilirsiniz. İşleri bu şekilde bölmek, projelerde gezinmeyi ve projeleri sürdürmeyi kolaylaştırır.

Ancak buradaki olası bir sorun, JavaScript'in bu işlevlerin her birini saveSettings() işlevi içinde yürütüldüğü için ayrı görevler olarak çalıştırmamasıdır. Bu, beş işlevin de tek bir görev olarak çalışacağı anlamına gelir.

Önemli nokta: JavaScript, görev yürütme için tamamlanana kadar çalıştırma modelini kullandığından bu şekilde çalışır. Bu, her görevin ana iş parçacığını ne kadar süreyle engelleyeceğinden bağımsız olarak tamamlanana kadar çalışacağı anlamına gelir.

Beş işlevi çağıran tek bir işlev saveSettings(). Çalışma, tek bir uzun monolitik görev kapsamında çalıştırılır.

En iyi durumda, bu işlevlerden yalnızca biri bile görevin toplam uzunluğuna 50 milisaniye veya daha fazla katkıda bulunabilir. En kötü durumda, bu görevlerden daha fazlası özellikle kaynak kısıtlaması olan cihazlarda çok daha uzun süre çalışabilir.

Kod yürütmeyi manuel olarak erteleme

setTimeout(), geliştiricilerin görevleri daha küçük görevlere ayırmak için kullandıkları yöntemlerden biridir. Bu teknikte işlevi setTimeout()'e iletirsiniz. Bu işlem, 0 zaman aşımı belirtseniz bile geri çağırmanın yürütülmesini ayrı bir göreve erteler.

function saveSettings () {
  // Do critical work that is user-visible:
  validateForm();
  showSpinner();
  updateUI();

  // Defer work that isn't user-visible to a separate task:
  setTimeout(() => {
    saveToDatabase();
    sendAnalytics();
  }, 0);
}

Bu, getiri olarak bilinir ve en iyi şekilde, sıralı olarak çalışması gereken bir dizi işlev için işe yarar.

Önemli nokta: Ana ileti dizisine yanıt verdiğinizde, ileti dizisine başlangıçta sıraya alınmış olanlardan daha önemli görevleri gerçekleştirmesi için fırsat tanımış olursunuz. İdeal olarak, kullanıcıya yönelik bir çalışmanız (ör. kullanıcı arayüzünü güncelleme) olduğunda ve bu çalışmanın, vermediğinizden daha hızlı yürütülmesi gerektiğinde ana iş parçacığına vermeniz gerekir.

Ancak kodunuz her zaman bu şekilde düzenlenmeyebilir. Örneğin, döngü içinde işlenmesi gereken büyük miktarda veriniz olabilir ve çok sayıda iterasyon varsa bu görev çok uzun sürebilir.

function processData () {
  for (const item of largeDataArray) {
    // Process the individual item here.
  }
}

Burada setTimeout() kullanmak, geliştirici ergonomisi nedeniyle sorunludur ve her iterasyon hızlı bir şekilde çalışsa bile veri dizisinin tamamının işlenmesi çok uzun sürebilir. Tüm bu nedenlerden dolayı setTimeout(), bu iş için doğru araç değildir (en azından bu şekilde kullanıldığında).

Getiri puanları oluşturmak için async/await değerini kullanın

Kullanıcılara yönelik önemli görevlerin daha düşük öncelikli görevlerden önce gerçekleştirildiğinden emin olmak amacıyla, tarayıcıya daha önemli görevleri çalıştırması için fırsat tanımak amacıyla görev sırasını kısa süreliğine keserek ana iş parçacığını yaratabilirsiniz.

Daha önce açıklandığı gibi, setTimeout ana iş parçacığına yol vermek için kullanılabilir. Ancak kolaylık ve daha iyi okunabilirlik için Promise içinde setTimeout'ü çağırabilir ve geri çağırma işlevi olarak resolve yöntemini iletebilirsiniz.

function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

Dikkat: Bu kod örneği, setTimeout() çağrısından sonra çözülen bir Promise döndürür. Ancak kodun geri kalanını yeni bir görevde çalıştırmaktan sorumlu olan Promise değil, setTimeout() çağrısıdır. Promise geri çağırma işlevleri, görevler yerine mikro görevler olarak çalıştırılır ve bu nedenle ana iş parçacığına vermez.

yieldToMain() işlevinin avantajı, herhangi bir async işlevinde await kullanabilmenizdir. Önceki örnekten yola çıkarak, çalıştırılacak bir işlev dizisi oluşturabilir ve her biri çalıştıktan sonra ana iş parçacığına verebilirsiniz:

async function saveSettings () {
  // Create an array of functions to run:
  const tasks = [
    validateForm,
    showSpinner,
    saveToDatabase,
    updateUI,
    sendAnalytics
  ]

  // Loop over the tasks:
  while (tasks.length > 0) {
    // Shift the first task off the tasks array:
    const task = tasks.shift();

    // Run the task:
    task();

    // Yield to the main thread:
    await yieldToMain();
  }
}

Sonuçta, eskiden monolitik bir görev artık farklı görevlere bölünmüştür.

saveSettings() işlevi artık alt işlevlerini ayrı görevler olarak yürütüyor.

Önemli nokta: Her işlev çağrısından sonra yield kullanmanız gerekmez. Örneğin, kullanıcı arayüzünde kritik güncellemelerle sonuçlanan iki işlev çalıştırırsanız muhtemelen bu işlevler arasında yield kullanmak istemezsiniz. Mümkünse önce bu çalışmasını bekleyin, ardından kullanıcının görmediği, daha az kritik önem taşıyan veya arka planda işlem yapan işlevler arasında geçiş yapmayı düşünün.

Özel bir planlayıcı API'si

setTimeout, görevleri bölmek için etkili bir yoldur ancak dezavantajı olabilir: Kodu sonraki bir görevde çalışacak şekilde erteleyerek ana iş parçacığına veri koyduğunuzda bu görev, sıranın sonuna eklenir.

Sayfanızdaki tüm kodu kontrol ediyorsanız görevleri öncelik sırasına koyma özelliğiyle kendi planlayıcınızı oluşturabilirsiniz ancak üçüncü taraf komut dosyaları planlayıcınızı kullanmaz. Aslında bu tür ortamlarda çalışmaya öncelik veremezsiniz. Yalnızca parçalara ayırabilir veya kullanıcı etkileşimlerine açıkça yol verebilirsiniz.

Tarayıcı desteği

• 94
• 94
• 
• x

Kaynak

Planlayıcı API'si, görevlerin daha ayrıntılı bir şekilde planlanmasına olanak tanıyan postTask() işlevini sunar. Bu işlev, tarayıcının işe öncelik vermesine yardımcı olarak düşük öncelikli görevlerin ana iş parçacığına devredilmesini sağlar. postTask(), taahhütleri kullanır ve üç priority ayarından birini kabul eder:

• En düşük öncelikli görevler için 'background'.
• 'user-visible' orta öncelikli görevler için. priority ayarlanmamışsa varsayılan değer budur.
• 'user-blocking', yüksek öncelikli olarak çalıştırılması gereken kritik görevler için kullanılır.

Üç görevi mümkün olan en yüksek öncelikte, kalan iki görevi ise mümkün olan en düşük öncelikte çalıştırmak için postTask() API'nin kullanıldığı aşağıdaki kodu örnek olarak alın.

function saveSettings () {
  // Validate the form at high priority
  scheduler.postTask(validateForm, {priority: 'user-blocking'});

  // Show the spinner at high priority:
  scheduler.postTask(showSpinner, {priority: 'user-blocking'});

  // Update the database in the background:
  scheduler.postTask(saveToDatabase, {priority: 'background'});

  // Update the user interface at high priority:
  scheduler.postTask(updateUI, {priority: 'user-blocking'});

  // Send analytics data in the background:
  scheduler.postTask(sendAnalytics, {priority: 'background'});
};

Burada, görevlerin önceliği, tarayıcı tarafından öncelik verilen görevlerin (ör. kullanıcı etkileşimleri) gerektiğinde aralarına girebileceği şekilde planlanır.

saveSettings() çalıştırıldığında işlev, bağımsız işlevleri postTask() kullanarak planlar. Kullanıcının bilmediği çalışma, arka planda çalışacak şekilde planlanırken, kullanıcıya yönelik kritik çalışma yüksek öncelikte planlanır. Bu sayede, iş hem bölünür hem de uygun şekilde önceliklendirilir. Böylece kullanıcı etkileşimleri daha hızlı yürütülür.

Bu, postTask() özelliğinin nasıl kullanılabildiğine dair basit bir örnektir. Görevler arasında öncelikleri paylaşabilecek farklı TaskController nesneleri örneklemek mümkündür. Bu sayede, gerektiğinde farklı TaskController örnekleri için öncelikleri değiştirebilirsiniz.

Önemli nokta: postTask() tüm tarayıcılarda desteklenmez. Özelliğin kullanılıp kullanılamadığını görmek için özellik algılamayı kullanabilir veya çoklu dolgu kullanabilirsiniz.

scheduler.yield() API ile devamlı dahili getiri

Tarayıcı desteği

• 129
• 129
• x
• x

Kaynak

scheduler.yield(), tarayıcıdaki ana iş parçacığına yol vermek için özel olarak tasarlanmış bir API'dir. Bu işlevin kullanımı, bu kılavuzun önceki bölümlerinde gösterilen yieldToMain() işlevine benzemektedir:

async function saveSettings () {
  // Create an array of functions to run:
  const tasks = [
    validateForm,
    showSpinner,
    saveToDatabase,
    updateUI,
    sendAnalytics
  ]

  // Loop over the tasks:
  while (tasks.length > 0) {
    // Shift the first task off the tasks array:
    const task = tasks.shift();

    // Run the task:
    task();

    // Yield to the main thread with the scheduler
    // API's own yielding mechanism:
    await scheduler.yield();
  }
}

Bu kod çoğunlukla tanıdık gelecektir, ancak yieldToMain() yerine await scheduler.yield() kullanıyor.

scheduler.yield() kullanıldığında, görev yürütme, verim noktasından sonra bile kaldığı yerden devam eder.

scheduler.yield() değerinin avantajı devamlılıktır. Yani bir görev grubunun ortasında teslim olursanız planlanmış diğer görevler, teslim noktasından sonra aynı sırayla devam eder. Bu sayede üçüncü taraf komut dosyalarındaki kod, kendi kodunuzun yürütülme sırasını kesintiye uğratmaz.

Not: Alternatif olarak, scheduler.postTask() ile priority: 'user-blocking' birlikte kullanıldığında da yüksek user-blocking önceliği nedeniyle devam edilme olasılığı yüksektir. Dolayısıyla bu yaklaşım alternatif olarak kullanılabilir. setTimeout() (veya priority: 'user-visible' ile scheduler.postTask() veya açık bir priority olmadan) kullanıldığında görev, kuyruğun en sonuna planlanır ve bu nedenle devam etmeden önce bekleyen diğer görevlerin çalışmasına izin verilir.

isInputPending() adını kullanma

Tarayıcı desteği

• 87
• 87
• x
• x

Kaynak

isInputPending() API, kullanıcının bir sayfayla etkileşim kurmayı deneyip denemediğini ve yalnızca giriş beklemedeyse getiriyi kontrol etmenin bir yolunu sağlar.

Bu sayede JavaScript, bekleyen giriş yoksa görev kuyruğunun en sonuna gitmek yerine çalışmaya devam eder. Bu, aksi takdirde ana iş parçacığına geri dönmeyebilecek siteler için Gönderme Niyeti bölümünde ayrıntılı olarak açıklandığı gibi etkileyici performans iyileştirmelerine neden olabilir.

Ancak bu API'nin kullanıma sunulmasından bu yana, özellikle INP'nin kullanıma sunulmasıyla birlikte, verim hakkındaki bilgimiz arttı. Artık bu API'yi kullanmanızı önermiyoruz. Bunun yerine, aşağıdaki nedenlerden dolayı giriş beklemede olup olmadığına bakılmaksızın vermeyi öneririz:

• isInputPending(), kullanıcının bazı durumlarda etkileşimde bulunmasına rağmen yanlışlıkla false döndürebilir.
• Görevlerin verim sağlaması gereken tek durum giriş değildir. Animasyonlar ve diğer düzenli kullanıcı arayüzü güncellemeleri, duyarlı bir web sayfası sağlamak kadar aynı derecede önemli olabilir.
• O zamandan beri, scheduler.postTask() ve scheduler.yield() gibi verim sorunlarını ele alan daha kapsamlı verim API'leri kullanıma sunulmuştur.

Sonuç

Görevleri yönetmek zordur ancak bu sayede sayfanız kullanıcı etkileşimlerine daha hızlı yanıt verir. Görevleri yönetmek ve önceliklendirmek için tek bir öneri yok, birkaç farklı teknik var. Görevleri yönetirken dikkate almanız gereken temel noktaları tekrar belirtmek isteriz:

• Kullanıcılara yönelik kritik görevler için ana ileti dizisine odaklanın.
• postTask() ile görevlere öncelik verin.
• scheduler.yield() ile denemeler yapmayı düşünebilirsiniz.
• Son olarak, işlevlerinizde mümkün olduğunca az işlem yapın.

Bu araçlardan bir veya daha fazlasını kullanarak uygulamanızdaki işi, kullanıcının ihtiyaçlarına öncelik verecek ve kritik öneme sahip olmayan işlerin yapılmasını sağlayacak şekilde yapılandırabilmeniz gerekir. Bu sayede daha duyarlı ve kullanımı daha keyifli bir kullanıcı deneyimi oluşturabilirsiniz.

Bu kılavuzu teknik olarak inceleyen Philip Walton'a özel teşekkürler.

Amirali Mirhashemian tarafından sağlanan ve Unsplash'tan alınan küçük resim.