Tarayıcının içi: ayrıştırma, çizim ve güvenlik modeli
Tarayıcının bir sayfayı nasıl ayrıştırıp çizdiğini, olay döngüsünü ve aynı köken ilkesi gibi güvenlik sınırlarını deneylerle incelersin.
Seviye 301 · 17 ders · 15 pratik lab
Dersler
Yükleme ve ayrıştırma
- Gezinmenin adımları: istekten ilk boyamaya
- HTML ayrıştırıcı ve DOM ağacının kurulması
- Çizimi engelleyen kaynaklar: CSS ve betikler
- async, defer ve modül betikleri
- Kaynak ipuçları: preload, prefetch, preconnect
- Kısa görev: bir sayfanın yükleme sırasını çiz
Çizim hattı
- CSSOM ve çizim ağacı
- Yerleşim, boyama ve birleştirme
- Yeniden yerleşime yol açan işlemler
- Tarayıcıda olay döngüsü ve kare bütçesi
- Performans panelinde bir kareyi incelemek
- Kısa görev: takılan kaydırmanın nedenini bul
Güvenlik sınırları
- Köken nedir: şema, ana makine ve port
- Aynı köken ilkesi neyi engeller, neyi engellemez
- Süreç ayrımı, korumalı alan ve iframe sandbox
- Depolama bölümleme ve üçüncü taraf çerezleri
- Bitirme görevi: bir sayfanın yükleme ve güvenlik raporu
Pratik lablar
- Sayfanın yükleme sırasını çiz: Ağ şelalesinden Pusula Dergi sayfasında hangi kaynağın ne zaman istendiğini sırayla yaz.
- Çizimi engelleyen betiği bul: Sayfa iki saniye boş kalıyor; çizimi bekleten betik ve stil dosyalarını bul, async veya defer ile düzelt.
- Kaynak ipuçlarıyla yüklemeyi hızlandır: Yazı tipi ve kahraman görseli için preload ve preconnect ekle, önce ve sonra ölçümleriyle kazancı kanıtla.
- Bozuk HTML'den çıkan DOM'u tahmin et: Kapanmamış p ve li etiketleri olan parçanın DOM ağacını önce kâğıda çiz, sonra inceleyiciyle karşılaştır.
- document.write gecikmesini gider: Eski reklam betiği ayrıştırıcıyı durduruyor; zararı performans panelinde göster ve betiği güvenli biçimde yeniden yükle.
- Modül betiklerinin çalışma sırasını kanıtla: Klasik, async, defer ve module betiklerin karışık olduğu sayfada çalışma sırasını tahmin et ve konsol kayıtlarıyla doğrula.
- Yeniden düzen tetikleyen özelliği bul: Animasyonlu menüde left yerine transform kullanınca performans panelindeki farkı göster.
- Takılan kaydırmanın nedenini bul: Kaydırma olayında offsetHeight okuyan kod sarsıntı yaratıyor; çerçeveyi inceleyip zorunlu düzeni ortadan kaldır.
- Çerçeve bütçesini aşan işi böl: Uzun bir hesaplama tıklamayı geciktiriyor; görevi parçalara ayırıp her çerçevenin 16 ms altında kaldığını göster.
- İki adresin aynı köken olup olmadığını söyle: On adres çifti için şema, ana bilgisayar ve port karşılaştırarak hangilerinin aynı köken olduğunu belirle.
- Aynı köken politikasının engellediğini göster: Başka kökenden iframe içeriğini okumaya ve görsel yüklemeye çalış; hangisinin engellendiğini konsolla açıkla.
- iframe kum havuzunu sıkılaştır: Yerleştirilen anket aracı üst sayfayı yönlendirebiliyor; sandbox izinlerini en aza indirip işlevin bozulmadığını doğrula.
- Üçüncü taraf çerezlerini say: Haber sayfasındaki çerezleri birinci ve üçüncü taraf olarak ayır ve hangi alanların bıraktığını yaz.
- Gömülü içerikte bölümlenmiş depolamayı gözle: Aynı sohbet aracını iki farklı siteye göm, localStorage değerlerinin ayrı tutulduğunu göster.
- Sayfanın yükleme ve güvenlik raporunu yaz: Gelincik Sigorta'nın kampanya sayfası için yükleme sırası, engelleyen kaynaklar ve köken ilişkilerini tek rapora dök.
Kurs hakkında
Tarayıcının bir sayfayı nasıl ayrıştırıp çizdiğini, olay döngüsünü ve aynı köken ilkesi gibi güvenlik sınırlarını deneylerle incelersin.
Ne öğreneceksin
- Yükleme ve ayrıştırma
- Çizim hattı
- Güvenlik sınırları
Ön koşullar
Aynı yolun 101 ve 201 düzeyindeki konularına hâkim olmalısın.
Lab ortamı
Dersler, tarayıcında açılan sana özel bir Kali Linux masaüstünde geçer; araçlar pencereli arayüzleriyle hazırdır. Kurulum gerekmez, bilgisayar ekranı önerilir.
Sık sorulan sorular
- Bu kurs benim düzeyime uygun mu?
- Kurs 301 düzeyindedir; daha düşük düzeydeki kursların konularını bildiğin varsayılır.
- Kurulum gerekir mi?
- Hayır. Her ders tarayıcında açılan sana özel bir lab ortamında geçer.
- Dersler nasıl işleniyor?
- Her ders 8 ile 10 adımdan ve bir kısa sınavdan oluşur. İlk adımlarda yazman gereken komut gösterilir, sonraki adımlarda yardım azalır; iki denemede takılırsan çözüm açılır.
- Ücretsiz deneyebilir miyim?
- Evet. Her kursun ilk üç dersi ücretsizdir.