TARAYICILAR (BROWSER) NASIL ÇALIŞIR ?
Chrome Navigasyon’u Nasıl Gerçekleştiriyor ?
Chrome veya diğer tarayıcıların adres çubuğuna yazdığımız URL sayfasına nasıl yönlendirildiğini anlatacağım.
Bir önceki yazımda Chrome Process ve Thread içerisinde nasıl çalıştırıldığını anlatmıştım. Bu yazımda Adres çubuğuna bir kelime veya bir URL yazdığımızda Tarayıcının nasıl davrandığını anlatmaya çalışacağım. Burada sunucu iletişimi ve DNS üzerinden sayfa yüklenmesi kısmı değil. Ama bu konularda bilgi sahibi olmak isteyenlerde DNS Nedir ? yazımı okuyabilirler.
Not: Ayrıca Chrome Nasıl Çalışır Yazı Serisine bu linkten erişebilirsiniz.
Web sayfasının gösterildiği Tab dışındaki bütün ekranların yönetiminin Browser Process ‘inin kontrolünde olduğunu anlatmıştık. Tarayıcı process içerisinde;
- UI Thread düğmeleri, girdi alanları ve dialog ekranların çizimini gerçekleştirir.
- Network Thread: İnternet üzerinden veri transferi ve alınması işlerini
- Storage Thread: Dosyaya ve belleğe erişim işlemlerini gerçekleştirir.
A. Basitçe Yönlendirme
1. Adres Çubuğuna Arama Kelimesi veya URL yazılır
Siz Adres çubuğuna bir şeyler yazmaya başladığınızda bu Browser Process → UI Thread tarafından ele alınır.
2. UI Thread Bunun Bir URL olup Olmadığına Karar Verir.
Adres çubuğuna bir metin yazıp Enter bastığımızda UI Thread öncelikle yazılan metnin bir URL adresimi yoksa Google Araması olup olmadığını belirler
3. Navigasyon Başlar
Kullanıcı Enter düğmesine bastığında Adres Çubuğunda URL var ise ilgili siteden bu içeriğin çekilmesi için network call başlatır. Sayfa yüklenirken Tab kenarında Loading Spinner animasyonu gösterilir. Network Thread ilgili protocol üzerinden (genelde HTTP/s) üzerinden DNS Lookup ilgili IP bulup adres ile HTTPS(TLS) iletişim kurmaya çalışır.
Network Thread sunucudan Redirect header HTTP 301 bilgisi aldığında bu bilgiyi UI Thread iletir.
4. Response Veri Okunmaya Başlar
Ne zamanki response body olarak veri gelmeye başladı. Network thread gelen. verinin ilk byte analiz ederek Response Type tahmin etmeye çalışır bu işleme MIME Type sniffing denir.
Eğer gelen nesne bir HTML ise bu içerik Renderer Process yönlendirilirken, bir zip ise bu durumda Download Manager yönlendirilir. Veya bir flash sayfası ise Plugin Process yönlendirilir.
5. Renderer Process’e Veriyi Aktarma
Network’den tarayıcıya akan veri üzerindeki tüm kontroller yapıldıktan ve güvenilir bir veri olduğu anlaşıldıktan sonra Network Thread → UI Thread veri kullanım için hazır bilgilendirmesini yapar. UI Thread bu veriyi ekrana basacak olan Renderer Process bulur. (Not: Performans için Burda UI Thread Enter düğmesine basıldığında işler yolunda giderse diye standby modunda bir Renderer Process yanda bekletiyor olur.)
6. Navigasyon İşleminin Onaylanması
HTML verisi ve Renderer Process hazır durumda. Bu durumda Browser Process → Renderer Process IPC gönderilir. Burada aynı zamanda elde edilen HTML verisine ait veri stream leride Renderer Process geçirilir. Ne zamanki Browser Process , Renderer Process tarafından bu IPC için OK onayı verirse, navigasyon işlemi tamamlanmış ve Document Loading Aşaması başlar. Bu aşamada ;
- Adres Çubuğu, SSL durumun göre güncellenir
- Tarihçe (Session History) güncellenir. İleri/Geri düğmeleri aktif hale gelir
- Performans nedenleri ile oturum geçmişini diske kaydeder
- vb..
7. Initial Load (HTML, CSS) Yüklenmesinin Tamamlanması
Navigasyon işlemi tamamlandı. Renderer Process HTML içerisindeki statik CSS ve JS dosyalarını yüklemeye başladı. Bu işlemler bittiğinde Renderer Process → Browser Process yükleme işlemi tamamlandı onLoad şeklinde bir event fırlatır. Browser Process → UI Thread bu bilgiyi verdiğinde ilgili tab’daki Loading Spinner ortadan kaldırılır.
Not: Aslında bu aşamada load işlemi tam anlamıyla bitmiş olmayabilir çünkü JS işletilirken tekrar tekrar Lazy Loading yapılıyor olabilir. Burada kastedilen HTML içerisinde yazılan statik resource kaynaklarıdır.
B. Başka Bir Sayfaya Yönlendirme
Basit bir yönlendirmeyi tamamladık ve sayfa ekranımızda görüntülendi. Peki Adres Çubuğuna başka bir URL yazdığımızda ne olacak ? Browser Process aynı işlemleri gerçekleştirecek , ama öncesindeki sayfa için beforeunload event fırlatarak bu sayfa ile ilgilli çalışacak başka JS işlemleri varsa bunların yapılması veya geliştiricinin isterse, “Bu sayfadan çıkmak istiyor musunuz ?” uyarı göstermesi vs.. işlemleri yapmasını sağlatır.
Burada yapılacak ekstra yüklü işlemler sayfa geçişlerini yavaşlatacağı için örneğin Performans verilerinin gönderilmesi için Beacon API geliştirilmiştir. Bu API kısaca sizin sunucudan cevap gelmeden verilerinizi sunucuya göndermenizi sağlar.
Browser Process → IPC ile → Renderer Process başka bir URL sayfasına yönleneceğiz beforeunload yapacak bir işlemin var mı şeklinde haberdar eder.
Burda yönlendirme Adres Çubuğu değilde sayfadaki herhangi bir linke tıklandığında başka bir sayfaya gidiyorsa window.location = bu sefer Renderer Process öncelikle beforeunload handler çağırıp daha sonrasında browser process üzerinden navigasyon işlemini çağırır. Burda tek var UI Thread → tetiklemesi yerine Renderer Process → bu işlemi tetiklemiş olur.
Farklı sayfaya yönlendirilediğinde yeni sayfa farklı renderer process tarafından ele alınır bunun bir nedenide önceki renderer on safada unload işlemini tam anlamıyla bitirememiş olabilir.
Ekstra Not
Burada sunucuya erişememe durumu offline veya performans amaçlı Service Worker Process kullanılır. Bu konuda daha detaylı bilgi için PWA (Service Worker) yazımı okumanızı öneririm.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
