jQuery：如果在頁面底部使用外部JS，為什么要使用document.ready？

Question

我將所有JS作為外部文件包含在頁面的最底部。 在這些文件中，我有幾個像這樣定義的方法，我從ready事件中調用它：

var SomeNamepsace = {};

SomeNamepsace.firstMethod = function () {
    // do something
};

SomeNamepsace.secondMethod = function () {
    // do something else
};

$(document).ready(function () {
    SomeNamepsace.firstMethod();
    SomeNamepsace.secondMethod();
});

但是，當我刪除ready函數並直接調用方法時，一切都運行相同，但執行速度明顯更快 - 在一個非常基本的文件上幾乎快一秒！ 由於此時應該加載文檔（因為所有標記都出現在腳本標記之前），還有什么理由仍然使用ready事件嗎？

Answer 1

好問題。

圍繞整個“在頁面底部放置腳本”的建議以及它試圖解決的問題存在一些混淆。 對於這個問題，我不打算討論是否在頁面底部放置腳本會影響性能/加載時間。 我只想談談你是否需要$(document).ready 如果你也把腳本放在頁面底部 。

我假設您正在引用您在腳本中立即調用的那些函數中的DOM（任何像document或document.getElementById這樣簡單的函數）。 我還假設你只詢問這些[DOM-referencing]文件。 IOW，您的DOM引用代碼所需的庫腳本或腳本（如jQuery）需要在頁面的前面放置。

回答你的問題 ：如果你在頁面底部包含你的DOM引用腳本，不，你不需要$(document).ready 。

解釋 ： 沒有 "onload"相關的實現，比如$(document).ready ，經驗法則是：與頁面中DOM元素交互的任何代碼都應該放在/包含在頁面的下方，而不是它引用的元素。 最簡單的方法是在結束</body>之前放置該代碼。 看到這里和這里 。 它也適用於IE的可怕“操作中止”錯誤 。

話雖如此，這絕不會使$(document).ready的使用無效。 在加載對象之前引用一個對象是在DOM JavaScript中開始時最常見的錯誤之一（見證了它太多次計算）。 它是jQuery的問題解決方案，它不需要你考慮這個腳本相對於它引用的DOM元素的位置。 這對開發者來說是一個巨大的勝利。 這只是他們不得不考慮的一件事。

此外，將所有DOM引用腳本移動到頁面底部通常很困難或不切實際（例如，任何發出document.write調用的腳本都必須保持不變）。 其他時候，您正在使用一個框架來渲染一些模板或創建動態javascript片段，其中引用需要在js 之前包含的函數。

最后，它曾經是將所有DOM引用代碼插入window.onload “最佳實踐”，但是由於文檔原因 ，它已被$(document).ready實現黯然失色。

所有這些加起來就是$(document).ready作為一個非常優越，實用和通用的解決方案來解決過早引用DOM元素的問題。