为不同页面包含特定jQuery选择器的最佳方法_Jquery_Performance

为不同页面包含特定jQuery选择器的最佳方法

jquery performance

为不同页面包含特定jQuery选择器的最佳方法,jquery,performance,Jquery,Performance,这是我们经常遇到的一个问题。考虑这个jQuery位： $(".tabs").remove(); 但是，如果在100个单独的页面中只有1个页面具有“tabs”类的元素，那么上面的内容就可以了，那么这样做是很遗憾的到目前为止，我们的解决方案是： if ($("body#library").length > 0) { $(".tabs").remove(); // More Library page specific code here } else if ($("body#

这是我们经常遇到的一个问题。考虑这个jQuery位：

$(".tabs").remove();

但是，如果在100个单独的页面中只有1个页面具有“tabs”类的元素，那么上面的内容就可以了，那么这样做是很遗憾的

到目前为止，我们的解决方案是：

if ($("body#library").length > 0) {
    $(".tabs").remove();
    // More Library page specific code here
} else if ($("body#links").length > 0) {
    // Links page specific code here
}

然后在所需页面上，我们将执行以下操作：

<body id="library">

我的想法是，对于jQuery来说，查找

$（“body#library”）

会很快。然后，我们可以给每个页面一个ID，并使用单个JavaScript文件为每个页面包含特定于页面的代码

我担心的是，这仍然不是很有效。另一个想法是为每个页面提供一个特定的JavaScript文件。但是，这将增加HTTP请求。我经常看到每页包含10个或更多JavaScript文件的网站，我认为这太重了。我们更喜欢单个站点范围的JavaScript文件，因为它更易于管理，并且意味着单个文件只需要请求（和缓存）一次

关于如何处理这个问题，还有其他想法吗？

我想这取决于用户打开多个不同页面的可能性

如果用户可能只加载库或链接页面，我将在所有页面中使用一个全局javascript文件，在每个页面上使用第二个全局javascript文件，其中只包含特定页面所需的代码
但是，如果用户可能会打开许多/大部分页面，我会将其放在一个大文件中，以某种方式确定需要运行哪些代码（例如，在主体上有一个ID）
此外，如果从选择器中删除标记名，则速度会更快，因为它可以直接使用本机的
getElementById（）
函数。（
$（“#库”）
而不是
$（“body#库”）
）

请看我的设置。
我想您可以为不同的页面设置单独的加载函数（全部在一个js文件中定义），然后准备一个文档，在页面中内联调用相应的函数（取决于哪个页面）。但实际上，我认为您现有的解决方案应该具有良好的性能（至少在这方面——我当然没有看到其余的代码！）您不需要额外的js文件。只需在内联脚本中放入如此短的特定于站点的代码段！上面的例子只是基本的，IF块中可能有很多特定于页面的代码——太多了，无法内联