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