通常我們?cè)陂_(kāi)發(fā)html時(shí)，通常將script標(biāo)簽放到body標(biāo)簽下面，那原因到底是為什么呢？
js代碼在載入完后，是立即執(zhí)行的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var item = document.getElementById("item");
console.log(item); //null
</script>
</head>
<body>
<div id="item">
我是html結(jié)構(gòu)，我要展示到頁(yè)面上！
</div>
</body>
</html>
通過(guò)這個(gè)簡(jiǎn)單的例子我們可以看到，js代碼在加載完后，是立即執(zhí)行的，執(zhí)行完后，body才開(kāi)始解析渲染，所以是找不到item，所以為null。
js代碼執(zhí)行時(shí)會(huì)阻塞頁(yè)面渲染（由于GUI渲染線(xiàn)程和js引擎線(xiàn)程互斥。具體原理可以看這）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
while (true) {
console.log(1);
}
</script>
</head>
<body>
<div id="item">
我是html結(jié)構(gòu)，我要展示到頁(yè)面上！
</div>
</body>
</html>
測(cè)試結(jié)果，瀏覽器一直處于加載過(guò)程，一會(huì)就卡死了。html整個(gè)結(jié)構(gòu)（包括html標(biāo)簽）都無(wú)法渲染出來(lái)。js的下載和執(zhí)行會(huì)阻塞Dom樹(shù)的構(gòu)建。
1523429832(1).jpg
所以，我們一般采用以下方法
- 將所有的script標(biāo)簽放到頁(yè)面底部，也就是body閉合標(biāo)簽之前，這能確保在腳本執(zhí)行前頁(yè)面已經(jīng)完成了DOM樹(shù)渲染。
如果放在上面，將js包裹在$(document).ready(function(){})或者$(function(){})里面
,或者window.onload=function(){}里面。
具體這幾句代碼什么意思，可以看一下文章
ready和onload的區(qū)別
