異步和文檔準備

Question

我嘗試通過在腳本中放置一些async屬性來優化我的頁面。它似乎打破了我的JavaScript，因爲$(document).ready在所有腳本加載之前執行！

我看到我可以通過將$(window).load而不是$(document).ready來解決我的問題，但我想知道是否有更好的解決方案。 該解決方案觸發2個問題在我的情況：

1. 我不得不改變所有$(document).ready並告訴所有的developpers不使用它了
2. 所有圖像加載後，腳本將被執行。我的網站有很多沉重的圖像，我真的需要在dom準備好後立即執行一些腳本。

你有一些魔術技巧嗎？也許把所有的腳本放在最後？使用defer而不是async？

Answer 1

經過一番深入的研究，我可以肯定地說，將腳本放在頁面末尾是最佳實踐。

雅虎同意我：http://developer.yahoo.com/performance/rules.html#js_bottom

谷歌不談論這種做法，似乎更喜歡異步腳本：https://developers.google.com/speed/docs/best-practices/rtt#PreferAsyncResources

恕我直言，把腳本在頁面的結尾有超過異步幾個好處/推遲：

• 它將爲所有瀏覽器中運行（是的，即使IE;））
• 您保證執行順序
• 你並不需要使用$(document).ready或$(window).load
• 您的圖像加載
• 作爲異步/延遲，你的頁面會顯示之前腳本能夠執行更快
• 當DOM觸發ready事件，所有腳本加載
• 可以通過合併在一個文件中所有的JS沒有問題（通過類似的mod_pagespeed工具）

，我可以看到的唯一的缺點是，瀏覽器將無法並行的下載進行優化。 使用async/defer的一個很好的理由是當你有一個完全獨立的腳本（不需要依賴執行順序）並且不需要在特定的時間執行時。例如：谷歌分析。