4

我有这样的代码：

$(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')
        });

};
4

5 回答 5

6

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

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

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

如果你有一个$(document).ready()调用了所有 10 个初始化函数，你会得到这个：

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

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

于 2012-09-10T06:11:52.607 回答
3

仅使用该.ready()函数来包装所有需要在加载所有其他代码并且页面准备好后运行的代码。如果您有任何可以自行运行的库并且不需要对 DOM 做任何事情，那么您不需要将它们放入就绪调用中。

于 2012-09-10T05:43:47.153 回答
3

如果代码需要按顺序执行，那么它们应该在同一个 dom 就绪回调函数中，否则，你可以将它们分成不同的 dom 就绪回调函数。

于 2012-09-10T05:40:39.360 回答
2

Performance goes down when using many $(document).ready() calls, but it doesn't seem to be too bad, and on some browsers it doesn't seem to affect performance very much at all. The linked page has test results for several popular browsers when using $() to modify a large DOM.

于 2012-09-10T05:46:56.983 回答
2

由于性能问题，我个人为每个页面创建了单独的函数。因此$(document).ready()，您只需在每个页面上触发一个函数，而不是多次运行。这样，我通常$(document).ready()只运行两次，一次用于全局，然后一次用于特定页面。

function ContactForm() {
    $(function () {
         // Contact form page specific stuff.
    });
}

在我看来（根据您的问题，我假设您使用的是 MVC），我所做的是添加以下内容：

@section scripts {
    @Scripts.Render("~/bundles/ContactForm")
    <script type="text/javascript">ContactForm();</script>
}
于 2012-09-10T06:10:53.163 回答