最近遇到一個問題：HTML里的哪一部分Javascript 會在頁面載入的時候被執行（）A : 文件頭部 B : 文件尾 C : <head>標簽部分 D : <body>標簽部分 雖然大家都知道選D,但是關於答案的解析眾說紛紜，由此可見大家對於瀏覽器的載入解析渲染還是不夠瞭解。 瀏覽器是從上到下依 ...
最近遇到一個問題：
HTML里的哪一部分Javascript 會在頁面載入的時候被執行（）
A : 文件頭部
B : 文件尾
C : <head>標簽部分
D : <body>標簽部分
雖然大家都知道選D,但是關於答案的解析眾說紛紜，由此可見大家對於瀏覽器的載入解析渲染還是不夠瞭解。
瀏覽器是從上到下依次載入並解析的。
當瀏覽器載入html文件並解析到<head>時,頁面也就是<body>並沒有被解析,瀏覽器會等到<head>中的js執行完再載入頁面。
這是為什麼呢？
原因：JS有可能會修改DOM，最為經典的document.write，這意味著，在JS執行完成前，後續所有資源的下載可能是沒有必要的，這是js阻塞後續資源下載的根本原因。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
console.log('this is head js ');
</script>
<script type="text/javascript" src='test.js'></script>
<style type="text/css">
body{
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
console.log('this is body js');
window.onload=function(){
console.log('this is onload js');
};
</script>
<p >this is body</p>
</body>
</html>
輸出：
this is head js
this is test js
this is body js
this is onload js
由此可見head和頭部引進的script腳本最先載入並執行，而onload是最後執行的，所以處於<body>和</body>中的元素是在頁面載入的時候被執行的。
瞭解這個有什麼用呢？
假如說你把DOM操作放在了<head>標簽里，你會發現報錯，這是因為DOM樹還沒建立，getElementById獲取的是undefined。
所以說最好把<script>放在</body>之前。
