1.瀏覽器在加載一個(gè)界面的時(shí)候, 是按照從上至下的順序加載的
2.如果將script標(biāo)簽寫在head標(biāo)簽中, 那么執(zhí)行js代碼的時(shí)候, 網(wǎng)頁還沒有加載完畢。 DOM對(duì)象也還沒有準(zhǔn)備完畢, 所以可能獲取不到我們需要的元素憔足，打印該元素會(huì)返回null
3.如果將script標(biāo)簽寫在body標(biāo)簽的最末尾, DOM對(duì)象已經(jīng)準(zhǔn)備完畢了, 所以我們可以獲取到我們需要的元素
4.如果非要把script標(biāo)簽寫在head標(biāo)簽中, 那么需要執(zhí)行的代碼最好寫好onload方法中,onload方法的作用是等待網(wǎng)頁上所有的資源加載完畢之后才會(huì)執(zhí)行網(wǎng)頁上所有的資源包含所有的標(biāo)簽/圖片/CSS文件/JS文件等
5.window.onload和將script標(biāo)簽寫在body最后的區(qū)別:window.onload執(zhí)行時(shí), 不僅DOM對(duì)象準(zhǔn)備好了, 網(wǎng)頁上所有資源也都準(zhǔn)備好了。 body后的script標(biāo)簽執(zhí)行時(shí), 僅僅代表DOM對(duì)象準(zhǔn)備好了, 而網(wǎng)頁上的其它資源不一定準(zhǔn)備好了
綜上所述: body后的script標(biāo)簽的效率高于window.onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>76-文檔的加載過程</title>
<script>
// var oDiv = document.querySelector(".father");
// console.log(oDiv); // null
window.onload = function () {
var oDiv = document.querySelector(".father");
console.log(oDiv); // null
}
</script>
</head>
<body>
<div class="father">
<div class="son">
123
</div>
</div>
<script>
// var oDiv = document.querySelector(".father");
// console.log(oDiv); // null
</script>
</body>
</html>
