Javascript Motoru Nedir, Nasıl çalışır ? Abstract Syntax Tree, Bytecode nasıl oluşturuluyor ?

Javascript son 10 yılda nefret edilen ama mecburen geliştirme yapılan bir dil iken hızlı şekilde ve zevkle geliştirme yapılan, her yerde kullanılabilen ve gün geçtikçe daha da zevkli hale gelen bir dil olmuştur.

Javascript dili temel olarak basit bir dildir fakat Javascript’in çalıştığı ortamın detaylarını iyi anlamaz isek geliştirdiğimiz uygulamalar beklediğimiz performans ve akıcılıkta olmayacaktır. Bu yazı serisi ile Javascript’in üzerinde koştuğu Javascript motorunun detaylarını göreceğiz ve daha etkili Javascript uygulamaları geliştirmek için faydalı bilgiler öğreneceğiz.

Konuya giriş yapmadan önce bu yazı dizisinin Code42 kanalımda video halini bulabilirsiniz eğer video anlatım daha çok hoşunuza gidiyorsa buradan izleyebilirsiniz.

Javascript nedir ve nerelerde bulunur ?

Javascript dili temel olarak bir scripting dilidir ve günümüzde HTML + CSS ile tarayıcılarda, NodeJS ile server ortamında, Electron+NodeJS ile desktop ortamında, React Native ile mobil cihazlar için uygulama geliştirmemizi sağlamaktadır.

Javascript kodları JS motoru dediğimiz yapı ile çalıştırılır. JS Motorlarının en bilineni Google Chrome için geliştirilen V8 motorudur. Javascript motoru tek başına çalıştırılabilir bir uygulama değildir daha çok bir kütüphane şeklinde kullanılmaktadır ve içinde bulunduğu ortam ile entegre edilir. Örneğin tarayıcı içine JS motoru entegre edilmiş ise tarayıcı location, window, history gibi çeşitli yapılarını JS motoru ile entegre eder ve bu sayede JS motoru tarayıcıya ait olan bu yapıları görebilir hale gelir.

Javascript motoru nedir ?

Javascript Motoru genelde C++ ile yazılan ve embed edilmeye uygun kütüphanelerdir. Tek başına çalıştırılabilir halde değillerdir.

JS Motoru genel olarak 2 tiptedir :

• Interpreter
• Interpreter + Compiler

Interpreter tipindeki JS motorları text tabanlı JS kodlarını synax tree halie getirip çalıştırır ya da ilerleyen aşamalarda anlatacağım bytecode haline dönüştürüp çalıştırır. Bu syntax tree veya bytecode üzerinden ekstra bir işlem yapmaz yani performans iyileştirmesi uygulamaz.

Interpreter + Compiler tipindeki Javascript motorları ekstra olarak Interpreter’a paralel çalışan Compilera sahiptir ve compiler sürekli çalıştırılan uygun kod bölgelerini native olarak derler ve uzun vadede kodların daha performanslı bir çalışmasını sağlar. Compiler’in etkisini göstermesi için kodun bir süre çalışması gerekmektedir aksi takdirde performans optimizasyonu uygulayamaz.

Javascript motoru nasıl çalışır ?

Javascript motoruna içinde bulunduğu ortam ( NodeJS, Browser vs ) kodları okur ve gönderir bu sayede JS Motoru öncelikle saf metin olan JS kodunu parse eder ve bir syntax tree oluşturur.

Eğer JS Motoru sadece interpreter ise bu syntax tree yapısını çalıştırır, eğer JS motoru virtual machine yapısına sahip ise daha performanslı çalışabilmek için syntax tree’den bytecode üretir ve bu bytecode’ları çalıştırır ayrıca paralelde bu bytecode’ların eğer makine diline dönüştürülebilecek kısımları var ise bunları makine diline dönüştürür ve daha performanslı bir yapıya kavuşur.

Syntax Tree ( Abstract Syntax Tree ) nedir ?

Syntax Tree JS kodundan oluşturulan ve JS Motorunun daha kolay çalışabileceği bir data yapısıdır.

https://astexplorer.net/ sitesinde örnek bir syntax tree görebilirisiniz.

Bytecode Nedir ?

Bytecode virtual machine yapısına sahip JS motorlarının kullandığı makine diline yakın olan bir kod yapısıdır. Syntax tree işlenerek elde edilir ve ortaya çıkan Bytecode çalıştırılırken paralelde JS motoru bu bytecode’un gerçek makine diline dönüştürülebilen kısımlarını tespit eder ve makine diline dönüştürerek performanslı bir yapı sağlar.

Bytecode’lar her JS motoru için farklıdır çünkü her motor farklı şekillerde geliştirilmektedir ve bir standart izlemedikleri için kullandıkları bytecode’larda farklılık göstermektedir. Bu sebeple üretilen bu bytecode’ları her tarayıcıda kullanamıyoruz.

Aşağıdaki komut yardımı ile V8’e özel bytecode alınabilir.

node — print-bytecode javascript_dosyasi.js

Bu noktaya kadar Javascript motorunun derinlemesine detaylarını öğrenmiş olduk ve bu bilgiler ışığında bir Javascript motorunu daha hızlı açılabilmesini isteseydik nasıl bir mühendislik çözümü uygulardık ?

İşte bu soruyu Facebook mühendisleri React Native için düşünmüşler ve yaratıcı bir çözüm ile gelmişler : Hermes Engine

React Native — Hermes JS Motoru farkı ne ?

React Native için geliştirilen JS Motoru Hermes Read > Parse > Bytecode > Execute aşamalarını uygulamanın çalıştığı ortamda yapmak yerine Read > Parse > Bytecode adımlarını geliştirmenin yapıldığı bilgisayarda yaparak mobil cihazda çalışan Javascript uygulamasını Read > Execute adımlarına düşürmüştür ve bu sayede JS motoru daha hızlı başlatılabilmektedir.

Hermes’in V8’e göre eksiği Bytecode üzerinden makina kodu üretememesidir sadece Virtual machine şekline çalışmaktadır yani ekstra optimizasyon yapmadan üretilen ByteCode çalıştırılmaktadır.