HTML文檔的加載與頁(yè)面的首次渲染
當(dāng)我們輸入一個(gè)頁(yè)面地址時(shí)，發(fā)生了哪些事情呢？
5、解析到 body
body 里的情況比較多，body 里可能只有 DOM 元素，可能既有 DOM、也有 css、js 等資源，js 資源又有可能異步加載 圖片、css、js 等。DOM 結(jié)構(gòu)不同，瀏覽器的解析機(jī)制也不同，我們分開來(lái)討論。
有 DOM 元素、外鏈 js。有 DOM 元素、外鏈 css有 DOM 元素、外鏈 js、外鏈 css6、文檔解析完畢頁(yè)面渲染完成后執(zhí)行js，頁(yè)面重新渲染。當(dāng)頁(yè)面引用的所有 js 同步代碼執(zhí)行完畢，觸發(fā) 事件。7、html 文檔中的圖片資源，js 代碼中有異步加載的 css、js 、圖片資源都加載完畢之后，load 事件觸發(fā)。
測(cè)試代碼如下
<script src="http://test.com:9000/mine//case2/j1.js
"></script>
<script>
// 利用 performance 統(tǒng)計(jì) load 加載時(shí)間。
window.onload=function(){console.log(performance.timing.loadEventStart - performance.timing.fetchStart);}
</script>
復(fù)制代碼大家可以調(diào)整資源擺放位置，觀察瀏覽器的解析表現(xiàn)。
head 中資源的加載body 中資源的加載 事件的觸發(fā)
上面只是講了 html 文檔的加載與渲染，并沒有講 事件的觸發(fā)時(shí)機(jī)。直截了當(dāng)?shù)亟Y(jié)論是， 事件在html文檔加載完畢，并且 html 所引用的內(nèi)聯(lián) js、以及外鏈 js 的同步代碼都執(zhí)行完畢后觸發(fā)。
大家可以自己寫一下測(cè)試代碼，分別引用內(nèi)聯(lián) js 和外鏈 js 進(jìn)行測(cè)試。
load 事件的觸發(fā)
當(dāng)頁(yè)面 DOM 結(jié)構(gòu)中的 js、css、圖片，以及 js 異步加載的 js、css 、圖片都加載完成之后，才會(huì)觸發(fā) load 事件。
注意：
大家可以在 中試一下。
瀏覽器對(duì)同一域名下的資源并發(fā)下載線程數(shù)頁(yè)面渲染完成后執(zhí)行js，為6個(gè)。
這里要注意關(guān)鍵詞：同一域名。如果 n 個(gè)不同域名的話，在瀏覽器設(shè)置的最大并發(fā)上限以內(nèi)(默認(rèn)是10個(gè))，是可以達(dá)到 n * 6 個(gè)的最大并發(fā)的下載的。
程序員燈塔
轉(zhuǎn)載請(qǐng)注明原文鏈接：HTML文檔的加載與頁(yè)面的首次渲染