瀏覽器的關(guān)鍵路徑渲染

一箩言、網(wǎng)頁的渲染機(jī)制

1. CSSOM 和 DOM

先拋開 JS 不說逻杖,瀏覽器收到一張html頁面時屯烦,會從上往下開始生成 DOM(Document Object Model) 樹凉当,如果中途發(fā)現(xiàn)有樣式如<link>引入或者<style>寫法茄靠,瀏覽器就會同步生成 CSSOM(CSS Object Model)峦萎。當(dāng) DOM 和 CSSOM 樹構(gòu)建好之后屡久,瀏覽器就會開始組合,生成渲染樹(Render-Tree)爱榔,最后就是渲染(繪制)被环,也就是展示給我們看的內(nèi)容。這里需要注意兩個詞:構(gòu)建渲染详幽。這是兩個階段筛欢。

瀏覽器的渲染機(jī)制

參考:渲染樹構(gòu)建、布局及繪制 | Web | Google-Developers

2. 阻塞渲染的 CSS

在上文我們提及到唇聘,渲染樹是在 CSSOM 和 DOM 構(gòu)建好之后開始的版姑,也就是說,CSS 和 HTML 是阻塞瀏覽器渲染的迟郎,因?yàn)槿绻煌暾x取 CSS 和 HTML 剥险,就無法構(gòu)建 CSSOM 和 DOM ,也就無法渲染宪肖。通常第一個請求就已經(jīng)下載好完整的 HTML 了表制,也就是說,構(gòu)建 DOM 是比 CSSOM 快的控乾,因?yàn)樵诮馕?HTML 時么介,才會知道并請求 CSS(CSS 通過 <link><style>引入),所以 CSS 會阻塞渲染樹的構(gòu)建阱持。這也是為什么通常把 CSS 文件的引入放在<head>夭拌,早引入,早生成 CSSOM衷咽「氡猓可以通過媒體查詢來跳過某些 CSS,不納入 CSSOM 的生成過程镶骗,加快 CSSOM 構(gòu)建桶现。

參考:阻塞渲染的 CSS | Web | Google-developers

3. JS 引入

我們知道 JS 是可以修改 DOM 節(jié)點(diǎn)和 DOM 樣式的,所以 JS 既阻塞 DOM鼎姊、CSSOM 的構(gòu)建骡和,也阻塞渲染樹的生成相赁。在解析 HTML 中發(fā)現(xiàn)引入了 JS 后,會下載完 JS 并執(zhí)行之后慰于,才會繼續(xù)解析钮科、構(gòu)建 HTML。因此我們常常把<script>放到</body>前面婆赠,加快網(wǎng)頁生成速度绵脯。

參考:使用 JavaScript 添加交互 | Web | Google-developers

4. 完整的瀏覽器渲染過程

實(shí)際中,瀏覽器有自己的策略去優(yōu)化頁面的渲染速度休里,雖然默認(rèn)情況下蛆挫。 CSSOM 和 DOM 應(yīng)該先構(gòu)建再渲染,但假如網(wǎng)速太慢妙黍,瀏覽器有可能先渲染部分內(nèi)容悴侵。至于更復(fù)雜的優(yōu)化,這里就不討論了拭嫁。以下是完整的渲染過程:

完整的瀏覽器渲染過程

二可免、CSS 和 JS 在網(wǎng)頁中的放置順序是怎樣的?

從上文我們知道噩凹,為了加快瀏覽器渲染巴元,我們應(yīng)該盡早獲取 CSS 和構(gòu)建 DOM,因此 CSS 通常放在 HTML 的<head>里面驮宴,而 JS 放到</body>之前逮刨。

三、解釋白屏和 FOUC

1. 白屏

瀏覽器的渲染需要先生成 DOM 和 CSSOM 樹堵泽,假如 CSS 獲取時間過長(比如 CSS 在最后引入)修己,就會導(dǎo)致 CSSOM 生成過久,瀏覽器只能等待迎罗,這時候就會出現(xiàn)長時間白屏睬愤,直到 DOM 和 CSSOM 構(gòu)建完成。通常打開頁面都會短暫白屏纹安,因?yàn)?DOM 和 CSSOM 構(gòu)建需要時間尤辱。

2. FOUC (flash of unstyled content)

