JavaScript'in yürütme modeli nüanslıdır ve yanlış anlaşılması kolaydır. Olay döngüsünü özünde öğrenmek yardımcı olabilir.

JavaScript, görevleri birer birer işlemek için oluşturulmuş tek iş parçacıklı bir dildir. Ancak olay döngüsü, JavaScript'in eşzamanlı programlama sistemlerini taklit ederek olayları ve geri aramaları eşzamansız olarak işlemesine olanak tanır. Bu, JavaScript uygulamalarınızın performansını garanti eder.

JavaScript Olay Döngüsü Nedir?

JavaScript'in olay döngüsü, her JavaScript uygulamasının arka planında çalışan bir mekanizmadır. JavaScript'in, ana yürütme iş parçacığını engellemeden görevleri sırayla işlemesine izin verir. Bu denir asenkron programlama.

Olay döngüsü, çalıştırılacak bir dizi görev tutar ve bu görevleri sağa doğru besler web API'sı birer birer yürütme için. JavaScript bu görevleri takip eder ve her birini görevin karmaşıklık düzeyine göre işler.

JavaScript olay döngüsüne ve eşzamansız programlamaya olan ihtiyacı anlamak. Esas olarak hangi sorunu çözdüğünü anlamalısınız.

instagram viewer

Örneğin bu kodu alın:

functionlongRunningFunction() {
// This function does something that takes a long time to execute.
for (var i = 0; i < 100000; i++) {
console.log("Hello")
 }
}
functionshortRunningFunction(a) {
return a * 2 ;
}


functionmain() {
var startTime = Date.now();
 longRunningFunction();

var endTime = Date.now();


// Prints the amount of time it took to execute functions
console.log(shortRunningFunction(2));
console.log("Time taken: " + (endTime - startTime) + " milliseconds");
}
main();

Bu kod ilk olarak adlandırılan bir işlevi tanımlar. longRunningFunction(). Bu işlev, bir tür karmaşık, zaman alıcı görev yapacaktır. Bu durumda, bir gerçekleştirir için 100.000'den fazla kez yinelenen döngü. Bu şu demek console.log("Merhaba") 100.000 kez çalışır.

Bilgisayarın hızına bağlı olarak bu işlem uzun sürebilir ve shortRunningFunction() anında yürütmeden önceki işlev tamamlanana kadar.

Bağlam için, burada her iki işlevi çalıştırmak için geçen sürenin bir karşılaştırması verilmiştir:

Ve sonra tek shortRunningFunction():

2.351 milisaniyelik bir işlem ile 0 milisaniyelik bir işlem arasındaki fark, yüksek performanslı bir uygulama oluşturmayı hedeflediğinizde açıktır.

Olay Döngüsü, Uygulama Performansına Nasıl Yardımcı Olur?

Olay döngüsünün, sistemin çalışmasına katkıda bulunan farklı aşamaları ve bölümleri vardır.

Çağrı Yığını

JavaScript çağrı yığını, JavaScript'in uygulamanızdan işlev ve olay çağrılarını nasıl işlediği açısından önemlidir. JavaScript kodu yukarıdan aşağıya doğru derlenir. Ancak Node.js, kodu okurken Node.js aşağıdan yukarıya işlev çağrıları atayacaktır. Okuduğu gibi, tanımlı işlevleri çerçeveler halinde tek tek çağrı yığınına iter.

Çağrı yığını, yürütme bağlamını ve doğru işlev sırasını korumaktan sorumludur. Bunu, Son Giren İlk Çıkar (LIFO) yığını olarak çalışarak yapar.

Bu, programınızın çağrı yığınına ittiği son işlev çerçevesinin yığından ilk çıkan ve çalışan çerçeve olacağı anlamına gelir. Bu, JavaScript'in doğru işlev yürütme sırasını korumasını sağlayacaktır.

JavaScript, boşalana kadar her kareyi yığından çıkarır, yani tüm işlevlerin çalışması biter.

Libuv Web API'si

JavaScript'in eşzamansız programlarının özünde, libuv. libuv kütüphanesi, işletim sistemi ile etkileşime girebilen C programlama dilinde yazılmıştır. düşük seviyeli API'ler. Kitaplık, JavaScript kodunun diğerleriyle paralel çalışmasına izin veren birkaç API sağlayacaktır. kod. İş parçacıkları oluşturmak için API'ler, iş parçacıkları arasında iletişim kurmak için bir API ve iş parçacığı senkronizasyonunu yönetmek için bir API.

Örneğin, kullandığınızda Yürütmeyi duraklatmak için Node.js'de setTimeout. Zamanlayıcı, belirtilen gecikme geçtikten sonra geri arama işlevini yürütmek için olay döngüsünü yöneten libuv aracılığıyla kurulur.

Benzer şekilde, ağ işlemlerini eşzamansız olarak gerçekleştirdiğinizde, libuv bu işlemleri engelleyici olmayan bir şekilde işler. giriş/çıkış (G/Ç) işleminin tamamlanmasını beklemeden diğer görevlerin işlemeye devam etmesini sağlamak son.

Geri Arama ve Olay Kuyruğu

Geri arama ve olay kuyruğu, geri arama işlevlerinin yürütülmesini beklediği yerdir. Eşzamansız bir işlem libuv'dan tamamlandığında, karşılık gelen geri çağırma işlevi bu kuyruğa eklenir.

