您好,登錄后才能下訂單哦!
小編給大家分享一下瀏覽器渲染網(wǎng)頁的每個步驟機制是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
我的想法:如果我要構(gòu)建快速可靠的網(wǎng)站,需要真正了解瀏覽器渲染網(wǎng)頁的每個步驟機制,這樣就可以在開發(fā)過程中對每個步驟進行優(yōu)化。 這篇文章是我在較高水平上對端到端過程的學習總結(jié)。
好了,廢話不多說,我們開始吧。這個過程可以分為以下幾個主要階段:
1、開始解析HTML
2、獲取外部資源
3、解析 CSS 并構(gòu)建CSSOM
4、執(zhí)行 JavaScript
5、合并 DOM 和 CSSOM 以構(gòu)造渲染樹
6、計算布局和繪制
當瀏覽器通過網(wǎng)絡接收頁面的HTML
數(shù)據(jù)時,它會立即設置解析器將HTML
轉(zhuǎn)換為文檔對象模型(DOM)。
文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結(jié)構(gòu)化的表述,并定義了一種方式可以使從程序中對該結(jié)構(gòu)進行訪問,從而改變文檔的結(jié)構(gòu),樣式和內(nèi)容。DOM 將文檔解析為一個由節(jié)點和對象(包含屬性和方法的對象)組成的結(jié)構(gòu)集合。簡言之,它會將web頁面和腳本或程序語言連接起來。
解析過程的第一步是將HTML分解并表示為開始標記、結(jié)束標記及其內(nèi)容標記,然后它可以構(gòu)造DOM。
當解析器遇到外部資源(如CSS或JavaScript文件)時,解析器將提取這些文件。 解析器在加載CSS文件時繼續(xù)運行,此時會阻止頁面渲染,直到資源加載解析完(稍后會詳細介紹)。
JavaScript 文件略有不同-默認情況下,解析器會在加載 JS 文件然后進行解析同時會阻止對HTML的解析。 可以將兩個屬性添加到腳本標簽中以減輕這種情況:defer
和async
。 兩者都允許解析器在后臺加載JavaScript 文件的同時繼續(xù)運行,但是它們的執(zhí)行方式不同。 關于這一點后面還會再講一點,但總的來說:
defer
表示文件的執(zhí)行將被延遲,直到文檔的解析完成為止。 如果多個文件具有defer
屬性,則將按照頁面放置的順序依次執(zhí)行。
<script type="text/javascript" src="script.js" defer>
async
意味著文件將在加載后立即執(zhí)行,這可能是在解析過程中或在解析過程之后執(zhí)行的,因此不能保證異步腳本的執(zhí)行順序。
<script type="text/javascript" src="script.js" async>
<link>
元素的 rel
屬性的屬性值preload
能夠讓你在你的HTML頁面中 <head>
元素內(nèi)部書寫一些聲明式的資源獲取請求,可以指明哪些資源是在頁面加載完成后即刻需要的。
對于這種即刻需要的資源,你可能希望在頁面加載的生命周期的早期階段就開始獲取,在瀏覽器的主渲染機制介入前就進行預加載。這一機制使得資源可以更早的得到加載并可用,且更不易阻塞頁面的初步渲染,進而提升性能。
<link href="style.css" rel="preload" as="style" />
你可能很早就知道DOM,但對CSSOM(CSS對象模型)可能聽得少,反正我也沒聽過幾次。
CSS 對象模型 (CSSOM) 是樹形形式的所有CSS選擇器和每個選擇器的相關屬性的映射,具有樹的根節(jié)點,同級,后代,子級和其他關系。CSSOM 與 文檔對象模型(DOM) 非常相似。兩者都是關鍵渲染路徑的一部分,也是正確渲染一個網(wǎng)站必須采取的一系列步驟。CSSOM 與 DOM一起構(gòu)建渲染樹,瀏覽器依次使用渲染樹來布局和繪制網(wǎng)頁。
與HTML文件和DOM相似,加載CSS文件時,必須將它們解析并轉(zhuǎn)換為樹-這次是CSSOM。 它描述了頁面上的所有CSS選擇器,它們的層次結(jié)構(gòu)和屬性。
CSSOM
與 DOM
的不同之處在于它不能以增量方式構(gòu)建,因為CSS
規(guī)則由于特定性而可以在各個不同的點相互覆蓋。 這就是CSS 阻塞渲染的原因,因為在解析所有CSS并構(gòu)建CSSOM之前,瀏覽器無法知道每個元素在屏幕上的位置。
不同的瀏覽器有不同的 JS 引擎來執(zhí)行此任務。從計算機資源的角度來看,解析 JS 可能是一個昂貴的過程,比其他類型的資源更昂貴,因此優(yōu)化它對于獲得良好的性能是如此重要。
加載的JS和DOM被完全解析并準備就緒后就會 emit document.DOMContentLoaded
事件。 對于需要訪問DOM的任何腳本,例如以某種方式進行操作或偵聽用戶交互事件,優(yōu)良作法是在執(zhí)行腳本之前先等待此事件。
document.addEventListener('DOMContentLoaded', (event) => { // 這里面可以安全地訪問DOM了 });
在所有其他內(nèi)容(例如異步JavaScript,圖像等)完成加載后,將觸發(fā)window.load
事件。
window.addEventListener('load', (event) => { // 頁面現(xiàn)已完全加載 });
渲染樹是DOM和CSSOM的組合,表示將要渲染到頁面上的所有內(nèi)容。 這并不一定意味著渲染樹中的所有節(jié)點都將在視覺上呈現(xiàn),例如,將包含opacity: 0
或visibility: hidden
的樣式的節(jié)點,并仍然可以被屏幕閱讀器等讀取,而display: none
不包括任何內(nèi)容。 此外,諸如<head>
之類的不包含任何視覺信息的標簽將始終被忽略。
與 JS 引擎一樣,不同的瀏覽器具有不同的渲染引擎。
現(xiàn)在我們有了完整的渲染樹,瀏覽器知道了要渲染什么,但是不知道在哪里渲染。 因此,必須計算頁面的布局(即每個節(jié)點的位置和大小)。 渲染引擎從頂部開始一直向下遍歷渲染樹,計算應顯示每個節(jié)點的坐標。
完成之后,最后一步是獲取布局信息并將像素繪制到屏幕上。
以上是“瀏覽器渲染網(wǎng)頁的每個步驟機制是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關注億速云行業(yè)資訊頻道!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。