Javascript JQuery document.ready（）开销

我正在使用一个应用程序，该应用程序使用的JQuery比我以前处理过的要多得多，我试图理解JQuery document.ready（）对web应用程序的作用。我希望在JS/JQuery方面更有经验的人能帮助我

假设我在一个文档中有一个单独的.js文件，其中包含100个JQuery函数。ready（）

据我所知，现在可以加载这些文件，并为网站的每个页面做好准备（通过包含.js文件）。但是，我也可以将这些单独的document.ready（）函数粘贴在网站的每个页面上，每个页面只能得到它实际使用的内容。或者，我可以通过有选择地调用在document.ready（）中对事件处理程序进行分组的函数来制作更复杂的东西

考虑到整个.js文件在任何情况下都是由浏览器读取的，我想知道这些方法对性能有什么影响。为每个页面加载所有事件处理程序似乎有悖常理，但与此同时，这让我怀疑我是否在制造一个实际不是问题的问题

---

一点外部视角将是有用的。谢谢。

如果您将每个页面的启动代码都放在一个单独的外部文件中，这将根本无法维护。只需坚持使用每页解决方案。

我建议您坚持使用每页实现，因为没有必要让代码在页面上不做任何事情，但会消耗内存。您甚至可以呈现$（document）.ready（properteFunctionName）；请确保在js中定义了所需的函数，并在呈现此js脚本之前加载这些函数。

我认为您应该将所有函数存储在一个大文件中。这更易于维护，缩小后将快速加载。一旦它被存储在用户的缓存中，它就不会每次都重新加载。

当选择器不匹配时，jQuery会正常地失败，因此您得到的唯一真正的性能影响是jQuery搜索每个选择器。虽然如果您试图注册几千个处理程序，这可能是一个潜在的瓶颈，但在100个时不太可能注意到

此外，如果您将它们注册到id（#），它甚至不必搜索整个DOM，因此惩罚更不明显

关于id搜索的jQuery文档：

对于id选择器，jQuery使用JavaScript函数 document.getElementById（），非常高效

---

我的研究视角：

• 将所有函数放在一个文件中，使用 长过期标题
• 我建议将所有js放在一个文件中（如果需要，可以使用

  
  （location.pathname）

  只在每个页面上运行一些
• 使用注释，它将是可维护的
• 如果你真的希望每页都有一些js，那么仍然将所有函数保留在1中 js文件，但可以使用不同的js来加载每个函数 在每一页的顶部……我猜

---

最好的总体效果通常是通过创建一个代码库来实现的，该库可以在一个缩小的外部JS文件中提供给所有页面。然后，将特定于页面的初始化代码与页面内联或特定于该页面的外部JS文件中

这有以下优点：

所有函数只有一个副本，因此更易于维护

浏览器可以非常有效地缓存一个缩小的外部JS文件。它将与查看器点击的第一个页面一起加载，然后从浏览器缓存中提供服务

您正在运行的初始化代码仅适用于显示的特定页面。如果您将所有初始化代码混合在一起，并让许多初始化代码以静默方式失败，因为它实际上适用于其他页面，您可以快速创建一个大混乱，并且在一个大型站点中，运行所有这些代码可能会对性能造成相当大的影响se初始化函数并查找不存在的DOM对象

如果正在运行的初始化函数只是那些应该工作的函数，那么调试就容易多了

使用一个可缓存的外部文件中的外部JS，如果特定页面的初始化代码内联包含在实际网页中，而不是包含在其自身的外部JS文件中，则可以最大限度地减少需要加载的外部文件的数量。为了获得最快的页面显示性能，应该使用e页

对于大型项目中的进一步优化，如果外部JS文件非常大，并且您有一个只在站点的一部分中需要的功能的大分类，那么您可以将这些功能分解为另一个仅包含在站点的该部分中的外部JS文件主要节省的是解释器解析时间和内存占用，这可能很重要，也可能不重要（取决于项目的大小）。这些优化通常有一个实际的限制，因为加载多个外部JS文件通常比加载一个更大的文件花费更多的时间

---

请确保对外部JS文件进行适当的版本编号，这样当您修改它们时，文件名会发生变化，这样浏览器就可以强制获取新版本，而不会被缓存中的旧版本卡住。

为什么您会说它不可维护？当然，在一个有50多个页面/模板的应用程序中，所有JS都放在一个地方是很容易的ier，并允许可重用性。@Tom用于常见函数、变量等。您在页面中使用的是正确的。但将不相关的代码放在一个50+*n行长的函数中不是一个好方法。是的，这就是我正在做的。但我感兴趣的是，我是否可以将它们保留一段时间

$(document).ready(function() {
  $("#something1").click(function() { ... });
  $("#something2").click(function() { ... });
  $("#something3").click(function() { ... });
  etc...
});