Sıra şu şekilde ilerliyor:

  1. JavaScript, eşzamansız görevleri işlemesi için libuv'a taşır ve bir sonraki görevi hemen işlemeye devam eder.
  2. Eşzamansız görev bittiğinde JavaScript, geri arama işlevini geri arama kuyruğuna ekler.
  3. JavaScript, mevcut sıradaki her şey tamamlanana kadar çağrı yığınındaki diğer görevleri yürütmeye devam eder.
  4. Arama yığını boşaldığında, JavaScript geri arama kuyruğuna bakar.
  5. Kuyrukta bir geri arama varsa, ilkini çağrı yığınına iter ve onu yürütür.

Bu şekilde, eşzamansız görevler ana iş parçacığını engellemez ve geri arama kuyruğu, karşılık gelen geri aramaların tamamlandıkları sırayla yürütülmesini sağlar.

Olay Döngüsü Döngüsü

Olay döngüsü ayrıca mikro görev kuyruğu adı verilen bir şeye sahiptir. Olay döngüsündeki bu özel sıra, çağrı yığınındaki geçerli görev tamamlanır tamamlanmaz yürütülmesi planlanan mikro görevleri tutar. Bu yürütme, bir sonraki işleme veya olay döngüsü yinelemesinden önce gerçekleşir. Mikro görevler, olay döngüsünde normal görevlere göre önceliği olan yüksek öncelikli görevlerdir.

Promises ile çalışırken genellikle bir mikro görev oluşturulur. Bir Taahhüt çözüldüğünde veya reddedildiğinde, karşılık gelen .Daha sonra() veya .yakalamak() geri aramalar mikro görev sırasına katılır. Uygulamanızın kullanıcı arayüzünü güncellemek veya durum değişikliklerini işlemek gibi geçerli işlemden sonra hemen yürütülmesi gereken görevleri yönetmek için bu kuyruğu kullanabilirsiniz.

Örneğin, veri getirme işlemini gerçekleştiren ve alınan verilere göre kullanıcı arayüzünü güncelleyen bir web uygulaması. Kullanıcılar, bir düğmeyi art arda tıklatarak bu veri getirmeyi tetikleyebilir. Düğmeye her tıklama, eşzamansız bir veri alma işlemi başlatır.

Mikro görevler olmadan, bu görev için olay döngüsü şu şekilde çalışır:

  1. Kullanıcı düğmeyi art arda tıklar.
  2. Her düğme tıklaması, eşzamansız bir veri getirme işlemini tetikler.
  3. Veri getirme işlemleri tamamlandığında, JavaScript karşılık gelen geri aramaları normal görev kuyruğuna ekler.
  4. Olay döngüsü, normal görev kuyruğundaki görevleri işlemeye başlar.
  5. Veri getirme sonuçlarına dayalı UI güncellemesi, normal görevler izin verir vermez yürütülür.

Ancak, mikro görevlerde olay döngüsü farklı çalışır:

  1. Kullanıcı düğmeyi art arda tıklar ve eşzamansız bir veri alma işlemini tetikler.
  2. Veri getirme işlemleri tamamlandığında, olay döngüsü karşılık gelen geri aramaları mikro görev kuyruğuna ekler.
  3. Olay döngüsü, mevcut görevi tamamladıktan (düğmeye tıklama) hemen sonra mikro görev kuyruğundaki görevleri işlemeye başlar.
  4. Veri getirme sonuçlarına dayalı UI güncellemesi, bir sonraki normal görevden önce yürütülür ve daha duyarlı bir kullanıcı deneyimi sağlar.

İşte bir kod örneği:

const fetchData = () => {
returnnewPromise(resolve => {
 setTimeout(() => resolve('Data from fetch'), 2000);
 });
};
document.getElementById('fetch-button').addEventListener('click', () => {
 fetchData().then(data => {
// This UI update will run before the next rendering cycle
 updateUI(data);
 });
});

Bu örnekte, "Getir" düğmesine her tıklama veriyi getir(). Her veri getirme işlemi, bir mikro görev olarak planlanır. Alınan verilere bağlı olarak, kullanıcı arabirimi güncellemesi, her getirme işlemi tamamlandıktan hemen sonra, diğer herhangi bir işleme veya olay döngüsü görevinden önce yürütülür.

Bu, kullanıcıların olay döngüsündeki diğer görevler nedeniyle herhangi bir gecikme yaşamadan güncellenen verileri görmelerini sağlar.

Bunun gibi senaryolarda mikro görevlerin kullanılması, kullanıcı arabirimi sarsıntısını önleyebilir ve uygulamanızda daha hızlı ve sorunsuz etkileşimler sağlayabilir.

Web Geliştirme için Olay Döngüsünün Etkileri

Olay döngüsünü ve özelliklerinin nasıl kullanılacağını anlamak, performanslı ve duyarlı uygulamalar oluşturmak için çok önemlidir. Olay döngüsü, eşzamansız ve paralel yetenekler sağlar, böylece kullanıcı deneyiminden ödün vermeden uygulamanızdaki karmaşık görevleri verimli bir şekilde halledebilirsiniz.

Node.js, JavaScript'in ana iş parçacığının dışında daha fazla paralellik elde etmek için web çalışanları da dahil olmak üzere ihtiyacınız olan her şeyi sağlar.