通俗的說(shuō)下瀏覽器的渲染過(guò)程

Donne 發(fā)布于2019-08-30 15:52 / 2209人閱讀

摘要：最初的模型瀏覽器下載開(kāi)始解析遇見(jiàn)外鏈資源保存起來(lái)并且繼續(xù)解析解析結(jié)束開(kāi)始下載外鏈下載結(jié)束開(kāi)始處理處理處理處理完畢開(kāi)始渲染用戶看到界面這個(gè)模型的基礎(chǔ)是瀏覽器是單線程的但是實(shí)際上瀏覽器不是單線程是多個(gè)線程瀏覽器有如下幾個(gè)線程引擎線程界面渲染線程

最初的模型:

瀏覽器下載 html

開(kāi)始解析 html

遇見(jiàn)外鏈資源, 保存起來(lái), 并且繼續(xù)解析

html 解析結(jié)束

開(kāi)始下載外鏈

下載結(jié)束

開(kāi)始處理

css 處理

js 處理

處理完畢, 開(kāi)始渲染

用戶看到界面

這個(gè)模型的基礎(chǔ)是: 瀏覽器是單線程的.

但是實(shí)際上: 瀏覽器不是單線程, 是多個(gè)線程.
瀏覽器有如下幾個(gè)線程:
1 javascript引擎線程
2 界面渲染線程
3 瀏覽器事件觸發(fā)線程
4 http請(qǐng)求線程

也就是說(shuō): 下載和解析是可以同步的, 遇見(jiàn)外鏈就開(kāi)始下載.

更改之后的模型

瀏覽器下載 html

開(kāi)始解析 html

遇見(jiàn)外鏈資源, 開(kāi)始下載, 并且繼續(xù)解析

html 解析結(jié)束

下載結(jié)束

開(kāi)始處理

css 處理

js 處理

處理完畢, 開(kāi)始渲染

用戶看到界面

這個(gè)模型的基礎(chǔ)是:
資源下載和 html 解析是同步的, 所有的資源下載結(jié)束, 才開(kāi)始進(jìn)行下一步:渲染.
實(shí)際情景是:
資源大致可以分成
css
js
imgs
others

imgs以及 others 這種, 如果一個(gè)資源過(guò)大, 比如說(shuō)一個(gè)媒體文件100M, 非要等到用戶下載結(jié)束
才開(kāi)始下一步, 這顯然是不合理的.
而 css 和 js 是可以對(duì)頁(yè)面產(chǎn)生修改和效果的, 所以必須要等待它們的參與才能進(jìn)行下一步操作,
比如說(shuō) css,js 都沒(méi)有下載解析執(zhí)行結(jié)束, 就開(kāi)始下一步渲染, 最終渲染的結(jié)果是一個(gè)沒(méi)有樣式的
頁(yè)面.

看瀏覽器是不是這么想的?
實(shí)驗(yàn):
在demo 中加一個(gè) p 標(biāo)簽, 在底部加一個(gè) css 外鏈
如果 css 都沒(méi)有加載完畢, p 標(biāo)簽就顯示出來(lái)了, 說(shuō)明瀏覽器就沒(méi)有等 css 文件
也就是說(shuō): html 解析結(jié)束之后, 什么都不管, 就開(kāi)始下一步渲染了.

demo:

demo

hello world

結(jié)果:
css 沒(méi)有加載之前, 頁(yè)面空白, 說(shuō)明 html 解析結(jié)束之后, 會(huì)等到css加載出來(lái)再開(kāi)始渲染.

更一步的實(shí)驗(yàn):
資源變成 js, 頁(yè)面先渲染出來(lái), js 還在加載.
資源變成 img, 頁(yè)面會(huì)先渲染出來(lái), img 還在加載.

結(jié)論:
**html 解析結(jié)束之后, 會(huì)先等到 css 下載和解析結(jié)束之后(通過(guò) link 標(biāo)簽知道是 css 文件)
再開(kāi)始下一步, 并不會(huì)等所有的非 js 資源.**

所以模型變成:

瀏覽器下載 html

開(kāi)始解析 html

遇見(jiàn)外鏈資源, 開(kāi)始下載, 并且繼續(xù)解析

html 解析結(jié)束

等到css下載結(jié)束

開(kāi)始處理 css

處理完畢, 開(kāi)始渲染

用戶看到界面

現(xiàn)在考慮一種情況:
js 是有能力去改變 DOM, 那么如果都渲染結(jié)束了, js 這個(gè)時(shí)候開(kāi)始執(zhí)行了,然后把頁(yè)面重新干掉了.
這個(gè)時(shí)候怎么辦?

只能將修改應(yīng)用到已經(jīng)渲染好的頁(yè)面上.

考慮一種極端情況, 頁(yè)面里面有成千上萬(wàn)的節(jié)點(diǎn), 比如說(shuō)1萬(wàn)個(gè)節(jié)點(diǎn), css 文件都一兩百k
辛辛苦苦瀏覽器把頁(yè)面渲染出來(lái)了, 然后這個(gè)時(shí)候, js 下載結(jié)束開(kāi)始執(zhí)行, 啪的一下把頁(yè)面

