將JavaScript放在頁面末尾會產生錯誤

Question

我最近讀到，爲了加快網頁加載速度，最好將JavaScript鏈接放在最後。我做了，但現在引用文件的功能不起作用。如果我把鏈接放在頁面的開頭，一切都很好。

是否把JavaScript的只有在特定情況下結束工作的這件事情？

Answer 1

我也經歷了一些測試。如果你正在加載一個Javascript文件，那麼把它放在最後會更快，但它確實有一些重要的注意事項。

首先是，這樣做常常使我的一些視覺效果明顯。例如，如果我使用jQuery來格式化表格，表格就會變成無格式，然後代碼會運行以重新格式化它。我沒有覺得這是一個很好的用戶體驗，並且寧願頁面完成。

其次，將它放在最後使得很難將代碼放入頁面，因爲通常功能還不存在。如果你在你的頁面有這個：

$(function() { 
    // ... 
}); 

那麼，這將不會工作，直到jQuery對象的定義。如果在頁面末尾定義了上述內容，則會產生錯誤。現在

你可能會說，所有的造型代碼可以放在外部文件，但是這將是性能的原因是錯誤的。我開始在一個項目上做這件事，然後發現我的頁面花費了一秒鐘的時間來瀏覽所有已經集中的Javascript。所以我爲相關行爲創建了函數，然後在每個頁面中調用相應的函數，從而將Javascript加載運行時間減少到50-200ms。

最後，您可以（也應該）通過版本化JavaScript文件，然後使用far-futures Expires標題來最小化Javascript的加載時間，以便它們只加載一次（每次更改時），在此時他們在文件中的位置在很大程度上不相關。

因此，所有的一切，我發現把把Javascript文件在文件的結尾很麻煩，並最終不必要的。

Answer 2

你必須要注意順序，但像jQuery庫可以很容易把事情做對。在頁面的最後，包含所有你需要的.JS文件，然後，或者在一個單獨的文件中，或者在頁面本身中，把Jquery調用作用於頁面內容。

由於JQ與CSS的樣式選擇交易，這是很容易避免任何JavaScript頁面的主體 - 而不是你將它們連接到ID和班級。 這就是所謂的Unobtrusive Javascript

Answer 3

每雅虎YUI示例文件我記得有幾乎所有JavaScript底。例如，

• Simple Event Handling
• Basic Drag and Drop
• JSON: Adding New Object Members During Parsing

它看起來像雅虎實踐大致是「庫中的代碼在<體>，有源代碼的開始在<體結束>「。

要小心，雖然，這可能導致Flash of Unstyled Content綜合徵。