- Web mühendisleri ve genel kullanıcıların tarayıcının iç çalışma prensibini sezgisel olarak anlayabilmesi için hazırlanmış etkileşimli bir öğrenme rehberi
- Adres çubuğuna girişten HTTP isteği oluşturma, DNS çözümleme, TCP bağlantısı, HTML ayrıştırma, DOM oluşturma, render pipeline aşamalarına kadar süreci adım adım görselleştiriyor
- Her aşama, doğrudan giriş yapıp etkileşimde bulunabileceğiniz örneklerden oluşuyor; böylece ağ iletişimi ve render süreci deneysel olarak deneyimlenebiliyor
- DOM'un rolünü ve Layout–Paint–Composite aşamaları arasındaki farkı net biçimde gösterirken, performansı etkileyen unsurların görsel olarak incelenmesini sağlıyor
- Tarayıcı yapısını öğrenmek veya web performansı optimizasyonunu anlamak isteyen geliştiriciler için temel kavramları sistemli biçimde öğrenebilecekleri bir kaynak
Genel Bakış
- Bu rehber, her gün web kullanan ancak tarayıcının nasıl çalıştığını net biçimde anlamayan kişiler için hazırlandı
- Mevcut kaynakların aşırı teknik ya da fazla yüzeysel olma sınırlamasını tamamlıyor
- Küçük etkileşimli örnekler aracılığıyla teknik ayrıntıların sezgisel biçimde öğrenilebilmesi için tasarlandı
- HTTP sürümleri, SSL/TLS, DNS'in ayrıntılı işleyişi gibi konular atlanmış; bunun yerine temel kavramlara odaklanan yalın bir yapı kurulmuş
- Proje açık kaynak olarak yayımlanıyor ve GitHub üzerinden iyileştirme önerileri sunulabiliyor
Tarayıcı ve URL
- Kullanıcının adres çubuğuna girdiği her metin, içeride URL biçimine dönüştürülür
- Girdiden sonra Enter'a basıldığında, dönüşüm sürecini doğrudan görebileceğiniz uygulamalı bir arayüz sunuluyor
URL'yi HTTP İsteğine Dönüştürme
Sunucu Adresinin Çözülmesi (DNS)
- Tarayıcı,
example.com gibi alan adlarını doğrudan kullanamaz
- Sunucuyla iletişim kurabilmek için DNS sistemi üzerinden bunların IP adresine çevrilmesi gerekir
- Giriş alanına alan adını yazdığınızda DNS çözümleme sonucunu (IP adresini) görebilirsiniz
TCP Bağlantısının Kurulması
- DNS üzerinden IP alındıktan sonra tarayıcı, sunucuyla güvenilir bir bağlantı kurmak için TCP protokolünü kullanır
- Bağlantı, 3 aşamalı el sıkışma süreciyle kurulur
- SYN: İstemci bağlantı isteği gönderir
- SYN-ACK: Sunucu yanıt verir ve onaylar
- ACK: İstemci son onayı gönderir
- TCP, veri sırasını garanti etme ve yeniden iletim özellikleri sayesinde kararlı iletişim sağlar
- Ağı kesip paketleri değiştirerek iletim kararlılığını deneysel olarak test etmek mümkündür
HTTP İsteği ve Yanıtı
- TCP bağlantısından sonra tarayıcı HTTP isteğini gönderir, sunucu ise HTTP yanıtı döndürür
- İstek ve yanıtın hareketi görsel olarak gösterilir, böylece paket akışı izlenebilir
- Yanıt ulaştığında tarayıcı başlıklarla gövdeyi ayırır ve HTML'i render etmeye başlar
HTML Ayrıştırma ve DOM Ağacının Oluşturulması
- Tarayıcı, HTML baytlarını parser'a ileterek DOM ağacını oluşturur
- Örnek HTML girdiğinizde
<h1>, <p> gibi etiketlerin DOM düğümlerine dönüştüğü süreci görsel olarak inceleyebilirsiniz
- Ayrıştırma streaming biçiminde ilerler; tüm belge gelmeden önce de düğümler oluşturulabilir
<script> etiketiyle karşılaşıldığında ayrıştırma geçici olarak durur ve script çalıştırılır- Tamamlanan DOM, CSS ile birleşerek render tree'yi oluşturur
DOM'un Önemi
- DOM(Document Object Model), tarayıcı belleği içindeki belge modelidir ve
HTML parser'ı, CSS seçici motoru ve JavaScript runtime'ının paylaştığı temel yapıdır
- DOM üzerindeki değişiklikler anında layout, stil ve kullanıcı etkileşimine yansır
- JavaScript kodunu değiştirdiğinizde DOM değişimlerinin gerçek zamanlı yansıtıldığı bir önizleme özelliği sunulur
Layout, Paint, Composite
- DOM ve CSS hazır olduğunda tarayıcı render pipeline'ı çalıştırır
- Layout(Reflow) : Öğelerin boyutu ve konumu hesaplanır
- Paint: Pikseller doldurulur
- Composite: Katmanlar GPU üzerinde birleştirilir
- Renk değişikliği yalnızca Paint'i yeniden çalıştırırken, boyut değişikliği hem Layout hem Paint'in yeniden çalışmasına neden olur
- Her aşamanın yeniden çalışıp çalışmadığı tıklanarak görülebilir
- Yoğun Layout işlemleri içeren sayfaların daha yavaş render edildiği görsel olarak gösterilir
Özet
- Adres girişinden render aşamasına kadar tüm süreci doğrudan deneyimleyerek öğrenebileceğiniz bir rehber
- Tüm aşamalar tamamlandığında tarayıcının çalışma prensibine dair net bir zihinsel model oluşturulabilir
- Proje açık kaynak ve GitHub'da issue ya da Pull Request üzerinden iyileştirme önerileri sunulabilir
1 yorum
Hacker News yorumları
Her tarayıcı başından beri DOM'a sahip değildi
İlk dönemde WorldWideWeb(Nexus, 1990), Erwise(1992), ViolaWWW(1992), Lynx(1992), NCSA Mosaic(1993), Netscape 1.0(1994), IE 1.0(1995) gibi örnekler vardı
Lynx bugün bile bilinçli olarak DOM'suz bir tarayıcı olarak kalıyor
AOL 1.0–2.0, programlanabilir nesneleri olmayan statik bir motor (AOLPress) kullanıyordu
DOM ile etkileşim mümkün hale ancak Netscape 2.0(1995), IE 3.0(1996), AOL 3.0(1996) ve Opera 3.0(1997) ile geldi
Sonrasında Netscape 4.0(document.layers) ve IE 4.0(document.all) kendi farklı modellerini kullandı
İlk standart DOM, W3C DOM Level 1(1998) idi; IE 5.0(1999) kısmi destek sundu, Konqueror 2.0(2000) ve Netscape 6.0(2000) ise tam desteğe başladı
Safari 1.0(2003), Firefox 1.0(2004) ve Chrome 1.0(2008) en başından standart DOM desteğiyle geldi ve bugün WHATWG DOM Living Standard'ı izliyor
HTML metnini doğrudan yorumlayıp render ettiği için RAM kullanımı çok düşük
Harika bir proje
HN okurları High-Performance Browser Networking ve Every Layout'a da göz atabilir
İkisi de web performansı ve CSS yapısı konularını derinlemesine ele alan çok iyi kaynaklar
4. bölüm sayesinde TLS frame yapısını anladım ve önceki iş yerimde gecikme sorunlarını debug edebildim
TLS frame boyutunu ayarlamadaki trade-off kısmı da ilginçti
Gerçekte bunu kullanmak pek sık gerekmeyecek olsa da, ağ seviyesinde ince ayar yapmanın mümkün olduğunu öğrenmiş oldum
Kurulum gerektirmeden browser.engineering'i deneyimliyormuşsunuz gibi hissettiren ilginç bir yaklaşım
Tarayıcı ve sunucu örneklerini gösterirken görsel ikonlar (ör. masaüstü/sunucu) eklenirse anlaşılması daha kolay olabilir
Şimdilik geri bildirim topluyorum; ikon önerisi de güzel bir fikir, değerlendireceğim
Çok beğendim, yer imlerine ekledim
Ama HTML/DOM temelli anlatımda görseller, stil dosyaları ve script'ler gibi kaynak yükleme sürecinin eksik olması biraz üzücü
Bu kısım, sayfa stilinin neden bozulduğunu ya da görsellerin neden eksik kaldığını anlamak için önemli
Bu blokları karmaşıklığı artırmadan nasıl ekleyebileceğimi düşünüyorum
Tarayıcı penceresi dar olduğunda (1170px altı) içindekiler bölümü gövdenin üstüne biniyor
URL parsing mantığını biraz daha geliştirmek iyi olabilir
Çoğu kullanıcı sorun yaşamaz ama tarayıcılar
https://veyahttp://dışındaki protocol scheme girişlerini de özel şekilde işlerBu tür durumları yakalamak faydalı olabilir
Bakınız: List of URI schemes
Harika bir proje
Bir sonraki adım olarak reflow sürecinin ayrıntılarını eklemeyi düşünüp düşünmediğinizi merak ediyorum
Sayfanın yarısından fazlasının ağ isteklerine ayrılması biraz hayal kırıklığı yaratıyor
Tarayıcıların asıl karmaşık kısmı parsing ve rendering pipeline tarafında
Hangi bölümde derine inmem gerektiğinden emin olamadığım için önce yayınlayıp geri bildirim topluyorum
Belki alakasız bir soru ama DNS sorgusunu tamamen kaldırıp yalnızca insan tarafından okunabilir alan adları ile çalışmak nasıl olurdu diye merak ediyorum
Tüm interneti tek dev bir switch gibi yapmak fikri
Tailscale kurucusunun buna benzer bir fikir üzerine yazdığını hatırlıyorum
Güzel iş