偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

探究網(wǎng)頁資源究竟是如何阻塞瀏覽器加載的

作者：布蘭
系統(tǒng) 瀏覽器
一個頁面允許加載的外部資源有很多，常見的有腳本、樣式、字體、圖片和視頻等，對于這些外部資源究竟是如何影響整個頁面的加載和渲染的呢？今天我們來一探究竟。

[[374280]]

一個頁面允許加載的外部資源有很多，常見的有腳本、樣式、字體、圖片和視頻等，對于這些外部資源究竟是如何影響整個頁面的加載和渲染的呢?今天我們來一探究竟。

閱讀完這篇文章你將解開如下謎團：

  • 如何用 Chrome 定制網(wǎng)絡(luò)加載速度?
  • 圖片/視頻/字體會阻塞頁面加載嘛?
  • CSS 是如何阻塞頁面加載的?
  • JS 又是如何阻塞頁面加載的?
  • JS 一定會阻塞 DOM 加載嘛?
  • defer 和 async 是什么?又有何特點?
  • 動態(tài)腳本會造成阻塞嘛?
  • 阻塞是怎么和 DOMContentLoaded 與 onload 扯上關(guān)系的?

測試前環(huán)境準備

測試之前我們需要對瀏覽器下載資源的速度進行控制，將它重新設(shè)置為 50kb/s，操作方式：

  1. 打開 Chrome 開發(fā)者工具;
  2. 在 Network 面板下找到 Disable cache 右側(cè)的下拉列表，然后選擇 Add 添加自定義節(jié)流配置;
  3. 添加一個下載速度為 50kb/s 的配置;
  4. 最后在第二步驟中的下拉列表選擇剛剛配置的選項即可;
  5. 注意：如果當前選擇的自定義選項被修改了，則需要切換到別的選項再切回來才可生效。

為什么是這個速度?因為如下的一些資源，比如圖片、樣式或者腳本體積都是 50kb 的好幾倍，方便測試。

圖片會造成阻塞嘛

直接寫個示例來看下結(jié)果：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"/> 
  5.     <script> 
  6.         document.addEventListener('DOMContentLoaded', () => { 
  7.             console.log('DOMContentLoaded') 
  8.         }) 
  9.         window.onload = function() { 
  10.             console.log('onload') 
  11.         } 
  12.     </script> 
  13. </head> 
  14. <body> 
  15.     <h1>我是 h1 標簽</h1> 
  16.     <img src="https://xxx.oss-cn-shenzhen.aliyuncs.com/images/flow.png" /> 
  17.     <h2>我是 h2 標簽</h2> 
  18. </body> 
  19. </html> 

上面這張圖片的大小大概是 200kb，當把網(wǎng)絡(luò)下載速度限制成 50kb/s，打開該頁面，可以看到如下結(jié)果：當 h1 和 h2 標簽渲染出來且打印了 DOMContentLoaded 的時候，此時圖片還在加載中，這就說明了圖片并不會阻塞 DOM 的加載，更加不會阻塞頁面渲染;當圖片加載完成的時候，會打印 onload，說明圖片延遲了 onload 事件的觸發(fā)。

視頻、字體和圖片其實是一樣的，也不會阻塞 DOM 的加載和渲染。

CSS 加載阻塞

同樣的，我們還是直接用代碼來測試 CSS 加載對頁面阻塞的情況，因為下面代碼加載的 bootstrap.css 是 192kb 的，所以理論上下載它應(yīng)該需要花費 3 到 4 秒左右。

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"/> 
  5.     <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" /> 
  6. </head> 
  7. <body> 
  8.     <h1>我是 h1 標簽</h1> 
  9. </body> 
  10. </html> 

測試過程如下：

  1. 在 Elements 面板下，選中 h1 這個標簽，然后按 delete 鍵將它從 DOM 中刪掉，從而模擬首次加載;
  2. 刷新瀏覽器，馬上 Elements 面板下就加載出 h1 標簽，繼續(xù)加載 3 到 4 秒后(此時正在加載 bootstrap.css)，頁面出現(xiàn) 我是 h1 標簽 字樣，此時頁面已經(jīng)渲染完成。