document.write("中獎(jiǎng)啦");

這種情況肯定不能允許發(fā)生.

為了避免這種情況, 可以這樣
先全局檢測(cè)下是不是有 script 標(biāo)簽, 如果有的話, html 就等著 script 加載執(zhí)行之后,
再開(kāi)始渲染.

這種方式有一個(gè)不好: 也就是說(shuō), 即使我們現(xiàn)在有了 html 和 css, 其實(shí)都可以把頁(yè)面渲染出來(lái)了
但是還是要等 script 下載執(zhí)行之后才敢進(jìn)行渲染, 有點(diǎn)投鼠忌器的感覺(jué).
有時(shí)候等半天, 可能 script 返回的就一句話:

console.log("逗你玩");

而且全局檢測(cè) script 標(biāo)簽, 這句話說(shuō)的簡(jiǎn)單, 實(shí)際上是要建立在你已經(jīng)把 html 解析結(jié)束了之后才知道
到底有沒(méi)有 script 標(biāo)簽.

所以實(shí)際的情況是:

瀏覽器不知道頁(yè)面里面有沒(méi)有 script 標(biāo)簽
不知道script 里面會(huì)不會(huì)有 DOM 操作, 是 "中獎(jiǎng)啦" 還是 "逗你玩"

面對(duì)這種情況, 實(shí)際上只能賭, 或者說(shuō)博弈.

瀏覽器拿到 html 和 css 之后依舊開(kāi)始解析渲染
為了減小萬(wàn)一中獎(jiǎng)之后全盤(pán)都輸?shù)那闆r, 當(dāng)遇見(jiàn) script 之后

停止解析, 專心下載 js 文件
    這樣即使中獎(jiǎng), 我也就渲染了前面了一點(diǎn)內(nèi)容, 后面的還沒(méi)有渲染, 輸少點(diǎn)
    但是這樣后面如果還有資源要加載。。。

所以更新策略:

瀏覽器遇見(jiàn) script, 開(kāi)始下載, 把后面的html 解析掉, 所有的資源都開(kāi)始下載
然后回頭安心等這個(gè) script, 看看到底中獎(jiǎng)不中獎(jiǎng).

所以模型變成:

瀏覽器下載 html

開(kāi)始解析 html

遇見(jiàn)外鏈, 開(kāi)始下載

發(fā)現(xiàn) script 外鏈, 繼續(xù)html解析

將頁(yè)面分成兩部分, script 標(biāo)簽之前, 之后

處于 script 之前的頁(yè)面

css 下載結(jié)束

渲染

處于 script 之后的頁(yè)面

script 下載完畢, 執(zhí)行

css 下載完畢

渲染

瀏覽器不是等所有的資源都下載結(jié)束才開(kāi)始渲染
瀏覽器也不是等到所有的 js 都執(zhí)行結(jié)束之后才會(huì)渲染

具體的渲染過(guò)程

當(dāng) html 解析成 DOM tree, css 解析成 CSSOM, 二者合并成
Render Tree, 就可以開(kāi)始渲染了.

首先要先計(jì)算這棵樹(shù)上面的所有的節(jié)點(diǎn)的位置, 這一步叫做 layout
然后要給每個(gè)節(jié)點(diǎn)上色, 這一步叫做 paint
layout 和 paint 統(tǒng)稱為 render.

當(dāng)頁(yè)面的元素的位置修改之后, 就會(huì)出現(xiàn) relayout (重繪)
relayout 必定會(huì)造成 repaint.

附錄: defer, async 之間的區(qū)別.

defer
之前說(shuō)了, 瀏覽器遇見(jiàn) js 之后會(huì)始終等著它執(zhí)行, 后面的內(nèi)容都不渲染了
然后經(jīng)常就報(bào)錯(cuò)了, 我草獲取某個(gè)節(jié)點(diǎn)怎么沒(méi)有, 想要獲取后面的節(jié)點(diǎn)但是節(jié)點(diǎn)還沒(méi)有
渲染出來(lái), 所以呢, 所以就有了 defer
相當(dāng)于說(shuō), 我等你全部渲染之后再執(zhí)行吧, 要不然我老是出錯(cuò), 煩人.
執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。

async
還有一種情況, 就是說(shuō), 瀏覽器辛辛苦苦等到 js 下載執(zhí)行結(jié)束發(fā)現(xiàn)哎吆我草這個(gè)玩意
對(duì)dom屁改動(dòng)都沒(méi)有, 我等她干嘛啊, 我草草, 那就出來(lái) async
這個(gè)東西就是說(shuō), 不需要等我, 也不需要關(guān)心我的執(zhí)行, 我不會(huì)干擾你的, 你做自己的事情就好.
同時(shí)也解決了多個(gè)js之間的依賴, 加上這個(gè)就表示, 我是孤立的, 我不依賴任何其他js也不給任何其他
js 依賴.