Bir web sayfası nasıl yüklenir?

Kullanıcı, tarayıcının adres çubuğuna URL girer veya bir bağlantıya tıklar.
URL Ayrıştırma: Tarayıcı, URL'yi protokol, alan adı, bağlantı noktası ve yol belirlemek için çözümler.
IP adresi arama: Tarayıcı, DNS önbelleğini kontrol eder, ardından işletim sistemi önbelleğini, ardından yönlendirici önbelleğini. Adres yerel olarak bulunamazsa, alan adının IP adresini almak için DNS sunucusuna sorgu gönderilir.
TCP bağlantısı kurulması (Handshake): Tarayıcı, alınan IP adresi kullanılarak (üç aşamalı el sıkışma: SYN -> SYN-ACK -> ACK) sunucu ile TCP bağlantısı kurar.
HTTP isteği gönderme: Tarayıcı, gereken kaynağı (yol), başlıklar (User-Agent, Accept-Encoding, Cookie vb.) ve istek gövdesi (varsa) ile HTTP isteği gönderir.
```
GET /index.html HTTP/1.1  
Host: example.com  
User-Agent: Mozilla/5.0 ...  
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8  
```
Sunucu tarafından isteğin işlenmesi: Sunucu, isteği alır, işler (örneğin, sunucu tarafı betikleri çalıştırır) ve bir HTTP yanıtı oluşturur.
HTTP yanıtı gönderme: Sunucu, HTTP yanıtını tarayıcıya geri gönderir. Yanıt, durum kodunu (örneğin, 200 OK), başlıkları (Content-Type, Content-Length, Cache-Control vb.) ve yanıt gövdesini (istenen kaynağın içeriği, örneğin HTML dosyası) içerir.
```
HTTP/1.1 200 OK  
Content-Type: text/html; charset=UTF-8  
Content-Length: 12345  
Cache-Control: max-age=3600  

<!DOCTYPE html>  
<html>  
<head>...</head>  
<body>...</body>  
</html>  
```
HTML ayrıştırma ve DOM oluşturma: Tarayıcı, HTML kodunu almaya ve analiz etmeye başlar ve bellek içinde bir belge nesne modeli (DOM - Document Object Model) oluşturur. DOM, HTML öğeleri ağacını temsil eder.
Kaynakların yüklenmesi ve işlenmesi: HTML ayrıştırması sırasında, tarayıcı diğer kaynaklara (CSS, JavaScript, resimler, yazı tipleri vb.) bağlantılar bulur. Her kaynak için 3-7 adımları tekrar eder (IP arama, TCP bağlantısı (gerekirse), HTTP istek/yanıtı). Bu kaynakların yüklenmesi paralel olarak gerçekleşebilir (eşzamanlı bağlantı sayısı ile sınırlıdır).
CSSOM oluşturma: Tarayıcı, CSS dosyalarını ve HTML içindeki <style> bloklarını analiz eder ve bir CSS nesne modeli (CSSOM - CSS Object Model) oluşturur. CSSOM, sayfadaki öğelere uygulanabilir stilleri temsil eder.
Render Ağacı oluşturma: Tarayıcı, DOM ve CSSOM'u birleştirerek render ağacını oluşturur. Render ağacı, yalnızca görünür öğeleri ve stillerini içerir. display: none olan öğeler dahil edilmez.
Layout (Reflow): Tarayıcı, render ağacına, görünüm penceresi boyutlarına ve stillere dayanarak her öğenin tam konumunu ve boyutunu hesaplar.
Boyama (Repaint): Tarayıcı, her öğeyi hesaplanan konumlarda ve uygulanan stillerle ekranda çizer. Bu, katmanlar üzerinde gerçekleşir.
Bileşim: Tarayıcı, çizilen katmanları son görüntüde birleştirir ve kullanıcı ekranında gösterir.
JavaScript yürütme: Betikler yüklenip analiz edilirken, JavaScript kodu çalıştırılır. JavaScript yürütmesi, DOM ve CSSOM'u etkileyebilir ve tekrar Layout ve Boyama adımlarını (Reflow/Repaint) tetikleyebilir.

İçeriğin gösterilmesi için ana adımlar:

DOMContentLoaded: Tarayıcı, HTML belgesini tamamen yüklediğinde ve analiz ettiğinde ve DOM ağacını oluşturduğunda tetiklenir, ancak stiller, resimler ve alt çerçevelerin yüklenmesini bekler.
Load: Sayfa, resimler, betikler, stiller ve diğer kaynaklar dahil olmak üzere tamamen yüklendiğinde tetiklenir.