標籤：多個 class 最優 額外 sync 問題 下載 存在 區別
一般script標籤會被放在頭部或尾部。頭部就是<head></head>裡面，尾部一般指<body></body>裡,但也有放在</body>閉合標籤之後的。
究竟這些位置不同有什麼不一樣呢？下面我來詳細說一下：
1.<script></script>標籤放置在<head></head>標籤內部時：
將script放在<head>裡，瀏覽器解析HTML，發現script標籤時，會先下載完所有這些script，再往下解析其他的HTML。討厭的是瀏覽器在下載JS時，是不能多個JS並發一起下載的。不管JS是不來來自同一個host，瀏覽器最多隻能同時下載兩個JS，且瀏覽器下載JS時，就block掉解析其他HTML的工作。將script放在頭部，會讓網頁內容呈現滯後，導致使用者感覺到卡。
2.<script></script>標籤放置在<body></body>標籤內部時：
將script放在尾部的缺點，是瀏覽器只能先解析完整個HTML頁面，再下載JS。而對於一些高度依賴於JS的網頁，就會顯得慢了。所以將script放在尾部也不是最優解，最優解是一邊解析頁面，一邊下載JS。
3.<script></script>標籤放置在</body>標籤之後時：
首先聲明。這在</body>之後插入其他元素，從HTML 2.0起就是不合標準的。按照HTML5標準中的HTML文法規則，如果在</body>後再出現<script>或任何元素的開始標籤，都是parse error，瀏覽器會忽略之前的</body>，即視作仍舊在body內。所以實際效果和寫在</body>之前是沒有區別的。這種寫法雖然也能work，但是並沒有帶來任何額外好處，實際上出現這樣的寫法很可能是誤解了“將script放在頁面最末端”的教條。所以還是不要這樣寫為好。
因為在body以外寫script也可能存在其他異常嘛。有什麼理由能讓開發人員推斷出後者會更安全呢？實際上在沒有充分測試的前提下，如果要進行推斷，那麼可以推斷出後者的風險更大。
第一，這是不合標準的行為，而且從有HTML標準以來都是不合標準的，因此瀏覽器實現不一致或者在這種情況下有bug的風險顯然更大。
第二，雖然將<script>寫在</body>之後，但最終的DOM樹裡，<script>元素還是會成為body的子節點，這一點很容易在firebug等調試器裡驗證。既然如此，如果將<script>寫在</body>之前會有問題，你又如何保證寫在之後（並在DOM裡又變成了和寫在之前一樣的結構）就沒有問題？
那最優解的一邊解析頁面一邊下載JS應該怎樣實現呢？
我們<script>標籤這裡面有兩個屬性（async和defer），現在80%的瀏覽器都可以識別他們，這兩個屬效能讓瀏覽器做到一邊下載JS(還是只能同時下載兩個JS)，一邊解析HTML。他的優點不是增加JS的並發下載數量，而是做到下載時不block解析HTML。
1 <script type="text/javascript" src="path/to/script1.js" async></script> 2 <script type="text/javascript" src="path/to/script2.js" async></script>
如我們同時引入兩條外部js檔案時：
async屬效能保證script會非同步執行，只要下載完就執行，這會導致script2.js可能先於script1.js執行（如果script2.js比較大，下載慢）。
defer屬性就能保證script有序執行，script1.js先執行，script2.js後執行。
關於<Script>標籤在html頁面置放位置
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
