Question

我正在使用一个应用程序，它使用了我之前处理过的更多JQuery，我正在尝试理解JQuery document.ready（）对Web应用程序的作用。我希望有更多JS / JQuery经验的人可以帮助我。

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

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

据我所知，现在可以为网站的每个页面加载并准备好这些内容（通过包含.js文件）。但是，我也可以在网站的每个页面上将这些内容放在单独的document.ready（）函数中，其中每个页面只能获得它实际使用的内容。或者我可以通过有选择地调用在document.ready（）;

中组合事件处理程序的函数来制作更复杂的东西

鉴于浏览器在任何情况下都读取了整个.js文件，我想知道这些方法在性能上可能会产生什么样的影响。加载每个页面的所有事件处理程序似乎都是违反直觉的，但与此同时，这让我想知道我是否从实际上没有的东西中创建了一个问题。

一点点外部视角会很有用。感谢。

Answer 1

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

这具有以下优点：

您只有一份所有功能的副本，因此更容易维护。
浏览器可以非常有效地缓存一个缩小的外部JS文件。它将加载查看器点击的第一页，然后从浏览器缓存中提供。
您只运行适合所显示的特定页面的初始化代码。如果你将所有的初始化代码混合在一起并让它们大部分静默失败，因为它实际上是用于其他页面，你可以快速创建一个大混乱，在一个大型站点中，你可以在运行所有这些初始化函数时获得相当大的性能并寻找不存在的DOM对象。
如果正在运行的唯一初始化函数是应该工作的初始化函数，则调试要容易得多。
在一个可缓存的外部文件中使用外部JS，如果特定页面的初始化代码内嵌在实际网页中而不是在自己的外部JS中，则可以最小化需要加载的外部文件的数量文件。为了获得最快的感知页面显示性能，它应该是页面的所有HTML。

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

确保对外部JS文件进行适当的版本编号，因此当您修改它们时，文件名会发生变化，以便浏览器被强制获取新版本，并且不会卡在旧版本的缓存中。

Answer 2

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

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

关于id搜索的jQuery文档：

对于id选择器，jQuery使用JavaScript函数 document.getElementById（），这是非常有效的。

Answer 3

我的研究视角：

将所有函数放在一个加载一次的文件中 long expires headers。
我建议将所有j放在一个文件中（您可以使用if (location.pathname)仅在每个页面上运行一些。
使用评论并且可维护
如果你真的想要每页一些js ..仍然保留所有的功能1 js文件，但您可以使用不同的js来加载每个函数在每页的顶部....我猜

Answer 4

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

Answer 5

我建议你坚持每页实现，因为没有必要让代码在页面上不做任何事情但会消耗内存。你甚至可以渲染$（document）.ready（approPriatefunctionName）;从每个页面的服务器端，并确保在js中定义所需的函数，并在渲染此js脚本之前加载它们。

Answer 6

我认为您应该将所有功能存储在一个大文件中。这样更容易维护，并且在缩小时会很快加载。一旦将其存储在用户的缓存中，则每次都不会重新加载。

JQuery document.ready（）开销

6 个答案: