站長資訊網
script標簽的位置：1、放在head標簽內部，瀏覽器解析HTML，解析到script標簽時，會先下載完所有script，再往下解析其他的HTML；因此會使網頁內容呈現滯后，用戶體驗差。2、放在body標簽內部，瀏覽器會先解析完整個HTML頁面，再下載并解析js。3、放在body閉標簽之后，瀏覽器會忽略之前的“”，所以實際效果和寫在body閉合標簽之前沒有區別。
前端（vue）入門到精通課程：進入學習
本教程操作環境：windows7系統、HTML5版、Dell G3電腦。
一般script標簽會被放在頭部或尾部，頭部就是head標簽里，尾部就是body里，也有放在body閉合標簽之后。
1、script標簽放在head標簽內部
<head> <title>獲取DOM元素</title> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script> </head> <body> <div id="atag"> <p>一個標簽</p> </div> </body>
打印結果：
當script標簽放在head標簽里時，瀏覽器解析HTML，解析到script標簽時，會先下載完所有script，再往下解析其他的HTML。在瀏覽器下載js時，是不能多個js一起下載的，且瀏覽器下載js時，會阻塞解析其他的HTML。因此，將script標簽放在頭部，會使網頁內容呈現滯后，用戶體驗差。
2、script標簽放在body標簽內部
<body> <div id="atag"> <p>一個標簽</p> </div> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script> </body>
將script標簽放在body尾部，瀏覽器會先解析完整個HTML頁面，再下載js，這樣的話，如果js執行出錯了，最起碼頁面中的元素還可以加載出來，因為DOM文檔是從上往下的順序執行的。 但是對于一些高度依賴于js的網頁，這樣就會顯得很慢。
3、script標簽放在body閉標簽之后
<body> <div id="atag"> <p>一個標簽</p> </div> </body> <script> var myElement = document.getElementById("atag"); console.log(myElement); </script>
雖然放在body閉合標簽之前和之后的打印結果是一樣的，但是從HTML 2.0起放在body閉標簽之后就是不合標準的。之所以瀏覽器不會報錯，是因為如果在body標簽之后再出現script或任何元素的開始標簽，都是prase error（語法錯誤），瀏覽器會忽略之前的</body>，即視作仍舊在body內部，所以實際效果和寫在body閉合標簽之前是沒有區別的。
怎樣實現邊解析頁面邊下載js呢？
async和defer
async
async的設置，會使得script腳本異步的加載并在允許的情況下執行，但是并不會按照在script在頁面中的順序來執行，而是誰先加載完誰執行。
<script async src="/script01.js"></script> <script async src="/script02.js"></script>
如果script01.js較大，下載慢，則會導致script02.js可能先于script01.js執行。
defer
defer的設置，會是瀏覽器異步的下載該文件并且不會影響到DOM的渲染，如果有多個設置了defer的script標簽存在，則會按照順序執行所有的script，即先下載script01.js，再下載script02.js
【推薦學習：javascript視頻教程】
