HTML加載順序
阿新 • • 發佈：2019-05-05
文字 9.png char brush dom元素 img fun js代碼 info
從上到下順序加載
從上到下順序加載
從上到下順序加載
JS的加載和執行會阻塞DOM樹的解析和渲染
原因 : JS可能會修改DOM樹的結構,所以會等執行完JS代碼後才繼續
改善方法 : 可以把js代碼放到</body>前,這樣先生成DOM文檔,再加載運行js代碼,不會因為阻塞而影響頁面顯示速度.
CSS加載不會阻塞DOM樹的解析,但是會阻塞DOM樹的渲染
原因 : CSS不會修改DOM樹的結構,但會修改DOM元素的樣式
CSS加載也會阻塞JS代碼的執行
詳細看 : https://www.cnblogs.com/chenjg/p/7126822.html
示例
<html>
<head>
<meta http-equiv="charset" content="utf-8">
<script>
//onload是在整個頁面加載完畢後執行
window.onload = function (){
text.innerHTML=text.innerHTML+"->這是onload";
}
</script>
</head>
<body>
<p id="item">原文</p>
<script>
//獲取<p>元素, 放下邊是因為如果放在<p>元素前,因為<p>的DOM對象還沒加載,會獲取不到<p>元素
var text = document.getElementById("item");
text.innerHTML=text.innerHTML+"->加載圖片`前";
</script>
<img src="./aaa.jpg"></img>
<script>
text.innerHTML=text.innerHTML+"->加載圖片_後";
</script>
</body>
</html>
<style type="text/css">
/*這段CSS執行後,才會繼續執行下面的JS代碼*/
p {color: blue}
</style>
<script>
text.innerHTML=text.innerHTML+"->顏色變紅前";
</script>
<style type="text/css">
/*放在最下邊,所以最後執行*/
p {color: red}
</style>
運行結果如下圖:
文字描述一下加載順序:
"原文" --> "->加載圖片`前" --> 圖片被顯示 --> "->加載圖片_後" --> 文本變藍色 --> "->顏色變紅前" --> 文本變紅色
可以自己復制上邊的代碼,打斷點試試看是不是這個順序.
HTML加載順序