從而得出結(jié)論：

  • bootstrap.css 還沒加載完成，而 DOM 中就已經(jīng)出現(xiàn) h1 標簽，說明 CSS 不會阻塞 DOM 的解析;
  • 頁面直到 bootstrap.css 加載完成才出現(xiàn) h1 里的文案，說明 CSS 會阻塞 DOM 的渲染。

為什么是這個結(jié)論呢?試想一下頁面渲染的流程就知道了。瀏覽器首先解析 HTML 生成 DOM樹，解析 CSS 生成 CSSOM 樹，然后 DOM 樹和 CSSOM 樹進行合成生成渲染樹，通過渲染樹進行布局并且計算每個節(jié)點信息，繪制頁面。


可以說解析 DOM 和 解析 CSS 其實是并列進行的，既然是并列進行的，那 CSS 和 DOM 就不會互相影響了，這和結(jié)論一相符;另外渲染頁面一定是在得到 CSSOM 樹之后進行的，這和結(jié)論二相符。

CSS 一定會阻塞 DOM 的渲染嘛?答案是否定的，當把外鏈樣式放到 最尾部去加載：

  1. <body> 
  2.     <h1>我是 h1 標簽</h1> 
  3.     <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" /> 
  4. </body> 

此時刷新瀏覽器，頁面上會馬上顯示出 我是 h1 標簽 字樣，當 3 到 4 秒過后樣式加載完成的時會造成二次渲染，頁面重新渲染出該字樣，這就說明 CSS 阻塞 DOM 的渲染只阻塞定義在 CSS 后面的 DOM。二次渲染會對用戶造成不好的體驗且加重了瀏覽器的負擔，所以這也就是為什么需要把外鏈樣式提前到 里加載的原因。

CSS 會阻塞后面 JS 的執(zhí)行嘛

CSS 阻塞了后面 DOM 的渲染，那它會阻塞 JS 的執(zhí)行嘛?

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"/> 
  5.     <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" /> 
  6. </head> 
  7. <body> 
  8.     <h1>我是 h1 標簽</h1> 
  9.     <script> 
  10.         console.log('888') 
  11.     </script> 
  12. </body> 
  13. </html> 

刷新瀏覽器的時候可以看到，瀏覽器 Console 面板下沒有打印內(nèi)容，而當樣式加載完成的時候打印了 888，這就說明 CSS 會阻塞定義在其之后 JS 的執(zhí)行。

為什么會這樣呢?試想一下，如果 JS 里執(zhí)行的操作需要獲取當前 h1 標簽的樣式，而由于樣式?jīng)]加載完成，所以就無法得到想要的結(jié)果，從而證明了 CSS 需要阻塞定義在其之后 JS的執(zhí)行。

JS 加載阻塞

CSS 會阻塞 DOM 的渲染和阻塞定義在其之后的 JS 的執(zhí)行，那 JS 加載會對渲染過程造成什么影響呢?

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"/> 
  5.     <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 
  6. </head> 
  7. <body> 
  8.     <h1>我是 h1 標簽</h1> 
  9. </body> 
  10. </html> 

首先刪除頁面中已經(jīng)存在的 h1 標簽(如果存在的話)，仔細觀察 Elements 面板，當刷新瀏覽器的時候，一直未加載出 h1 標簽(期間頁面一直白屏)，直到 JS 加載完成后，DOM中才出現(xiàn)，這足以說明了 JS 會阻塞定義在其之后的 DOM 的加載，所以應(yīng)該將外部 JS 放到 的最尾部去加載，減少頁面加載白屏時間。

defer 和 async

JS 一定會阻塞定義在其之后的 DOM 的加載嘛?來測試一下：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"/> 
  5.     <script async src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 
  6. </head> 
  7. <body> 
  8.     <h1>我是 h1 標簽</h1> 
  9. </body> 
  10. </html> 

