Modern web tarayıcısına yakından bakış (3. bölüm)

Mariko Kosaka

Oluşturucu işleminin işleyiş şekli

Bu, tarayıcıların işleyişine odaklanan 4 bölümlük blog serisinin 3. bölümüdür. Daha önce çoklu işlem mimarisini ve gezinme akışını ele almıştık. Bu yayında, oluşturma işleminin içinde neler olduğuna bakacağız.

Oluşturucu işlemi, web performansının birçok yönünü etkiler. Oluşturucu sürecinde çok fazla işlem gerçekleştiği için bu yayında yalnızca genel bir bakış sunulmaktadır. Daha ayrıntılı bilgi edinmek isterseniz Web Temel Bilgileri'nin Performans bölümünde daha birçok kaynak bulabilirsiniz.

Oluşturucu işlemleri web içeriklerini işler

Oluşturucu işlemi, sekme içinde gerçekleşen her şeyden sorumludur. Bir oluşturma işleminde ana iş parçacığı, kullanıcıya gönderdiğiniz kodun çoğunu işler. Web çalışanı veya hizmet çalışanı kullanıyorsanız JavaScript'inizin bazı bölümleri bazen çalışan iş parçacıkları tarafından işlenir. Bir sayfayı verimli ve sorunsuz bir şekilde oluşturmak için bir oluşturucu ve raster iş parçacığı da oluşturucu işlemlerinde çalıştırılır.

Oluşturucu işleminin temel görevi, HTML, CSS ve JavaScript'i kullanıcının etkileşimde bulunabileceği bir web sayfasına dönüştürmektir.

Oluşturucu işlemi
Şekil 1: Ana iş parçacığı, çalışan iş parçacıkları, bir birleştirici iş parçacığı ve raster iş parçacığı içeren oluşturma işlemi

Ayrıştırma

DOM oluşturma

Oluşturucu işlem bir gezinme için bir taahhüt mesajı aldığında ve HTML verileri almaya başladığında ana mesaj dizisi, metin dizesini (HTML) ayrıştırmaya ve DocumentObject Model'e (DOM) dönüştürmeye başlar.

DOM, bir tarayıcının sayfanın dahili temsilidir. Ayrıca, web geliştiricinin JavaScript aracılığıyla etkileşim kurabileceği veri yapısı ve API'dir.

Bir HTML belgesinin DOM'a ayrıştırılması HTML Standardı tarafından tanımlanır. Bir tarayıcıya HTML beslemenin hiçbir zaman hata oluşturmadığını fark etmiş olabilirsiniz. Örneğin, eksik kapanış

etiketi geçerli bir HTML'dir. Hi! I'm Chrome! gibi hatalı işaretlemeler (b etiketi i etiketinden önce kapatılır) Hi! I'm Chrome! yazmışsınız gibi değerlendirilir. Bunun nedeni, HTML spesifikasyonunun bu hataları sorunsuz bir şekilde ele alacak şekilde tasarlanmış olmasıdır. Bu işlemlerin nasıl yapıldığını merak ediyorsanız HTML spesifikasyonunun "Ayrıştırıcıda hata işleme ve garip durumlara giriş" bölümünü okuyabilirsiniz.

Alt öğe yükleme

Web siteleri genellikle resim, CSS ve JavaScript gibi harici kaynaklar kullanır. Bu dosyaların ağdan veya önbellekten yüklenmesi gerekir. Ana iş parçacığı, DOM oluşturmak için ayrıştırma işlemi sırasında bulduğu öğeleri tek tek isteyebilir ancak hızlandırmak amacıyla "önyükleme tarayıcı" eşzamanlı olarak çalıştırılır. HTML dokümanında veya gibi öğeler varsa ön yükleme tarayıcı, HTML ayrıştırıcı tarafından oluşturulan jetonlara göz atar ve tarayıcı işlemindeki ağ iş parçacığına istek gönderir.

DOM
Şekil 2: HTML'yi ayrıştıran ve DOM ağacı oluşturan ana işleyici

JavaScript, ayrıştırmayı engelleyebilir

HTML ayrıştırıcı bir