通常我們?cè)陂_發(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)，我要展示到頁面上揍堕！
</div>
</body>
</html>
通過這個(gè)簡(jiǎn)單的例子我們可以看到料身，js代碼在加載完后，是立即執(zhí)行的衩茸，執(zhí)行完后芹血，body才開始解析渲染，所以是找不到item，所以為null幔烛。
js代碼執(zhí)行時(shí)會(huì)阻塞頁面渲染（由于GUI渲染線程和js引擎線程互斥啃擦。具體原理可以看這）
<!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)，我要展示到頁面上饿悬！
</div>
</body>
</html>
測(cè)試結(jié)果令蛉，瀏覽器一直處于加載過程，一會(huì)就卡死了乡恕。html整個(gè)結(jié)構(gòu)（包括html標(biāo)簽）都無法渲染出來言询。js的下載和執(zhí)行會(huì)阻塞Dom樹的構(gòu)建。
1523429832(1).jpg
所以傲宜，我們一般采用以下方法
- 將所有的script標(biāo)簽放到頁面底部运杭，也就是body閉合標(biāo)簽之前，這能確保在腳本執(zhí)行前頁面已經(jīng)完成了DOM樹渲染函卒。
如果放在上面辆憔，將js包裹在$(document).ready(function(){})或者$(function(){})里面
,或者window.onload=function(){}里面。
具體這幾句代碼什么意思报嵌，可以看一下文章
ready和onload的區(qū)別
