Web Nasıl Çalışır

Client ve Server

Web, iki tarafın konuşmasıdır. Client (istemci) sizin cihazınız ve üzerindeki tarayıcıdır. Server (sunucu) sayfaları ve uygulamaları barındıran bilgisayardır. Bir sayfayı açtığınızda sayfanın kodunun bir kopyası server'dan tarayıcınıza iner, tarayıcı da onu ekrana çizer.¹

Bir web sitesi tek bir dosya değildir. Kod dosyaları (HTML, CSS, JavaScript) ve asset'ler (görsel, video, font, PDF) ayrı ayrı indirilir ve tarayıcıda birleştirilir.¹

Bir Adresi Açtığınızda Neler Olur

https://example.com yazıp Enter'a bastığınızda kabaca şu olur:¹²

1. Tarayıcı yazdığınızın bir arama mı yoksa adres mi olduğuna karar verir.

2. DNS ile alan adının arkasındaki server'ın IP adresini bulur.

3. Server'la bir bağlantı açar; adres https ise bağlantı TLS ile şifrelenir.

4. Bir HTTP isteği gönderir.

5. Server bir HTTP yanıtı döner; veri küçük parçalar (packet) halinde gelir ve tarayıcı bunları doğru sırayla birleştirir.

6. Tarayıcı HTML'i okur, gereken CSS, JavaScript ve görselleri de ister ve sayfayı çizer.

Aşağıdaki bölümler bu adımları tek tek açar.

URL'nin Parçaları

Örnek: https://www.example.com:443/urunler/kitap?renk=mavi&sayfa=2#yorumlar³

DNS

DNS (Domain Name System) internetin adres defteridir: example.com gibi okunabilir bir adı, server'ın 192.0.2.172 gibi IP adresine çevirir.¹ Büyük siteler birden fazla server'da çalıştığı için aynı ad, bulunduğunuz yere göre farklı bir IP'ye çıkabilir.¹

Tarayıcı cevabı önce kendi önbelleğinde, sonra işletim sisteminde arar. Orada yoksa soru bir recursive resolver'a (çoğunlukla internet sağlayıcınızın ya da 1.1.1.1, 8.8.8.8 gibi bir servisin) gider. Resolver sırasıyla root server'ına, .com gibi uzantının server'ına ve son olarak alan adının authoritative server'ına sorar; asıl kayıt oradadır.⁴

Her kaydın bir TTL'i (time to live) vardır ve önbellekler cevabı bu süre boyunca saklar. DNS kaydını değiştirdiğinizde herkesin hemen yeni adresi görmemesi bundandır. "Böyle bir alan adı yok" cevabı da önbelleğe alınır.⁵

HTTP İstek ve Yanıt

HTTP, client ile server'ın konuştuğu dildir. İsteği her zaman client başlatır.⁶ Her mesajın bir başlangıç satırı, header'ları, boş bir satırı ve isteğe bağlı bir body'si vardır.⁷

GET /urunler HTTP/1.1
Host: example.com
Accept-Language: tr

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 29769

<!doctype html>…

İstek satırında bir method (ne yapılacağı), bir hedef (path) ve protokol sürümü bulunur. En sık kullanılanlar veri almak için GET, veri göndermek için POST'tur; body genellikle yalnızca POST, PUT ve PATCH isteklerinde olur.⁷

Yanıttaki status code sonucun ne olduğunu söyler. İlk rakam sınıfını belirler:⁸

HTTP stateless'tır: iki istek arasında kendiliğinden bir bağ yoktur. Giriş yapmış kalmanız ya da sepetinizin durması cookie'ler sayesindedir.⁶ Tarayıcı ile server arasında önbellek, yük dengeleyici ya da güvenlik katmanı gibi proxy'ler de olabilir.⁶

Mesajların anlamı sürümler arasında aynı kalır; değişen, verinin taşınma biçimidir. 2024'te mobilde ana sayfaların %70'i HTTP/2, %9'u HTTP/3, %21'i HTTP/1.1 ile sunuluyordu.⁹

HTTPS

HTTPS, HTTP'nin TLS ile şifrelenmiş halidir; araya giren kimse içeriği okuyamaz ya da değiştiremez.¹⁰ Artık varsayılandır: 2024'te mobilde isteklerin %98'i şifreli bağlantı üzerinden geliyordu.¹¹

Kamera, mikrofon ve service worker gibi birçok tarayıcı özelliği yalnızca secure context'te, yani HTTPS'te çalışır. http://localhost bu kurala dahildir, bu yüzden geliştirirken sertifikaya ihtiyacınız olmaz.¹²

Tarayıcı Sayfayı Nasıl Çizer

HTML gelince tarayıcı onu okuyup bir ağaç yapısına, DOM'a (Document Object Model) çevirir; her element, attribute ve metin bir node olur.¹³ Okurken karşılaştığı <link>, <script> ve <img> için yeni istekler atar.¹³

Ardından CSS kurallarını ilgili node'lara bağlar, her kutunun boyutunu ve yerini hesaplar (layout) ve pikselleri ekrana boyar (paint). JavaScript de bu sırada çalışır ve DOM'u değiştirerek görüntüyü etkileyebilir. Ekran okuyucular için DOM'dan bir erişilebilirlik ağacı da üretilir.¹³

DevTools

Tarayıcının geliştirici araçları, bu derste anlatılan her şeyi gözünüzle görmenizi sağlar. Windows'ta Ctrl + Shift + I ya da F12, macOS'ta ⌘ + ⌥ + I ile açılır; bir elemente sağ tıklayıp Inspect (İncele) demek de olur. Safari'de önce ayarlardan Develop menüsünü açmak gerekir.¹⁵

Network panelinde bir isteğe tıklayınca Headers sekmesinde istek ve yanıt header'larını, Response sekmesinde server'ın döndüğü içeriği görürsünüz. Status sütunu yanıt kodunu, Initiator isteği neyin başlattığını gösterir.¹⁶

Detaylı Öğrenmek İçin

• Sayfa yüklemenin tamamı: MDN'in DNS'ten paint'e kadar her adımı performans açısından anlatan rehberi.¹⁸

• Tarayıcının içi: Mariko Kosaka'nın Chrome'un mimarisini çizimlerle anlatan dört bölümlük yazı dizisi.¹⁴²

• Ağ katmanı: Ilya Grigorik'in TCP, TLS ve HTTP/2'yi anlatan ücretsiz kitabı High Performance Browser Networking.¹⁹

• DNS'i elle dene: Julia Evans'ın Mess With DNS sitesi; kendi alt alan adınızı alıp kayıt ekleyebilir, gelen sorguları canlı izleyebilirsiniz.²⁰

• Konuşma: Julia Evans'ın RubyConf Mini 2022'de DNS'i ve zor konuları öğrenmeyi anlattığı açılış konuşması.⁵