前端学习(一) 浏览器渲染原理
前言
瀏覽器的內(nèi)核是指支持瀏覽器運行的最核心的程序,分為兩個部分,一是渲染引擎,另一個是JS引擎,渲染引擎在不同的瀏覽器中也不是都相同的.目前市面上常見的瀏覽器內(nèi)核可以分為4種: Trident( IE ), Gecko( FireFox ), Blink( Chrome,Opera ), Webkit( Safari ),以 Webkit 為例,對現(xiàn)代瀏覽器的渲染過程進行一個深度的剖析
頁面加載過程
簡介要點如下:
- 瀏覽器根據(jù) DNS 服務(wù)器得到域名的 IP 地址
- 向這個 IP 的機器發(fā)送 HTTP 請求
- 服務(wù)器收到,處理并返回 HTTP 請求
- 瀏覽器得到返回內(nèi)容
瀏覽器渲染過程
大體上分為如下三部分
瀏覽器會解析三個東西:
1.1 一是HTML/SVG/XHTML, HTML 字符串描述了一個頁面的結(jié)構(gòu),瀏覽器會把 HTML 結(jié)構(gòu)字符串解析轉(zhuǎn)換 DOM 樹形結(jié)構(gòu)
1.2 二是CSS,解析 CSS 會產(chǎn)生 CSS 規(guī)則樹,它和 DOM 結(jié)構(gòu)比較像
1.3 三是 JavaScript 腳本,等到 JavaScript 腳本文件加載后, 通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree
解析完成后,瀏覽器引擎會通過 DOM Tree 和 CSS Rule Tree 來構(gòu)造 Rendering Tree
2.1 Rendering Tree 渲染樹并不等同于 DOM樹,渲染樹只會包括需要顯示的節(jié)點和這些節(jié)點的樣式信息
2.2 CSS 的Rule Tree 主要是為了完成匹配并把 CSS Rule 附加上 Rrendering Tree 上的每個 Element(也就是每個 Frame)
2.3 然后,計算每個 Frame 的位置,又叫做 layout 和 reflow 過程
最后通過調(diào)用操作系統(tǒng) Native GUI 的 API 繪制
構(gòu)建DOM
瀏覽器會遵循一套步驟將文件轉(zhuǎn)換為 DOM 樹:
- 瀏覽器從磁盤或網(wǎng)絡(luò)讀取 HTML 的原始字節(jié),并根據(jù)文件的指定編碼將它們轉(zhuǎn)換成字符串
- 將字符串轉(zhuǎn)換為Token,例如<html> <body>等. Token 中會標志出當(dāng)前 Token 是"開始標簽"或是"結(jié)束標簽"或"文本"等信息,以維護節(jié)點與節(jié)點間的關(guān)系
- 生成節(jié)點對象并構(gòu)建DOM.構(gòu)建 DOM 的過程中,不是等所有 Token 都轉(zhuǎn)換完成后再去生成節(jié)點對象,而是一邊生成 Token 一邊消耗 Token 來生成節(jié)點對象,即每個Token被生成后,會立刻消耗這個 Token 創(chuàng)建出節(jié)點對象.帶有結(jié)束標簽標志的 Token 不會創(chuàng)建節(jié)點對象
假設(shè)有段 HTML 文本:
<html> <head><title>Web page parsing</title> </head> <body><div><h1>Web page parsing</h1><p>This is an example Web page.</p></div> </body> </html>上面這段HTML會解析成這樣:
構(gòu)建CSSOM
DOM 會捕獲頁面的內(nèi)容,但瀏覽器還需要知道頁面如何展示, 所以需要構(gòu)建CSSOM
構(gòu)建CSSOM的過程和構(gòu)建DOM的過程非常相似,當(dāng)瀏覽器接收到一段CSS,瀏覽器首先要做的是識別出Token,然后構(gòu)建節(jié)點并生成CSSOM
假設(shè)有這一段CSS:
在經(jīng)過一系列步驟后生成的CSSOM:
從圖中還可以看出.body節(jié)點的子節(jié)點繼承了 body 的樣式規(guī)則(font-size: 16px).這就是層疊規(guī)則以及CSS為什么叫CSS(層疊樣式表)
注意:CSS 匹配 HTML 元素是一個相當(dāng)復(fù)雜和有性能問題的事情,所以,DOM樹要小,CSS要盡量用id和class,不要過度層疊下去
構(gòu)建渲染樹
生成 DOM 樹和 CSSOM 樹之后,就要將這兩棵樹組合為渲染樹.
渲染樹只會包括需要顯示的節(jié)點和這些節(jié)點的樣式信息,如果某個節(jié)點是 display: none ,n那么就不會再渲染樹中顯示
渲染過程中,如果遇到 <script> 就停止渲染,執(zhí)行 JS 代碼.因為瀏覽器有 GUI 渲染線程與 JS 引擎線程,為了防止渲染出現(xiàn)不可預(yù)期的結(jié)果,這兩個線程是互斥的關(guān)系. JavaScript 的加載,解析與執(zhí)行會阻塞 DOM 的構(gòu)建,也就是說,在構(gòu)建 DOM 的時候,HTML 解析器若遇到了 JavaScript,就會暫停構(gòu)建 DOM,等到 JavaScript 加載完畢,瀏覽器再從中斷的地方恢復(fù) DOM 構(gòu)建
JS 文件不只是阻塞 DOM 的構(gòu)建,它會導(dǎo)致 CSSOM 也阻塞 DOM 的構(gòu)建
因為JavaScript不只是可以改 DOM,它還可以改 CSSOM.因為不完整的 CSSOM 是無法使用的,所以如果瀏覽器此時尚未完成 CSSOM 的下載和構(gòu)建,卻想要加載運行腳本,那么瀏覽器將延遲腳本執(zhí)行和 DOM 構(gòu)建,直至其完成 CSSOM 的下載和構(gòu)建.也就是說, 在這種情況下,瀏覽器會先下載并構(gòu)建 CSSOM,再執(zhí)行JavaScript,最后再繼續(xù)構(gòu)建 DOM
因此,想首屏渲染的越快,就越不應(yīng)該在首屏就加載 JS 文件,這也是都建議將 script 標簽放在 body 標簽底部的原因.當(dāng)然在當(dāng)下,并不是說 script 標簽必須放在底部,因為你可以給 script 標簽添加 defer 或者 async 屬性
總結(jié)
以上是生活随笔為你收集整理的前端学习(一) 浏览器渲染原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle修改时间字段
- 下一篇： 【前端性能优化】浏览器渲染原理与性能优化