網(wǎng)頁資源阻塞瀏覽器加載的原理示例解析
正文
一個頁面允許加載的外部資源有很多，常見的有腳本、樣式、字體、圖片和視頻等，對于這些外部資源究竟是如何影響整個頁面的加載和渲染的呢？今天來一探究竟。
- 如何用 Chrome 定制網(wǎng)絡(luò)加載速度？
- 圖片/視頻/字體會阻塞頁面加載嗎？
- CSS 是如何阻塞頁面加載的？
- JS 又是如何阻塞頁面加載的？
- JS 一定會阻塞 DOM 加載嗎？
- defer 和 async 是什么？又有何特點？
- 動態(tài)腳本會造成阻塞嗎？
- 阻塞是怎么和 DOMContentLoaded 與 onload 扯上關(guān)系的？
測試前環(huán)境準備
測試之前需要對瀏覽器下載資源的速度進行控制，將它重新設(shè)置為 50kb/s，操作方式：
- 打開 Chrome 開發(fā)者工具；
- 在 Network 面板下找到 Disable cache 右側(cè)的下拉列表，然后選擇 Add 添加自定義節(jié)流配置；
- 添加一個下載速度為 50kb/s 的配置；
- 最后在第二步驟中的下拉列表選擇剛剛配置的選項即可；
- 注意：如果當前選擇的自定義選項被修改了，則需要切換到別的選項再切回來才可生效。
為什么是這個速度？因為如下的一些資源，比如圖片、樣式或者腳本體積都是 50kb 的好幾倍，方便測試。
圖片會造成阻塞嗎？
直接寫個示例來看下結(jié)果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded')
})
window.onload = function() {
console.log('onload')
}
</script>
</head>
<body>
<h1>我是 h1 標簽</h1>
<img src="https://xxx.oss-cn-shenzhen.aliyuncs.com/images/flow.png" />
<h2>我是 h2 標簽</h2>
</body>
</html>
上面這張圖片的大小大概是 200kb，當把網(wǎng)絡(luò)下載速度限制成 50kb/s，打開該頁面，可以看到如下結(jié)果：當 h1 和 h2 標簽渲染出來且打印了 DOMContentLoaded 的時候，此時圖片還在加載中，這就說明了圖片并不會阻塞 DOM 的加載，更加不會阻塞頁面渲染；當圖片加載完成的時候，會打印 onload，說明圖片延遲了 onload 事件的觸發(fā)。
視頻、字體和圖片其實是一樣的，也不會阻塞 DOM 的加載和渲染。
CSS 加載阻塞
同樣的，還是直接用代碼來測試 CSS 加載對頁面阻塞的情況，因為下面代碼加載的 bootstrap.css 是 192kb 的，所以理論上下載它應該需要花費 3 到 4 秒左右。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<h1>我是 h1 標簽</h1>
</body>
</html>
測試過程如下：
- 在
Elements面板下，選中h1這個標簽，然后按delete鍵將它從DOM中刪掉，從而模擬首次加載； - 刷新瀏覽器，馬上
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 的渲染嘛？答案是否定的，當把外鏈樣式放到 <body> 最尾部去加載：
<body>
<h1>我是 h1 標簽</h1>
<link rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
</body>
此時刷新瀏覽器，頁面上會馬上顯示出 我是 h1 標簽 字樣，當 3 到 4 秒過后樣式加載完成的時會造成二次渲染，頁面重新渲染出該字樣，這就說明 CSS 阻塞 DOM 的渲染只阻塞定義在 CSS 后面的 DOM。二次渲染會對用戶造成不好的體驗且加重了瀏覽器的負擔，所以這也就是為什么需要把外鏈樣式提前到 <head> 里加載的原因。
CSS 會阻塞后面 JS 的執(zhí)行嗎？
CSS 阻塞了后面 DOM 的渲染，那它會阻塞 JS 的執(zhí)行嘛？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<link rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet" />
</head>
<body>
<h1>我是 h1 標簽</h1>
<script>
console.log('888')
</script>
</body>
</html>
刷新瀏覽器的時候可以看到，瀏覽器 Console 面板下沒有打印內(nèi)容，而當樣式加載完成的時候打印了 888，這就說明 CSS 會阻塞定義在其之后 JS 的執(zhí)行。
為什么會這樣呢？試想一下，如果 JS 里執(zhí)行的操作需要獲取當前 h1 標簽的樣式，而由于樣式?jīng)]加載完成，所以就無法得到想要的結(jié)果，從而證明了 CSS 需要阻塞定義在其之后 JS 的執(zhí)行。
JS 加載阻塞
CSS 會阻塞 DOM 的渲染和阻塞定義在其之后的 JS 的執(zhí)行，那 JS 加載會對渲染過程造成什么影響呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>我是 h1 標簽</h1>
</body>
</html>
首先刪除頁面中已經(jīng)存在的 h1 標簽（如果存在的話），仔細觀察 Elements 面板，當刷新瀏覽器的時候，一直未加載出 h1 標簽（期間頁面一直白屏），直到 JS 加載完成后，DOM 中才出現(xiàn)，這足以說明了 JS 會阻塞定義在其之后的 DOM 的加載，所以應該將外部 JS 放到 <body> 的最尾部去加載，減少頁面加載白屏時間。
defer 和 async
JS 一定會阻塞定義在其之后的 DOM 的加載嗎？來測試一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script async src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>我是 h1 標簽</h1>
</body>
</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í)行；
async 特點
- 對于
async的script，瀏覽器會繼續(xù)解析html，且同時并行下載腳本，一旦腳本下載完成會立刻執(zhí)行；和 defer 一樣，它在下載的時候也不會造成阻塞，但是如果它下載完成后DOM還沒解析完成，則執(zhí)行腳本的時候是會阻塞解析的； async腳本的執(zhí)行 和DOMContentLoaded的觸發(fā)順序無法明確誰先誰后，因為腳本可能在DOM構(gòu)建完成時還沒下載完，也可能早就下載好了；- 多個
async，按照誰先下載完成誰先執(zhí)行的原則進行，所以當它們之間有順序依賴的時候特別容易出錯。 :::infodefer和async都只能用于外部腳本，如果script沒有 src 屬性，則會忽略它們。 :::
動態(tài)腳本會造成阻塞嗎？
對于如下這段代碼，當刷新瀏覽器的時候會發(fā)現(xiàn)頁面上馬上顯示出 我是 h1 標簽，而過幾秒后才加載完動態(tài)插入的腳本，所以可以得出結(jié)論：動態(tài)插入的腳本不會阻塞頁面解析。
<!-- 省略了部分內(nèi)容 -->
<script>
function loadScript(src) {
let script = document.createElement('script')
script.src = src
document.body.append(script)
}
loadScript('https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js')
</script>
<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 文檔，并在文檔中遇到 <script> 標簽時，就會在繼續(xù)構(gòu)建 DOM 之前運行它。這是一種防范措施，因為腳本可能想要修改 DOM，甚至對其執(zhí)行 document.write 操作，所以 DOMContentLoaded 必須等待腳本執(zhí)行結(jié)束后才觸發(fā)。以下這段代碼驗證了這個結(jié)論：當腳本加載完成的時候，Console 面板下才會打印出 DOMContentLoaded。
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded')
})
</script>
<h1>我是 h1 標簽</h1>
<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 應該不會等到外部樣式的加載完成后才觸發(fā)，這么分析是對的，用下面代碼進行測試一翻就知道了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<script>
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded')
})
</script>
<link rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet"/>
</head>
<body>
<h1>我是 h1 標簽</h1>
</body>
</html>
測試結(jié)果：當樣式還沒加載完成的時候，就已經(jīng)打印出 DOMContentLoaded，這和分析的結(jié)果是一致的。但是一定是這樣嘛？顯然不一定，這里有個小坑，（基于上面代碼）在樣式后面再加上 <script> 標簽的時候，會發(fā)現(xiàn)只有等樣式加載完成了才會打印出 DOMContentLoaded，為什么會這樣呢？正是因為 <script> 會阻塞 DOMContentLoaded 的觸發(fā)，所以當外部樣式后面有腳本（**async**** 腳本和動態(tài)腳本除外）的時候，外部樣式就會阻塞 **DOMContentLoaded** 的觸發(fā)**。
<head> <!-- 只顯示了部分內(nèi)容 --> <link rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="stylesheet"/> <script></script> </head>
以上就是網(wǎng)頁資源阻塞瀏覽器加載的原理示例解析的詳細內(nèi)容，更多關(guān)于網(wǎng)頁資源阻塞瀏覽器加載的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
我們在使用fckeditor進行提交的時候，會運行的代碼，方便我們增加功能等。2009-06-06
在線編輯器，CKeditor+CKfinder的組合是首選的，可惜CKfinder要收費，黃金搭檔只有1個是免費的，又不想用回老版本，所以站長只好另尋他路。2011-06-06
Windows Live Writer 實現(xiàn)代碼高亮
有時會包含大量代碼，如果能在文章中高亮顯示代碼文章的可讀性肯定會好很多。2009-05-05
這篇文章主要介紹了讓IE8和IE9支持eWebEditor在線編輯器的方法,eWebEditor常用在ASP制作的網(wǎng)站后臺中,是比較古老的一款在線編輯器了,需要讓IE8和IE9支持的朋友可以參考下2014-06-06
經(jīng)常在后臺編輯超鏈接的朋友，希望將頁面鏈接，默認是新窗口打開，因為這樣用戶體驗好點，所以將FCKEditor簡單的修改下。2010-06-06
CKEditor是fckeditor的3.0版。經(jīng)過近兩年的緊張開發(fā)，第一個CKEditor 3.0穩(wěn)定版本終于發(fā)布。2009-12-12
UEditor編輯文章出現(xiàn)多余空行問題的解決辦法
這篇文章主要介紹了UEditor編輯文章出現(xiàn)多余空行問題的解決辦法,問題表現(xiàn)為編輯文章時,會在文章的首尾各多出一個空行,需要的朋友可以參考下2014-07-07
FCKeditor是一個功能強大支持所見即所得功能的文本編輯器，可以為用戶提供微軟office軟件一樣的在線文檔編輯服務。2010-01-01
這篇文章主要介紹了UEditor 默認字體和字號的修改方法,需要的朋友可以參考下2017-03-03
FCKLang是語言包對象，您只要打開FCK/editor/lang/下面的相應語言包添加相應的名稱屬性就可以了，比如：MyAlbum打開我的像冊。注意大小寫！至此我們的添加工作已完成。2010-06-06