TARAYICILAR (BROWSER) NASIL ÇALIŞIR ?
Chrome JS Nasıl İşletir ?
Chrome Web sayfaları içerisinde yer alan JS kodlarını nasıl işletir. Aslında bu kodları çalıştırması için V8 Engine kullanır. Bu yazıda V8 Engine JS kodunu nasıl işleyip çalıştırdığını analiz etmeye çalışacağım.
Bu yazımı okumadan öncesinde JS Tarihçesi ve Event Loop yazılarımı okumanızı öneririm.
EventLoop yazımda Single Thread içerisinde JS nasıl async çalıştırıldığını, bunun içerisinde kodların Stack içerisine nasıl atılıp işletildiğini anlatmıştım. Burada ise Mathias Bynens & Benedikt Meurer — JSConf EU 2018 JS Engine Good Part sunumu üzerinden konuyu anlatmaya çalışacağım.
JS Her Ortamda Çalıştırılabilir Hale Geldi
JS önceden sadece Tarayıcılar üzerinde çalıştırılırken günümüzde , NodeJS ile sunucularda, React Native ile mobil cihazlarda, Electron ile Masaüstünde ve iOT cihazları üzerinde çalıştırılmaya başlandı.
- Tarayıcılarda → Chakra, JavascriptCore, SpiderMonkey ve V8
- NodeJS → Chakra, SpiderNode, V8
- Elektron → V8
- IoT → Duktape, Jerryscript
Tarayıcılara Göre JS Engine İncelediğimizde
- Chrome , Opera, Edge — V8
- Firefox — SpiderMonkey
- IE — Chakra
- Safari — JavaScriptCore
JS Engine Ana Akış
- JS kaynak kodları → Parser tarafından işlenerek → Abstract Syntax Tree
- Abstract Syntax Tree → Interpreter tarafından işlenerek → ByteCode
- ByteCode üstünde çalıştırılan sistemin profiling bilgilerinide alarak → Optimizing Compiler işlenerek → Optimized Makine koduna dönüştürülür.
- Daha sonra çalıştırılan kod üzerinde de-optimize edilerek bytecode ve elde edilen optimization ve profiling verileri ile tekrardan
Chrome — V8, Firefox — SpiderMonkey, Safari — JavascriptCore ve IE — Chakra akışın nasıl olduğunu görebilirsiniz.
JS Engine ’de Object Model ?
JS Object’ler string key olacak şekilde Dictionary/Map gibi tutulur. Örneğin içerisinde x ve y değeri olan bir object tanımladığımızda Objenin her bir x ve y property için Value, Writable, Enumerable ve Configurable bilgilerini tutar.
Property Attributes
Property attributes JSEngine tarafından oluşturulmuş bir kavram değil direk olarak EcmaScript tanımlı MDN Object bu bilgilere erişebilmek için fonksiyonları görebilirsiniz.
- Value: Property değerini
- Writable: Property değer atanıp atanamayacağını
- Enumerable: Property değerin for..in için kullanılabilir mi ?
- Configurable: Property attr üzerinden değişiklik iznini belirler
JS Engine ’de Array ?
Array ’ler Objectlerin özel durumlarıdır. Object Modellerine göre bazı farklar içerirler
Index:
Array indeksleri yönetmeleri gerekir. Bu indeksler maksimum uzunluğu 2³² — 1 or 4294967295 her türlü değeri alabilir.
Length:
Diğer bir farklılıkta Array Length JS Engine tarafından otomatik olarak hesaplanır. Aşağıdaki örnekte array öncelikle 2 elemanlı olduğunu sonrasından bir index elemanına set ettiğimizde length o index göre oluşturup araları boş bırakır.
Property
İçerisinde a elemanı olan bir array oluşturduğumuzda içerisinde
- length prop bunun içerisindeki eleman sadece a olduğu için Value 1, Enumerable ve Configurable değeri false dur.
- ‘0’ prop da a değerini tutar.
Peki buraya yeni bir eleman daha eklendiğinde nasıl davranır ?
- length prop değeri 2 olur
- 0 prop a değeri
- 1 prop b değeri tutulur
Object Aynı Şekle Sahip ise Bellekte Nasıl Tutuluyor ?
JS çoğunlukla Objeler ve Array üzerinden bu property erişimleri ile ilerler. Peki bu objelerin şekilleri aynı ise bu durumda objelerin x özelliğine aynı şekilde erişilebilir.
Peki her obje için bu yapıdan tutuyor olmamızın bir problemi var aynı yapılar sürekli olarak tekrarlanıyor olması hafızada fazladan yer tüketimi anlamına geliyor. 100 tane Writable, Enumerable, Configurable aynı olan access değeride x olan ayrı ayrı obje olması yerine ..
Shape şeklinde x,y objesi oluşturup bundan extends eden bir JS Object ile bu işi yaptığımızda artık istenirse 100lerce x,y türünde nesnemiz olsun Property çoklaMamış oluyoruz.
Object Hangi Shape Üzerinden Oluşturulacağını nasıl Biliyor ?
Bunun için boş bir object nesnesine oluşturduğumuzda Shape türeyen bir yapı oluşturuyoruz. Buna x eklendiğinde Boş JS Objects compose/extends Shape türeyen x içeren ayrı bir xShape yapısı oluşturuluyor. Bir sonraki aşamada y eklenmek istediğinde xShape türeyen xyShape oluşacak. Diyelim ki bir son aşamada x,z içeren bir obje oluşturmak istediğimizdede xzShape oluşacak
Bu durum Objelerimizi aynı kök objesinden oluşturabildiğimiz durumlar için geçerlidir. Bu durumda kök obje ikisininde boş Shape olduğu için aynı kökten türer
a={} a.x=5
b={} b.y=6
a={} a.x=5
b={x:6} Denildiği durumda ise Object initialization aynı şekilde yapılmadığı için aynı yapıda olsa bile aynı Shape hiyerarşisinden türeyemiyor
JS Engine Obj Prop Erişirken Kısayol Ezberi Oluşturur.
JS Engine Objenin property değerine erişirken arkaplanda getX metodu için bir bytecode oluşturulur. Bu bytecode
obj erişip bunun x argümanını bulmak üzerinedir.
bunun için Shape yapısı içerisinde x prop yerinin belirlenmesi
daha sonra bu prop üzerinden x verisinin değerinin çekilerek döndürülmesi gerekir.Bunun yerine bytecode yanın açılan ekstra alanlarda objeye ilk erişimden sonra
Shape ne olduğu ve X prop hangi offset tutulduğu bilgisi yazılır
Bu sayede Prop kısa erişim yolu oluşturulmuş olur
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (Tarayıcılar Nasıl Çalışır)erişmek için bu linke tıklayabilirsiniz.
Bu yazının devamı veya yazı grubundaki diğer yazılara (JS Deep Learning)erişmek için bu linke tıklayabilirsiniz.
