Javascript motorunun iç yapısı, Single Thread, Event Loop, Asenkronluk nedir ?
Bir önceki yazımda Javascript motorlarının genel olarak nasıl çalıştığını dıştan bakarak anlatmıştım bu yazıda ise Javascript motorunun iç yapısını detaylı inceleyeceğiz.
Javascript motoru genellikle C++ ile geliştirilen ve tek başına çalışamayan mutlaka bir ortam içine entegre edilmesi gereken bir kütüphanedir temel olarak.
En bilinen Javascript motorları şunlardır :
- JavascriptCore ( Safari içinde kullanılıyor )
- V8 ( Edge, Chrome, Opera, Electron içinde kullanılıyor )
Konuya daha detaylı giriş yapmadan yapmadan önce bu yazı dizisinin Code42 kanalımda video halini bulabilirsiniz eğer video anlatım daha çok hoşunuza gidiyorsa buradan izleyebilirsiniz.
Javascript Motoru İç Yapısı
Javascript ortamı genel olarak Javascript motorunun kendisi ve motorun içinde bulunduğu ortam ( Host ortamı ) olmak üzere 2 parçadır.
Javascript motorunun içinde şunlar bulunur :
- Memory Heap
- Call Stack
- Event Loop
- Callback Queue
Browser, NodeJS, React Native veya Electron olabilen Host ortamı içinde Javascript motoruna yardımcı fonksiyonlar yer alır :
- DOM fonksiyonları
- AJAX fonksiyonları
- setTimeout vb fonksiyonlar
- ….
Memory Heap
Tanımladığımız veya new ile yarattığımız nesnelerin/verilerin saklandığı memory alanı.
let myVar = 10;
let coolPerson = { name : “Tayfun” }
şeklinde yaptığımız deklarasyonlar sonucunda memory heap içinde myVar, coolPerson için değeri ve tipi ile ilgili bilgileri içeren bir alan açılır ve myVar, coolPerson değişkenleri ile işlem yaptığımız her yerde bu oluşturulmuş alan içindeki veriler kullanılır.
Call Stack
Call Stack fonksiyon çağrılarını yönetmek için kullanılan ve çağrılan fonksiyonlar ile ilgili bilgileri tutan bir data yapısıdır. LIFO yapısındadır yani en son eklenen metod bilgisi ilk önce çıkartılır. Javascript single-thread bir yapıdır yani metod çağrılarını sakladığı data yapısı call stack sadece bir tanedir ve bir metod işlem yapıyor iken call stack içine başka bir metod eklemez, mesela bir AJAX çağrısı bittiği zaman çağrılan callback call stack’e hemen alınmaz hemen çünkü çağrılan fonksiyon işini bitirdiği zaman yeni bir metod için call stack içine ekleme yapılır.
Örnek bir call stack akışı için aşağıdaki kod çağrılarını inceleyebiliriz :
Yukarıdaki kod bloğu Javascript call stack içinde aşağıdaki görünümü alacaktır.
Call Stack içinde eklenen her data Stack Frame olarak adlandırılır. Bir hata olduğunda veya debug ederken kullandığımız stack trace bu call stack içindeki fonksiyon bilgilerinin sıra ile çıkartılması sayesinde bulunuyor.
Örnek bir error çağrısı ile bunu görebiliriz :
Event Loop ve Concurrency
Event loop yapısını anlatabilmek için öncelikle Javascript motoru iç yapısının şekline tekrar bakalım :
Event loop JS kütüphanelerinin kalbidir ve callback, fonksiyon çağrıları, call stack yapılarının arasındaki senkronizasyonu yapar. Temel işi sonsuz döngü şeklinde sürekli olarak callback queue içine aktarılan fonksiyonları uygun zaman geldiğinde ( genelde çalışan bir metod bittiği zaman ) call stack içine atıp çalıştırmaktır.
Javascript single thread bir yapıdadır yani bir fonksiyon çağrılırken callback queue içine aktarılan tüm callbackler uygun zamanı bekler yani hemen çalıştırılmazlar. Dolayısı C/C++/Java gibi birden fazla thread açabilmeyi destekleyen ortamlarda yaşanan concurrency sorunu Javascript tarafında yoktur. Thread yapısı için Webworker gibi yapılar geliştirilmiştir ama temel Javascript motoru yapısı aynı kalmıştır yani single threaddir ve Webworker ile mesajlaşma çağrıları ile iletişim kurmaktadır.
Single thread yapısı nedeniyle eğer call stack içine aktarılan ve o anda çalışan bir fonksiyon eğer çok uzun süre işlem yapar ise içinde bulunduğu ortam eğer callback sonucunu bekliyor kilitlenmiş gibi olur. Bunu aşmak için çok uzun süren fonksiyonları setTimeout ile bölmek gerekir, bu sayede diğer fonksiyonların işlenmesine olanak sağlamış oluruz ve sistem kilitlenmiş gibi hissetmeyiz, tabi ki bu durumda çalışan fonksiyonumuz daha uzun sürede tamamlanacaktır ama kullanıcı deneyimi açısından getirdiği fayda daha önemlidir.
Asenkron Mantığı
Asenkronluk demek Javascript motoruna yardımcı ortam tarafından sağlanan AJAX, setTimeout gibi metodların başarılı/başarısız durumda ( veya T bir zaman sonra ) çalıştırmak istediğimiz javascript fonksiyonlarını işlemleri bitince callback queue içine ekleyerek JS motorunun uygun zaman geldiğinde ( yani aktif bir fonksiyon işlemini bitirince ) çağrılmasına verilen isimdir.
Asenkron çağrılar Javascript motoru dışındaki dünyanın bizim Javascript motoru dışında yapılan işlemleri yapıp sonuç noktasında Javascript motorunu çağırmasıdır. Bu sayede single thread olan Javascript motoru ortamın sağladığı yardımcı fonksiyonları kullanması ile sanki multithread imiş gibi çalışır ve aynı anda birden fazla işi yapabilir hale gelir.
Bu yazı ile Javascript motorunun iç yapısını gördük ! Bir sonraki yazımda dünyada en çok kullanılan Javascript motoru olan V8 ( Google tarafından geliştiriliyor ) motorunun performans için neler yaptığını göreceğiz ve Javascript kodlarımızı biraz daha performanslı hale nasıl getiririz öğreneceğiz.