上面這段代碼的測試結(jié)果是當頁面中顯示出 h1 標簽的時候，腳本還沒有加載完成，這就說明了 async 腳本不會阻塞 DOM 的加載;同理我們可以用同樣的方式測試 defer，也會得到這個結(jié)論。

現(xiàn)在我們知道了通過 defer 或者 async 方式加載 JS 的時候，它是不會阻塞 DOM 加載的。那么你知道 defer 和 async 是什么嘛?它們兩者有什么區(qū)別呢?

回答這些疑問之前，我們先來看下當瀏覽器解析 HTML 遇到 script 標簽的時候會發(fā)生什么?

  • 暫停解析 DOM;
  • 執(zhí)行 script 里的腳本，如果該 script 是外鏈，則會先下載它，下載完成后立刻執(zhí)行;
  • 執(zhí)行完成后繼續(xù)解析剩余 DOM。

上面這是解析時遇到一個正常的外鏈的情況，正常外鏈的下載和執(zhí)行都會阻塞頁面解析;而如果外鏈是通過 defer 或者 async 加載的時候又會是如何呢?


defer 特點

  • 對于 defer 的 script，瀏覽器會繼續(xù)解析 html，且同時并行下載腳本，等 DOM 構(gòu)建完成后，才會開始執(zhí)行腳本，所以它不會造成阻塞;
  • defer 腳本下載完成后，執(zhí)行時間一定是 DOMContentLoaded 事件觸發(fā)之前執(zhí)行;
  • 多個 defer 的腳本執(zhí)行順序嚴格按照定義順序進行，而不是先下載好的先執(zhí)行;

asyn 特點

  • 對于 async 的 script，瀏覽器會繼續(xù)解析 html，且同時并行下載腳本，一旦腳本下載完成會立刻執(zhí)行;和 defer 一樣，它在下載的時候也不會造成阻塞，但是如果它下載完成后 DOM 還沒解析完成，則執(zhí)行腳本的時候是會阻塞解析的;
  • async 腳本的執(zhí)行 和 DOMContentLoaded 的觸發(fā)順序無法明確誰先誰后，因為腳本可能在 DOM 構(gòu)建完成時還沒下載完，也可能早就下載好了;
  • 多個 async，按照誰先下載完成誰先執(zhí)行的原則進行，所以當它們之間有順序依賴的時候特別容易出錯。

defer 和 async 都只能用于外部腳本，如果 script 沒有 src 屬性，則會忽略它們。

動態(tài)腳本會造成阻塞嘛

對于如下這段代碼，當刷新瀏覽器的時候會發(fā)現(xiàn)頁面上馬上顯示出 我是 h1 標簽，而過幾秒后才加載完動態(tài)插入的腳本，所以可以得出結(jié)論：動態(tài)插入的腳本不會阻塞頁面解析。

  1. <!-- 省略了部分內(nèi)容 --> 
  2. <script> 
  3.     function loadScript(src) { 
  4.         let script = document.createElement('script') 
  5.         script.src = src 
  6.         document.body.append(script) 
  7.     } 
  8.     loadScript('https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js') 
  9. </script> 
  10. <h1>我是 h1 標簽</h1> 

動態(tài)插入的腳本在加載完成后會立即執(zhí)行，這和 async 一致，所以如果需要保證多個插入的動態(tài)腳本的執(zhí)行順序，則可以設(shè)置 script.async = false，此時動態(tài)腳本的執(zhí)行順序?qū)凑詹迦腠樞驁?zhí)行和 defer 一樣。

DOMContentLoaded 和 onload

在瀏覽器中加載資源涉及到 2 個事件，分別是 DOMContentLoaded 和 onload，那么它們之間有什么區(qū)別呢?

  • onload：當頁面所有資源(包括 CSS、JS、圖片、字體、視頻等)都加載完成才觸發(fā)，而且它是綁定到 window 對象上;
  • DOMContentLoaded：當 HTML 已經(jīng)完成解析，并且構(gòu)建出了 DOM，但此時外部資源比如樣式和腳本可能還沒加載完成，并且該事件需要綁定到 document 對象上;

