Navigasyonda ne olur?
Bu, Chrome'un iç işleyişini ele alan 4 bölümlük blog dizisinin 2. bölümüdür. Önceki gönderide, reklam sunmanın ne kadar farklı Tarayıcının farklı kısımlarına ilişkin işlemler ve iş parçacıkları. Bu gönderide, Çevik yaklaşımın her işlem ve ileti dizisi bir web sitesi görüntülemek için iletişim kurar.
Web'e göz atmanın basit bir kullanım örneğine bakalım: Tarayıcıya bir URL yazar, ardından tarayıcıya bir URL girersiniz internetten veri getirir ve bir sayfa görüntüler. Bu gönderide, bir yapay zeka sisteminin Kullanıcı bir site ister ve tarayıcı bir sayfayı oluşturmaya hazırlanır (gezinme olarak da bilinir).
Her şey bir tarayıcı işlemiyle başlar
Bu kursta 1. bölüm: CPU, GPU, Bellek ve çok işlemli mimari, bir sekmenin dışındaki her şey tarayıcı işlemi tarafından işlenir. Tarayıcı işleminde, kullanıcı arayüzü iş parçacığı gibi, düğmeleri ve giriş alanlarını çizen tarayıcı, internetten veri almak için ağ yığınıyla ilgilenen ağ iş parçacığı, dosyalara erişimi kontrol eden depolama ileti dizisi ve daha fazlası. Adrese bir URL yazdığınızda çubuğunda, girişiniz tarayıcı işleminin kullanıcı arayüzü iş parçacığı tarafından işlenir.
Basit gezinme
1. Adım: Giriş işleme
Kullanıcı adres çubuğuna yazmaya başladığında, UI ileti dizisinin ilk olarak "Bu arama sorgusu veya URL ile mi ilgili? Chrome'da adres çubuğu aynı zamanda bir arama giriş alanıdır. Dolayısıyla kullanıcı arayüzü ayrıştırıp sizi bir arama motoruna mı yoksa istediğiniz siteye mi yönlendireceğine karar vermesi gerekir.
2. Adım: Navigasyonu başlatın
Kullanıcı Enter tuşuna bastığında, kullanıcı arayüzü ileti dizisi, site içeriğini almak için bir ağ çağrısı başlatır. Yükleme döner simgesi iş parçacığı bir sekmenin köşesinde görüntülenir ve ağ ileti dizisi, DNS araması ve istek için TLS bağlantısı kurma.
Bu noktada, ağ iş parçacığı HTTP 301 gibi bir sunucu yönlendirme başlığı alabilir. Böyle bir durumda, ağ iş parçacığı, sunucunun yönlendirme isteğinde bulunduğu UI iş parçacığı ile 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ığı ilk birkaç bayta bakar aktarmanızı sağlar. Yanıtın Content-Type başlığında, bunun ne tür bir veri olduğu belirtilmelidir. eksik veya yanlış olabileceği için MIME Türü algılama burada bitti. Bu "aldatıcı bir işletme" kaynak kodunda yorum yapılan şekilde görünür. Farklı tarayıcıların içerik türü/yük çiftlerini nasıl ele aldığını görmek için yorumu okuyabilirsiniz.
Yanıt bir HTML dosyasıysa sonraki adım, verileri oluşturucuya iletmektir ancak ZIP dosyası veya başka bir dosyaysa bu bir indirme isteği olduğu anlamına gelir ve verileri indirme yöneticisine iletmeleri gerekir.
SafeBrowsing kontrolü de burada yapılır. Alan adı ve yanıt verileri, bilinen bir kötü amaçlı siteyle eşleşiyorsa ağ iş parçacığı uyarı sayfası görüntüler. Ayrıca, Cross Origin Read Bkilitleme (CORB) emin olmak için testlerin ve web sitelerinin verileri oluşturucu işlemine girmez.
4. Adım: Bir oluşturucu işlemi bulun
Tüm kontroller tamamlandıktan ve Ağ iş parçacığı tarayıcının ağ iş parçacığı, kullanıcı arayüzü iş parçacığına verilerin hazır olduğunu bildirir. Kullanıcı arayüzü iş parçacığı, oluşturucu işlemi ile oluşturulur.
Ağ isteğinin yanıt vermesi birkaç yüz milisaniye sürebileceğinden, bu işlem bu süreci hızlandırmak için optimizasyon uygulanır. Kullanıcı arayüzü ileti dizisi, varsa hangi siteye gittiğini zaten bilir. Kullanıcı arayüzü iş parçacığı proaktif olarak ağ isteğine paralel olarak bir oluşturucu işlemini bulmaya veya başlatmaya çalışır. Bu şekilde ekip ve her şey beklendiği gibi giderse ağ iş parçacığı oluşturulduğunda, oluşturucu işlemi veri alındı. Gezinme, siteler arası yönlendirme yapıyorsa bu bekleme işlemi kullanılamayabilir. Bu durumda farklı bir süreç gerekebilir.
5. Adım: Gezinmeyi kaydedin
Artık veriler ve oluşturucu işlemi hazır olduğuna göre, tarayıcı işleminden oluşturma işlemini etkinleştirmeniz gerekir. Ayrıca veri akışını aktararak oluşturucu HTML verileri almaya devam edebilir. Tarayıcı işlemi, oluşturma sürecinde olup olmadığını, gezinmenin tamamlanmış ve doküman yükleme aşamasında olduğunun 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 bilgilerine erişebilirsiniz. Sekmenin oturum geçmişi güncellenerek geri/ileriye düğmeleri, az önce ziyaret edilen sitede gezinir. Sekme/oturum geri yüklemeyi kolaylaştırmak için bir sekmeyi veya pencereyi kapattığınızda oturum geçmişi diskte depolanır.
Ek Adım: İlk yükleme tamamlandı
Gezinme tamamlandıktan sonra oluşturucu işlemi, kaynakları yüklemeye devam eder ve
sayfasını ziyaret edin. Bu aşamada neler olacağını bir sonraki yazıda ele alacağız. Oluşturucu,
işlem "biter" oluşturduktan sonra, tarayıcı işlemine bir IPC gönderir (bu,
onload etkinlikleri sayfadaki tüm çerçevelerde tetiklendi ve yürütme tamamlandı). Bu noktada
kullanıcı arayüzü iş parçacığı sekmedeki yükleme döner simgesini durdurur.
"biter" diyorum çünkü istemci tarafı JavaScript hâlâ yüklenebilir. ek kaynak kullanabilir ve bu noktadan sonra yeni görünümler oluşturabilirsiniz.
Farklı bir siteye gitme
Basit gezinmeyle tamamlandı. Peki kullanıcı adres çubuğuna farklı bir URL girerse ne olur?
tekrar eder miydiniz? Tarayıcı işlemi, farklı bir siteye gitmek için aynı adımları uygular.
Ancak bunu yapmadan önce mevcut oluşturulan siteyle ilgilenip ilgilenmediğini kontrol etmesi gerekir.
beforeunload etkinliği.
beforeunload, "Bu siteden ayrılmak istiyor musunuz?" çıkmaya veya sekmeyi kapatmaya çalıştığınızda uyarı alırsınız.
JavaScript kodunuz da dahil olmak üzere, bir sekmedeki her şey oluşturucu işlemi tarafından işlenir.
Yeni gezinme isteği geldiğinde tarayıcı işleminin mevcut oluşturucu işlemini kontrol etmesi gerekir.
Gezinme, oluşturucu işleminden başlatıldıysa (kullanıcının bir bağlantıyı tıklaması veya
istemci taraflı JavaScript, window.location = "https://newsite.com") oluşturucu işlemini çalıştırdı
ilk olarak beforeunload işleyicilerini kontrol eder. Ardından, tarayıcı işlemi ile aynı süreçten geçer.
gezinmeyi başlatır. Tek fark, gezinme isteğinin
oluşturma işlemini tarayıcı işlemine uygular.
Yeni gezinme, mevcut oluşturulan siteden farklı bir siteye yapıldığında ayrı bir oluşturma işlemi
işlem, yeni gezinmeyi işlemek için çağrılırken mevcut oluşturma işlemi
unload gibi etkinlikleri işler. Daha fazla bilgi için sayfa yaşam döngüsü durumlarına genel bakış bölümüne bakın.
nasıl yararlanabileceğinize dair
Page Lifecycle API.
Hizmet çalışanı durumunda
Bu gezinme sürecinde yapılan son değişikliklerden biri, service Worker'a ekleyin. Hizmet çalışanı, ağ proxy'si; uygulama kodunuzda; web geliştiricilerinin ne yapacakları konusunda daha fazla kontrol sahibi olmalarını yerel olarak ve ağdan yeni verilerin ne zaman alınacağına ilişkin ayarlar içerir. Hizmet çalışanı sayfayı yükleyecek şekilde ayarlanmışsa ağdan veri isteğinde bulunmanıza gerek yoktur.
Unutulmaması gereken önemli nokta, Service Worker'ın oluşturucuda çalışan JavaScript kodudur. bahsedeceğim. Ancak gezinme isteği geldiğinde, tarayıcı işlemi sitenin bir hizmet çalışanı var mı?
Bir hizmet çalışanı kaydedildiğinde hizmet çalışanının kapsamı referans olarak tutulur (Kapsam hakkında daha fazla bilgiyi Hizmet Çalışanı Yaşam Döngüsü makalesi). Gezinme gerçekleştiğinde ağ iş parçacığı, alanı kayıtlı hizmet çalışanıyla karşılaştırarak kontrol eder kapsam üzerinde çalışır. Hizmet çalışanı bu URL için kayıtlıysa UI iş parçacığı komutunu çalıştırın. Hizmet çalışanı, önbellekten veri yükleyerek ağdan veri isteme ihtiyacını 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üşte gecikmelere neden olabilir hizmet çalışanı ağdan veri istemeye karar verirse Gezinmeyi Önceden Yükleme özelliği, bu süreci hızlandıran bir mekanizmadır kaynak yükleme işlemini kullanarak süreci başlatın. Bu istekler bir başlıkla işaretlenerek sunucuların başka bir konu için farklı içerik göndermeye karar vermesine olanak tanır. bu talepler; örneğin, tam bir belge yerine yalnızca güncel veriler.
Özet
Bu yayında, gezinme sırasında neler olduğuna ve bu tür web uygulaması kodunuzun ve istemci taraflı JavaScript'in tarayıcıyla etkileşime girdiğini gösterir. Tarayıcı adımlarını öğrenin ağdan veri almak, gezinme gibi API'lerin neden bu şekilde geliştirilmiştir. Bir sonraki gönderide, tarayıcının web sitemizi nasıl değerlendirdiğini Sayfaları oluşturmak için HTML/CSS/JavaScript.
Gönderiyi beğendiniz mi? Gelecekteki gönderi için sorularınız veya önerileriniz varsa lütfen benimle iletişime geçin. aşağıdaki yorum bölümünde veya Twitter'da @kosamari bölümünde sizden bilgi alabilirsiniz.
Sonraki: Oluşturucu Sürecinin iç işleyişi 'nı inceleyin.