Tarayıcı Sözlüğü

JavaScript Nedir ve Tarayıcıda Nasıl Çalışır

Bir web sayfasında butona tıkladığınızda menü açılıyorsa, form gönderilmeden önce "e-posta adresi geçersiz" uyarısı çıkıyorsa ya da sayfa yenilenmeden yeni içerik yükleniyorsa, arka planda çalışan şey büyük ihtimalle JavaScript'tir. HTML sayfanın iskeletini, CSS görünümünü tanımlar; JavaScript ise davranışı üstlenir. Bu üçlünün nasıl bölüşüldüğünü kavramak, tarayıcının genel çalışma mantığını anlamanın da en pratik yoludur.

Üç Teknolojinin İş Bölümü

Teknoloji Görevi Türü Örnek
HTML İçerik ve yapı İşaretleme dili Başlık, paragraf, buton tanımlamak
CSS Görünüm ve yerleşim Stil dili Butonu mavi ve yuvarlak yapmak
JavaScript Davranış ve mantık Programlama dili Butona tıklanınca sayaç artırmak

Kritik fark şudur: HTML ve CSS tanımlayıcıdır, yani "ne olduğunu" söyler. JavaScript ise emir verir; koşul kurar, döngü kurar, karar alır. Bu yüzden bir JavaScript web tarayıcısı ilişkisinden bahsederken aslında tarayıcının içine gömülmüş küçük bir yorumlayıcıdan söz ediyoruz.

Adım Adım: Tarayıcı JavaScript'i Nasıl İşler

  1. İstek ve indirme. Adresi yazdığınızda tarayıcı sunucudan HTML dosyasını alır. Bu dosya içinde script etiketleri varsa, tarayıcı ilgili .js dosyalarını da ayrıca indirir. Yani JavaScript ayrı bir dosya olarak ağ üzerinden gelir; boyutu doğrudan sayfa hızını etkiler.
  2. HTML ayrıştırma ve DOM oluşturma. Tarayıcı HTML'i yukarıdan aşağıya okur ve DOM (Document Object Model) adı verilen ağaç yapısını kurar. DOM, sayfanın bellekteki nesne hâlidir. JavaScript sayfayı doğrudan metin olarak değil, bu ağaç üzerinden değiştirir.
  3. Motorun devreye girmesi. Her tarayıcının kendi JavaScript motoru vardır. Chrome ve Edge'de V8, Firefox'ta SpiderMonkey, Safari'de JavaScriptCore çalışır. Motor, kaynak kodu önce ayrıştırır, ardından makine koduna derleyerek çalıştırır. Aynı kodun farklı tarayıcılarda ufak hız farkları göstermesinin nedeni budur.
  4. Yürütme ve DOM'a müdahale. Kod çalıştıkça DOM'daki öğeler seçilir, içerikleri değiştirilir, yeni öğeler eklenir veya silinir. DOM değişince tarayıcı yeniden düzen (reflow) ve yeniden çizim (repaint) yapar; ekranda gördüğünüz değişiklik bu aşamada oluşur.
  5. Olay dinleme. İlk çalıştırma bittikten sonra JavaScript durmaz, bekler. Tıklama, klavye girişi, kaydırma, fare hareketi gibi olaylara bağlanan fonksiyonlar tetiklenmeyi bekler. Sayfa "canlı" hissi buradan gelir.
  6. Asenkron işler ve olay döngüsü. Sunucudan veri çekmek gibi zaman alan işler beklemeye alınır; JavaScript tek iş parçacığında (single thread) çalıştığı için bu işler sıraya konur ve olay döngüsü (event loop) sırası geldiğinde onları çalıştırır. Böylece veri beklenirken sayfa donmaz.
  7. Kum havuzu sınırı. Tarayıcı, JavaScript'i izole bir alanda çalıştırır. Kod bilgisayarınızdaki dosyalara serbestçe erişemez, başka bir sitenin verisini keyfî olarak okuyamaz. Bu güvenlik modeli, HTTPS ve sertifika doğrulamasıyla birlikte tarayıcı güvenliğinin temel katmanlarından biridir.

Yükleme Yönteminin Etkisi

Yöntem HTML ayrıştırmasını durdurur mu? Ne zaman uygun?
Normal script (head içinde) Evet, indirip çalıştırana kadar bekletir Sayfa çizilmeden mutlaka çalışması gereken küçük kodlar
defer Hayır, ayrıştırma bitince sırayla çalışır DOM'a müdahale eden çoğu senaryo
async Hayır, indiği anda çalışır, sıra garantisi yok Bağımsız üçüncü taraf kodları
Sayfa sonunda script Pratikte hayır Basit sitelerde klasik ve güvenli tercih

Sık Yapılan Hatalar