javascript - 使用 jQuery 1.8.1 有多个 $(document).ready 有任何开销吗

Question

我有这样的代码:

$(document).ready(function () {

    $('.accessLink')
        .bind('click', accessLinkClick);
    $('#logoutLink')
        .click(function (e) {
            window.location = $(this).attr('data-href')
        });

});

我网站的每个部分的功能都被分成许多小文件，当网站部署时，这些文件被简化并结合在一起。

这些最多十个的小文件中的每一个都在等待 $(document).ready。谁能告诉我这样做是否有很多开销。将我的代码拆分为功能区域意味着代码看起来易于维护，但我只是想知道现在我使用的是 jQuery 1.8.1 的开销

更新:

根据我开始编写这样的代码的答案:

$(document).ready(function () {

    accessButtons(); // login, register, logout
    layoutButtons();
    themeButtons();  // theme switcher, sidebar, print page

});

然后将每个函数编码为:

function accessButtons() {

    $('.accessLink')
        .bind('click', accessLinkClick);
    $('#logoutLink')
        .click(function (e) {
            window.location = $(this).attr('data-href')
        });

};

Answer 1

这是 10 次 $(document).ready() 调用与随后调用 10 次初始化函数的区别。

通过 10 次调用，您将获得:

• 10 次调用 $(document)。
• 调用 .ready() 方法 10 次。
• DOM 就绪事件的一个事件监听器
• 当 DOM 就绪事件触发时，它会在回调数组中循环并调用传递给 .ready() 的每个回调。

如果你有一个 $(document).ready() 然后调用你所有的 10 个初始化函数，你会有这样的:

• 1 次调用 $(document)。
• 1 次调用 .ready() 方法。
• DOM 就绪事件的一个事件监听器
• 当 DOM 就绪事件触发时，它会调用您的一个就绪处理程序。
• 您准备好的处理程序然后调用 10 个初始化函数调用。

因此，差异大约是构造 9 个额外的 jQuery 对象和进行 9 个额外的 .ready() 方法调用所花费的时间。在极端情况下，这可能会很明显，但您不太可能在实践中看到差异。