Navigasyonda ne olur?
Bu, Chrome'un iç işleyişine odaklanan 4 bölümlük bir blog dizisinin 2. bölümüdür. Önceki yayında, farklı işlemlerin ve ileti dizilerinin tarayıcının farklı bölümlerini nasıl işlediğini ele aldık. Bu yayında, bir web sitesi göstermek için her bir sürecin ve ileti dizisinin nasıl iletişim kurduğunu daha ayrıntılı olarak inceleyeceğiz.
Web'de gezinmenin basit bir kullanım örneğine bakalım: Tarayıcıya bir URL yazarsınız, ardından tarayıcı internetten veri alıp bir sayfa görüntüler. Bu yayında kullanıcının site isteğinde bulunduğu, tarayıcının ise sayfayı oluşturmaya hazırladığı bölüme odaklanacağız. Bu bölüm, gezinme olarak da bilinir.
Bir tarayıcı işlemiyle başlar
1. bölümde (CPU, GPU, Bellek ve çoklu işlem mimarisi) ele aldığımız gibi, sekme dışındaki her şey tarayıcı işlemi tarafından yürütülür. Tarayıcı işleminde, düğmeleri ve tarayıcının giriş alanlarını çizen kullanıcı arayüzü iş parçacığı, internetten veri almak için ağ yığınıyla ilgilenen ağ iş parçacığı, dosyalara erişimi kontrol eden depolama iş parçacığı ve daha fazlası bulunur. Adres çubuğuna bir URL yazdığınızda, girişiniz tarayıcı işleminin kullanıcı arayüzü iş parçacığı tarafından işlenir.
Basit bir gezinme
1. adım: Girişi işleme
Kullanıcı adres çubuğuna yazmaya başladığında, kullanıcı arayüzü iş parçacığı ilk olarak "Bu bir arama sorgusu mu yoksa URL mi?" sorusu olur. Chrome'da adres çubuğu aynı zamanda bir arama giriş alanıdır. Bu yüzden, kullanıcı arayüzü iş parçacığının sizi bir arama motoruna mı yoksa istediğiniz siteye mi yönlendireceğine karar vermesi gerekir.
2. Adım: Navigasyonu başlatın
Bir kullanıcı Enter tuşuna bastığında, kullanıcı arayüzü iş parçacığı site içeriğini almak için bir ağ çağrısı başlatır. Sekmenin köşesinde yükleme döner simgesi görüntülenir ve ağ iş parçacığı DNS araması ve istek için TLS Bağlantısı oluşturma gibi uygun protokollerden geçer.
Bu noktada ağ iş parçacığı HTTP 301 gibi bir sunucu yönlendirme başlığı alabilir. Bu durumda ağ iş parçacığı, sunucunun yönlendirme isteğinde bulunduğu kullanıcı arayüzü iş parçacığıyla iletişim kurar. Ardından, başka bir URL isteği başlatılır.
3. Adım: Yanıtı okuyun
Yanıt gövdesi (yük) gelmeye başladığında, ağ iş parçacığı gerekirse akışın ilk birkaç baytına bakar. Yanıtın Content-Type üstbilgisinde ne tür veri olduğu belirtilmelidir. Ancak eksik veya yanlış olabileceği için MIME Türü yoklama burada yapılır. Bu, kaynak kodda yorumlandığı gibi "sıralı bir işletmedir". Farklı tarayıcıların içerik türü/yük çiftlerini nasıl işlediğini görmek için yorumu okuyabilirsiniz.
Yanıt bir HTML dosyasıysa bir sonraki adım verileri oluşturucu işlemine aktarmaktır. Ancak bu bir zip dosyası veya başka bir dosyaysa bu bir indirme isteğidir ve verileri indirme yöneticisine iletmeleri gerekir.
SafeBrowsing kontrolü de burada gerçekleşir. Alan ve yanıt verileri bilinen bir kötü amaçlı siteyle eşleşiyorsa ağ iş parçacığı bir uyarı sayfası gösterir. Buna ek olarak, siteler arası hassas verilerin oluşturucu işlemine ulaşmadığından emin olmak için Cs CdaClocking (C) kontrolü yapılır.
4. Adım: Oluşturucu işlemi bulun
Tüm kontroller tamamlandıktan ve Ağ iş parçacığı tarayıcının istenen siteye gitmesi gerektiğinden emin olduktan sonra, Ağ iş parçacığı kullanıcı arayüzü iş parçacığına verilerin hazır olduğunu bildirir. UI iş parçacığı daha sonra web sayfasının oluşturulmasına devam etmek için bir oluşturucu süreci bulur.
Ağ isteğine yanıt verilmesi birkaç yüz milisaniye sürebileceğinden, bu süreci hızlandırmak için bir optimizasyon uygulanır. Kullanıcı arayüzü iş parçacığı 2. adımda ağ iş parçacığına bir URL isteği gönderirken hangi siteye gittiğini zaten bilir. Kullanıcı arayüzü iş parçacığı, ağ isteğine paralel olarak bir oluşturucu işlemini proaktif bir şekilde bulmaya veya başlatmaya çalışır. Bu şekilde, her şey beklendiği gibi giderse ağ iş parçacığı veri aldığında oluşturucu işlemi zaten bekleme konumunda olur. Gezinme siteler arası yönlendirme yapıyorsa bu bekleme işlemi kullanılamayabilir. Bu durumda farklı bir işlem gerekebilir.
5. Adım: Gezinmeyi kaydedin
Veriler ve oluşturucu süreci hazır olduğuna göre gezinmeyi gerçekleştirmek için tarayıcı işleminden oluşturucu işlemine bir IPC gönderilir. Ayrıca, oluşturucu işleminin HTML verilerini almaya devam edebilmesi için veri akışını aktarır. Tarayıcı işlemi, oluşturucuda kaydetme işleminin gerçekleştiğine dair onayı duyduğunda gezinme tamamlanır ve belge yükleme aşaması başlar.
Bu noktada adres çubuğu güncellenir ve güvenlik göstergesi ile site ayarları kullanıcı arayüzü, yeni sayfanın site bilgilerini yansıtır. Sekmenin oturum geçmişi, geri-ileri düğmelerinin az önce gidilen sitede gezinmesini sağlayacak şekilde güncellenir. Bir sekmeyi veya pencereyi kapattığınızda sekme/oturum geri yüklemeyi kolaylaştırmak için oturum geçmişi diskte depolanır.
Ekstra Adım: İlk yükleme tamamlandı
Gezinme tamamlandıktan sonra, oluşturucu işlemi kaynakları yüklemeye devam eder ve sayfayı oluşturur. Bu aşamada neler olduğuyla ilgili ayrıntıları bir sonraki gönderide ele alacağız. Oluşturucu işlemi, oluşturma işlemini "bittiğinde" tarayıcı işlemine geri bir IPC gönderir (bu, tüm onload etkinliklerinin sayfadaki tüm çerçevelerde tetiklenmesinden ve yürütülmesinden sonra gerçekleşir). Bu noktada, UI iş parçacığı sekmedeki yükleme döner simgesini durdurur.
"Bitti" diyorum çünkü istemci taraflı JavaScript yine de ek kaynaklar yükleyebilir ve bu noktadan sonra yeni görünümler oluşturabilir.
Farklı bir siteye gitme
Basit gezinme tamamlandı! Peki kullanıcı adres çubuğuna tekrar farklı bir URL eklerse ne olur? Tarayıcı işlemi, farklı siteye gitmek için aynı adımlardan geçer.
Ancak bunu yapmadan önce, geçerli olarak oluşturulmuş siteyle iletişime geçerek beforeunload etkinliğini önemsiyor olup olmadığını kontrol etmesi gerekiyor.
Sayfadan çıkmaya veya sekmeyi kapatmaya çalıştığınızda beforeunload "Bu siteden çıkılsın mı?" uyarısı oluşturabilir.
JavaScript kodunuz da dahil olmak üzere bir sekmenin içindeki her şey oluşturucu işlemi tarafından işlenir. Bu nedenle, yeni gezinme isteği geldiğinde tarayıcı işleminin mevcut oluşturucu sürecini kontrol etmesi gerekir.
Gezinme, oluşturucu işleminden başlatıldıysa (ör. kullanıcının bir bağlantıyı tıklaması veya istemci taraflı JavaScript'in window.location = "https://newsite.com" çalıştırması) oluşturucu işlemi, ilk olarak beforeunload işleyicilerini kontrol eder. Daha sonra, tarayıcı işlemiyle başlatılan gezinmeyle aynı süreçten geçer. Tek fark, gezinme isteğinin oluşturucu işleminden tarayıcı işlemine başlatılmasıdır.
Yeni gezinme mevcut siteden farklı bir siteye yapıldığında, yeni gezinmeyi işlemek için ayrı bir oluşturma süreci çağrılır ve mevcut oluşturma işlemi unload gibi etkinliklerin işlenmesi için tutulur. Daha fazla bilgi için sayfa yaşam döngüsü durumlarına genel bakış ve Page Lifecycle API ile etkinliklere nasıl dahil olabileceğinizi inceleyin.
Hizmet Çalışanı söz konusu olduğunda
Bu gezinme sürecinde kısa süre önce yapılan değişikliklerden bir tanesi de Service Worker özelliğinin kullanıma sunulmasıdır. Service Worker, uygulama kodunuza ağ proxy'si yazmanın bir yoludur. Bu sayede web geliştiricileri, nelerin yerel olarak önbelleğe alınacağı ve ağdan ne zaman yeni veri alınacağı konusunda daha fazla kontrole sahip olur. Service Worker sayfayı önbellekten yükleyecek şekilde ayarlanmışsa verileri ağdan istemeye gerek yoktur.
Unutulmaması gereken önemli nokta, Service Worker'ın bir oluşturucu işleminde çalışan JavaScript kodu olduğudur. Ancak gezinme isteği geldiğinde tarayıcı süreci sitede bir hizmet çalışanı olduğunu nasıl anlar?
Hizmet çalışanı kaydedildiğinde hizmet çalışanının kapsamı referans olarak tutulur (bu Hizmet Çalışanı Yaşam Döngüsü makalesinde kapsam hakkında daha fazla bilgi edinebilirsiniz). Gezinme olduğunda, ağ iş parçacığı alanı kayıtlı hizmet çalışanı kapsamlarına göre kontrol eder. Bu URL için bir hizmet çalışanı kayıtlıysa kullanıcı arayüzü iş parçacığı, hizmet çalışanı kodunu yürütmek için bir oluşturucu işlemi bulur. Service Worker önbellekten veri yükleyerek ağdan veri isteme ihtiyacını ortadan kaldırabilir veya ağdan yeni kaynaklar isteyebilir.
Gezinme Önceden Yükleme
Tarayıcı işlemi ile oluşturucu işlemi arasındaki bu gidiş dönüş yolculuğun, hizmet çalışanının en sonunda ağdan veri istemeye karar vermesi durumunda gecikmelere neden olabileceğini görebilirsiniz. Gezinme Önceden Yükleme, kaynakları hizmet çalışanı başlatmasına paralel olarak yükleyerek bu süreci hızlandırmayı amaçlayan bir mekanizmadır. Bu istekleri üstbilgiyle işaretleyerek, sunucuların bu istekler için farklı içerik göndermeye karar vermesine olanak tanır (örneğin, tam bir belge yerine yalnızca güncellenmiş veriler).
Özet
Bu yayında, gezinme sırasında neler olduğuna ve yanıt başlıkları ve istemci taraflı JavaScript'in tarayıcıyla nasıl etkileşime girdiğine değindik. Tarayıcının ağdan veri almak için uyguladığı adımları bilmek, gezinme önceden yükleme gibi API'lerin neden geliştirildiğini anlamayı kolaylaştırır. Bir sonraki yayında, tarayıcının sayfaları oluşturmak için HTML/CSS/JavaScript'imizi nasıl değerlendirdiğini ele alacağız.
Gönderiyi beğendiniz mi? Gelecekteki gönderimizle ilgili sorularınız veya önerileriniz varsa aşağıdaki yorum bölümünden ya da Twitter'daki @kosamari adresinden bize ulaşabilirsiniz.