有些瀏覽器(如:FireFox)會先渲染 DOM ,等到 CSSOM 生成了厢岂,再重繪渲染光督,這樣就會看到一部分沒樣式的內(nèi)容,然后再看到有樣式的塔粒。這種分塊分步的渲染结借。

四、async 和 defer 的作用是什么卒茬?有什么區(qū)別

JS 在 HTML 中引入有三種<script> <script async> <script defer>船老。

1. 直接引入<script>

會阻塞瀏覽器渲染咖熟,必須等到 JS 下載并執(zhí)行才繼續(xù)解析 HTML

2. async 方式引入

JS 的下載和 HTML 的解析并行進(jìn)行,但只要 JS 下載完成柳畔,就馬上開始執(zhí)行馍管,同時阻塞 HTML 解析。

3. defer 方式引入

JS 的下載和 HTML 的解析并行進(jìn)行薪韩,但直到 HTML 解析結(jié)束咽斧,才執(zhí)行 JS。

如圖:

js 引入的三種方式

參考:async 和 defer 的區(qū)別 | SegmentFault

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末躬存,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子舀锨,更是在濱河造成了極大的恐慌岭洲,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坎匿,死亡現(xiàn)場離奇詭異盾剩,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)替蔬,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進(jìn)店門告私,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人承桥,你說我怎么就攤上這事驻粟。” “怎么了凶异?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵蜀撑,是天一觀的道長。 經(jīng)常有香客問我剩彬,道長酷麦,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任喉恋,我火速辦了婚禮沃饶,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘轻黑。我一直安慰自己糊肤,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布苔悦。 她就那樣靜靜地躺著轩褐,像睡著了一般。 火紅的嫁衣襯著肌膚如雪玖详。 梳的紋絲不亂的頭發(fā)上把介,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天勤讽,我揣著相機(jī)與錄音,去河邊找鬼拗踢。 笑死脚牍,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的巢墅。 我是一名探鬼主播诸狭,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼君纫!你這毒婦竟也來了驯遇?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤蓄髓,失蹤者是張志新(化名)和其女友劉穎叉庐,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體会喝,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡陡叠,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了肢执。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枉阵。...
    茶點(diǎn)故事閱讀 40,926評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖预茄,靈堂內(nèi)的尸體忽然破棺而出兴溜,到底是詐尸還是另有隱情,我是刑警寧澤反璃,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布昵慌,位于F島的核電站,受9級特大地震影響淮蜈,放射性物質(zhì)發(fā)生泄漏斋攀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一梧田、第九天 我趴在偏房一處隱蔽的房頂上張望淳蔼。 院中可真熱鬧,春花似錦裁眯、人聲如沸鹉梨。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽存皂。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間旦袋,已是汗流浹背骤菠。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疤孕,地道東北人商乎。 一個月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像祭阀,于是被迫代替她去往敵國和親鹉戚。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 大家都知道萬維網(wǎng)的應(yīng)用層使用了HTTP協(xié)議专控,并且用瀏覽器作為入口訪問網(wǎng)絡(luò)上的資源抹凳。用戶在使用瀏覽器訪問一個網(wǎng)站時需...
    SylvanasSun閱讀 2,153評論 1 12
  • 寫在前面 關(guān)于前端性能優(yōu)化的文章非常多,寫瀏覽器關(guān)鍵渲染路徑的也不少伦腐,但總是感覺哪里錯了或者哪里疏忽了却桶,于是自己寫...
    卿可津閱讀 1,209評論 0 1
  • 瀏覽器指的是Chrome系瀏覽器【Firefox大同小異,IE未知】以下提到的“節(jié)點(diǎn)”蔗牡、“標(biāo)簽”和“元素”不做區(qū)分...
    Yieiy閱讀 4,107評論 4 26
  • 本文中瀏覽器特指Chrome瀏覽器 開始之前說說幾個概念,以及在準(zhǔn)備寫這篇文章之前對瀏覽器的渲染機(jī)制的了解: DO...
    若邪Y閱讀 3,533評論 1 10
  • 很多單位和前下屬之間的關(guān)系總是怪怪的嗅剖,單位覺得好不容易培養(yǎng)一個人卻走了辩越,辜負(fù)了多年來的栽培。于是在下屬離開的時候信粮,...
    東木與木東閱讀 1,355評論 2 12