細心的你一定看到了上面的可能二字，為什么當 DOMContentLoaded 觸發(fā)的時候樣式和腳本是可能還沒加載完成呢?

DOMContentLoaded 遇到腳本

當瀏覽器處理一個 HTML 文檔，并在文檔中遇到

  1. <script> 
  2.     document.addEventListener('DOMContentLoaded', () => { 
  3.         console.log('DOMContentLoaded') 
  4.     }) 
  5. </script> 
  6. <h1>我是 h1 標簽</h1> 
  7. <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 

那么一定是腳本執(zhí)行完成后才會觸發(fā) DOMContentLoaded 嘛?答案也是否定的，有兩個例外，對于 async 腳本和動態(tài)腳本是不會阻塞 DOMContentLoaded 觸發(fā)的。

DOMContentLoaded 遇到樣式

前面我們已經(jīng)介紹到 CSS 是不會阻塞 DOM 的解析的，所以理論上 DOMContentLoaded 應(yīng)該不會等到外部樣式的加載完成后才觸發(fā)，這么分析是對的，讓我們用下面代碼進行測試一翻就知道了：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"/> 
  5.     <script> 
  6.         document.addEventListener('DOMContentLoaded', () => { 
  7.         console.log('DOMContentLoaded') 
  8.     }) 
  9.     </script> 
  10.     <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/> 
  11. </head> 
  12. <body> 
  13.     <h1>我是 h1 標簽</h1> 
  14. </body> 
  15. </html> 

測試結(jié)果：當樣式還沒加載完成的時候，就已經(jīng)打印出 DOMContentLoaded，這和我們分析的結(jié)果是一致的。但是一定是這樣嘛？顯然不一定，這里有個小坑，（基于上面代碼）在樣式后面再加上 <script> 標簽的時候，會發(fā)現(xiàn)只有等樣式加載完成了才會打印出 DOMContentLoaded，為什么會這樣呢？正是因為 <script> 會阻塞 DOMContentLoaded 的觸發(fā)，所以當外部樣式后面有腳本（async 腳本和動態(tài)腳本除外）的時候，外部樣式就會阻塞 DOMContentLoaded 的觸發(fā)。

  1. <!-- 只顯示了部分內(nèi)容 --> 
  2. <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/> 
  3. <script></script> 
  4. </head> 

參考文章:

DOMContentLoaded

https://html.spec.whatwg.org/multipage/scripting.html

 

責任編輯：姜華 來源： 大海我來了
瀏覽器網(wǎng)頁資源加載渲染
相關(guān)推薦

2019-06-04 14:15:08

JavaScript V8前端

2019-07-22 15:29:53

JavaScriptGitHub語言

2019-04-26 13:55:02

Istio微服務(wù)架構(gòu)

2021-01-05 09:23:49

網(wǎng)頁端消息

2011-02-16 16:13:40

Debian

2011-02-28 09:51:43

內(nèi)省

2018-07-05 16:15:26

緩存數(shù)據(jù)cache miss

2010-08-24 09:19:59

2020-06-11 09:18:34

動靜分離架構(gòu)架構(gòu)設(shè)計開發(fā)

2011-11-19 15:55:41

虛擬化存儲虛擬化日立數(shù)據(jù)

2011-05-30 20:51:49

2017-11-21 14:56:59

2011-08-04 13:24:28

IT運維

2021-02-19 20:38:01

互聯(lián)網(wǎng)衛(wèi)星系統(tǒng)

2022-06-13 09:51:35

UWB超寬帶無線載波通信技術(shù)

2012-05-28 22:49:50

PureView

2015-08-26 09:54:19

物聯(lián)網(wǎng)

2015-09-29 09:47:14

2023-12-26 01:24:45

Jedis連接池參數(shù)

2019-05-27 15:30:44

Node.jsJavaScript前端
點贊
收藏

51CTO技術(shù)棧公眾號