Gelişmiş JavaScript

Nov 28 2022

İçindekiler Bu makalede, JavaScript'in iç işleyişini ve aslında nasıl çalıştığını inceleyeceğiz. Ayrıntıları anlayarak kodunuzun davranışını anlarsınız ve bu nedenle daha iyi uygulamalar yazabilirsiniz.

İçindekiler

Konu ve Çağrı Yığını
Yürütme Bağlamı
Olay Döngüsü ve Eşzamansız JavaScript
Bellek Depolama ve Çöp Toplama
JIT (Tam Zamanında) Derleme
Özet

Bu makalede, JavaScript'in iç işleyişine ve gerçekte nasıl çalıştığına değineceğiz. Ayrıntıları anlayarak kodunuzun davranışını anlarsınız ve bu nedenle daha iyi uygulamalar yazabilirsiniz.

JavaScript şu şekilde tanımlanır:

Engelleyici olmayan bir olay döngüsüne sahip, tek iş parçacıklı, çöp toplamalı, yorumlanmış veya Tam Zamanında derlenmiş programlama dili.

Bu anahtar terimlerin her birini açalım.

Konu ve Çağrı Yığını:

JavaScript motoru, programı yürütmek için kullanılan bir yığın ve tek bir çağrı yığınından oluşan tek iş parçacıklı bir yorumlayıcıdır .
Çağrı yığını , işlev başlatmayı (çağrı) geçici olarak depolamak ve yönetmek için Son Giren İlk Çıkar (LIFO) ilkesini kullanan bir veri yapısıdır.
Bu, yığına itilen son işlevin, işlev geri döndüğünde ilk çıkan işlev olduğu anlamına gelir.
Çağrı yığını tek olduğundan, işlev(ler)in yürütülmesi yukarıdan aşağıya birer birer yapılır. Çağrı yığınının senkronize olduğu anlamına gelir.

Şimdi, eşzamanlı olduğu için, JavaScript'in eşzamansız çağrıları nasıl işleyebileceğini merak edeceksiniz.
Olay döngüsü, JavaScript'in eşzamansız programlamasının arkasındaki sırdır.
Ancak, JavaScript içindeki zaman uyumsuz çağrılar kavramını ve bunun tek iş parçacıklı dil ile nasıl mümkün olduğunu açıklamadan önce, kodun nasıl yürütüldüğünü anlayalım.

Yürütme Bağlamı (EC):

Yürütme Bağlamı, JavaScript kodunun yürütüldüğü ortam olarak tanımlanır.
Yürütme Bağlamının oluşturulması iki aşamada gerçekleşir:

1. Bellek Oluşturma Aşaması:

Global nesnenin oluşturulması (tarayıcıda pencere nesnesi ve NodeJS'de global nesne olarak adlandırılır).
“This” nesnesini oluşturmak ve onu global nesneye bağlamak.
Değişkenleri ve işlev referanslarını depolamak için bellek yığınını ayarlama (Bir yığın, büyük, çoğunlukla yapılandırılmamış bir bellek bölgesidir).
Hoisting'i uygulayarak işlevleri ve değişkenleri genel yürütme bağlamında depolama .

Artık kod yürütmenin ardındaki adımları bildiğimize göre, hadi geri dönelim.

Olay Döngüsü:

İlk olarak, bu şemaya bakarak başlayalım:

JS'de Olay Döngüsü

İki ana bileşenden oluşan bir motora sahibiz:
* Bellek Yığını — bellek tahsisinin gerçekleştiği yer burasıdır.
* Çağrı Yığını — kodunuz yürütülürken yığın çerçevelerinizin olduğu yer burasıdır.

Erişemeyeceğiniz başlıklar olan Web API'lerimiz var, onlara sadece çağrı yapabilirsiniz. DOM, AJAX, setTimeout ve çok daha fazlası gibi eşzamanlılığın devreye girdiği tarayıcı parçalarıdır.

Son olarak, işlenecek olayların bir listesi olan Geri Arama kuyruğu vardır. Her olayın, onu işlemek için çağrılan ilişkili bir işlevi vardır.

Peki olay döngüsünün buradaki görevi nedir?
Olay Döngüsünün basit bir işi vardır — Arama Yığını ve Geri Arama Kuyruğunu izlemek. Çağrı Yığını boşsa, Olay Döngüsü kuyruktaki ilk olayı alır ve etkin bir şekilde çalıştıran Çağrı Yığınına gönderir.
Böyle bir yineleme, Olay Döngüsünde bir onay işareti olarak adlandırılır. Her olay yalnızca bir işlev geri aramasıdır.

Bellek Depolama ve Çöp Toplama:

Çöp toplama ihtiyacını anlamak için öncelikle herhangi bir programlama dili için hemen hemen aynı olan Bellek Yaşam Döngüsünü anlamalıyız, 3 ana adımı vardır.
1. Belleği ayırın.
2. Tahsis edilen hafızayı okumak veya yazmak veya her ikisi için kullanın.
3. Artık gerekmediğinde ayrılan belleği serbest bırakın.

Bellek yönetimi sorunlarının çoğu, ayrılan belleği serbest bırakmaya çalıştığımızda ortaya çıkar. Ortaya çıkan temel endişe, kullanılmayan bellek kaynaklarının belirlenmesidir.
Geliştiricinin belleğe ne zaman ihtiyaç kalmadığına manuel olarak karar vermesi gereken düşük düzeyli dillerde, JavaScript gibi yüksek düzeyli diller, Çöp Toplama (GC) olarak bilinen otomatikleştirilmiş bir bellek yönetimi biçimi kullanır.
JavaScript, GC gerçekleştirmek için iki ünlü strateji kullanır: Referans sayma tekniği ve İşaretle ve süpür algoritması. Her iki algoritma ve nasıl çalıştıkları hakkında MDN'den
ayrıntılı bir açıklamayı burada bulabilirsiniz.

JIT (Tam Zamanında) Derleme:

JavaScript tanımına geri dönelim: “Yorumlanmış, JIT-derlenmiş programlama dili” diyor, peki bu ne anlama geliyor? Genel olarak derleyici ve tercüman arasındaki farkla başlamaya ne dersiniz?

Bir benzetme olarak, iletişim kurmak isteyen farklı dillere sahip iki kişiyi düşünün. Derleme, durup tüm zamanınızı dili öğrenmek için ayırmaya benzer ve yorumlama, orada her cümleyi çevirecek birinin olması gibi olacaktır.

Yani derlenmiş dillerin yavaş yazma süresi ve hızlı çalışma süresi vardır ve yorumlanmış dillerin tersi vardır.

Teknik terimlerle konuşursak: derleme, yürütmeden önce program kaynak kodunu makine tarafından okunabilen ikili koda dönüştürme işlemidir ve bir derleyici tüm programı tek seferde alır.

Öte yandan, tercüman, program talimatlarını makine tarafından okunabilir bir biçimde önceden derlenmelerini gerektirmeden yürüten bir programdır ve her seferinde tek bir kod satırı alır.

Ve burada, yorumlanmış programların performansını artıran JIT derleme rolü geliyor. Kodun tamamı bir kerede makine koduna dönüştürülür ve ardından hemen çalıştırılır .

JIT derleyicisinin içinde, monitör (profil oluşturucu olarak da bilinir) adı verilen yeni bir bileşenimiz var. Bu monitör kodu çalışırken izler ve

Kodun sıcak veya sıcak bileşenlerini tanımlayın, örneğin: tekrarlayan kod.

Çalışma zamanı sırasında bu bileşenleri makine koduna aktarın.
Oluşturulan makine kodunu optimize edin.
Kodun önceki uygulamasını çalışırken değiştirin.

Artık temel kavramları anladığımıza göre, bir dakikanızı ayırarak her şeyi bir araya getirelim ve JS Engine'in kodu yürütürken izlediği adımları özetleyelim: