Javascript非阻塞腳本，為什么不簡單地放入所有腳本 </body> 標簽？

Question

為了避免javascript阻止網頁呈現，我們不能簡單地在結束</body>標記之前加載/執行所有的JS文件/代碼嗎？

只有在呈現所有頁面之后才會下載和執行所有JS文件和代碼，因此需要像本文中建議的那樣加載JS文件的非阻塞技術 。 他基本上建議使用如下代碼：

document.getElementsByTagName("head")[0].appendChild(script);

為了在渲染網頁的同時推遲腳本，從而導致網頁的快速渲染速度。

但是， 如果不使用這種類型的非阻塞技術（或其他類似技術） ，我們不會通過簡單地將所有JS文件（要加載/執行）放在結束</body>標記之前來實現相同的非阻塞結果？

我更驚訝，因為作者（在同一篇文章中）建議將他的代碼放在結束</body>標簽之前（參見文章的“腳本放置”部分），所以他基本上是在加載腳本之前無論如何關閉</body>標簽。 他的代碼需要什么呢？

我很困惑，任何幫助表示感謝，謝謝！

---

UPDATE

僅供參考，Google Analytics正在使用類似的非阻止技術來加載其跟蹤代碼：

<script type="text/javascript">
...
(function() 
{
   var ga = document.createElement('script');
   ga.type = 'text/javascript';
   ga.async = true;
   ga.src = 'your-script-name-here.js';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(ga, s); //why do they insert it before the 1st script instead of appending to body/head could be the hint for another question.
})();
</script>
</head>

Answer 1

如果你想要asynchonous腳本。 如果它位於您所在的瀏覽器中，則使用（HTML5）異步標記。這就是Google Analytics在您發布的代碼中所做的事情（特別是行ga.async = true MDN鏈接，向下滾動以查找異步 ）。

但是，這可能導致您的腳本在頁面加載期間的任意時間加載 - 這可能是不合需要的。 在選擇使用異步之前，值得問自己以下問題。

不需要用戶輸入？ 然后使用async屬性。

需要回應按鈕或導航？ 然后你需要把它們放在頁面頂部（頭部）而不是使用async標簽。

異步腳本以任何順序運行，因此如果您的腳本依賴於（例如）jQuery，並且jQuery被加載到另一個標記中，那么您的腳本可能會在jQuery腳本執行之前運行 - 從而導致錯誤。

---

人們為什么不把東西放在身體標簽的底部？ 如果腳本花了足夠的時間來加載它會減慢/暫停網站的負載，那么很可能該網站在網站加載后暫停/掛起網站（期望在不同的瀏覽器上有不同的行為） - 使你的網站似乎沒有響應（點擊按鈕，沒有任何反應）。 在大多數情況下，這並不理想，這就是async屬性被發明的原因。

---

或者，如果您的腳本需要很長時間才能加載 - 您可能希望（在測試之后）將腳本縮小並連接，然后再將其發送到服務器。

我建議使用require.js進行縮小和連接，它很容易運行和使用。

縮小可減少需要下載的數據量。

連接腳本減少了到服務器的“往返”次數（對於具有200ms ping的遠程服務器，5個請求需要1秒）。

Answer 2

一般說不。 即使腳本將在頁面的所有內容之后加載，腳本的加載和執行也會阻止頁面。 原因是腳本中存在寫命令的可能性。

但是，如果要實現的只是加載頁面內容的速度，則在</body>標記之前放置腳本標記的結果與動態創建腳本標記的結果相同。 最重要的區別是，當您以常見的靜態方式加載腳本時，它們會逐個執行，換句話說，不會並行執行腳本文件（在舊版瀏覽器中，同樣適用於下載腳本）。

Answer 3

異步加載（特別是像分析片段之類的東西）的一個優點是，至少如果你將它置於頂部，它將盡快加載，而不會在渲染頁面時花費任何時間。 因此，通過分析，在用戶離開頁面之前（可能在頁面完全加載之前）實際跟蹤用戶的可能性會更高。

並且使用insertBefore而不是append，因為如果我沒記錯的話就有錯誤（我想在某些IE版本中，請參閱下面的鏈接，以及關於它的評論中的內容）。

對我來說這個鏈接： Async JS是我迄今為止發現的最有用的。 特別是因為它也帶來了問題，即使使用谷歌分析代碼，onload事件仍將被阻止（至少在某些瀏覽器中）。 如果您希望不發生這種情況，請將該函數更好地附加到onload事件。

要將異步代碼段放在底部，實際上在您發布的鏈接中進行了解釋。 他似乎只是為了確保在沒有使用onload事件的情況下完全加載DOM。 所以它可能取決於你的腳本正在做什么，如果你沒有操縱DOM，那么就沒有理由將它添加到body的底部。 除此之外，我個人更願意將它添加到onload-event中。