关键词：
【中文标题】如何优化 jQuery tag:contains() 选择器？【英文标题】：How to optimize jQuery tag:contains() selector? 【发布时间】：2020-06-21 17:36:15 【问题描述】：我正在尝试从包含给定单词集的网页中提取所有元素。例如。鉴于我有一个随机单词数组
words = ["sky", "element", "dry", "smooth", "java", "running", "illness", "lake", "soothing", "cardio", "gymnastic"]
并假设它们都存在于 DOM 中。这意味着我需要检查每个可能的标签是否存在。以下是我正在搜索的标签。
// 14 essential tags
items = ["p", "li", "h2", "h3", "h4", "h5", "h6", "b", "small", "td", "span", "strong", "blockquote", "div"]
我还需要确保单词的空白边界。因此，对于每个单词，我需要在 jquery contains() 选择器中定义 3 个检查，如下所示。
tagName:contains('sky '), tagName:contains(' sky'), tagName:contains(' sky ')`
因此，上述场景的最终查询总共使words.length * items.length * 3 14*11*3 = 462 个选择器。这本身就是一个大型查询，随着单词数组开始增长，我的查询如下所示。
$(p:icontains('ACCESSIBLE '), p:icontains(' ACCESSIBLE'), p:icontains(' ACCESSIBLE '), li:icontains('ACCESSIBLE '), li:icontains(' ACCESSIBLE'), li:icontains(' ACCESSIBLE '), h3:icontains('ACCESSIBLE '), h3:icontains(' ACCESSIBLE'), h3:icontains(' ACCESSIBLE '), h4:icontains('ACCESSIBLE '), h4:icontains(' ACCESSIBLE'), h4:icontains(' ACCESSIBLE '), h5:icontains('ACCESSIBLE '), h5:icontains(' ACCESSIBLE'), h5:icontains(' ACCESSIBLE '), b:icontains('ACCESSIBLE '), b:icontains(' ACCESSIBLE'), b:icontains(' ACCESSIBLE '), td:icontains('ACCESSIBLE '), td:icontains(' ACCESSIBLE'), td:icontains(' ACCESSIBLE '), span:icontains('ACCESSIBLE '), span:icontains(' ACCESSIBLE'), span:icontains(' ACCESSIBLE '), strong:icontains('ACCESSIBLE '), strong:icontains(' ACCESSIBLE'), strong:icontains(' ACCESSIBLE '), div:icontains('ACCESSIBLE '), div:icontains(' ACCESSIBLE'), div:icontains(' ACCESSIBLE ')p:icontains('ADDRESS '), p:icontains(' ADDRESS'), p:icontains(' ADDRESS '), li:icontains('ADDRESS '), li:icontains(' ADDRESS'), li:icontains(' ADDRESS '), h3:icontains('ADDRESS '), h3:icontains(' ADDRESS'), h3:icontains(' ADDRESS '), h4:icontains('ADDRESS '), h4:icontains(' ADDRESS'), h4:icontains(' ADDRESS '), h5:icontains('ADDRESS '), h5:icontains(' ADDRESS'), h5:icontains(' ADDRESS '), b:icontains('ADDRESS '), b:icontains(' ADDRESS'), b:icontains(' ADDRESS '), td:icontains('ADDRESS '), td:icontains(' ADDRESS'), td:icontains(' ADDRESS '), span:icontains('ADDRESS '), span:icontains(' ADDRESS'), span:icontains(' ADDRESS '), strong:icontains('ADDRESS '), strong:icontains(' ADDRESS'), strong:icontains(' ADDRESS '), div:icontains('ADDRESS '), div:icontains(' ADDRESS'), div:icontains(' ADDRESS ')p:icontains('ANTIEMETICS '), p:icontains(' ANTIEMETICS'), p:icontains(' ANTIEMETICS '), li:icontains('ANTIEMETICS '), li:icontains(' ANTIEMETICS'), li:icontains(' ANTIEMETICS '), h3:icontains('ANTIEMETICS '), h3:icontains(' ANTIEMETICS'), h3:icontains(' ANTIEMETICS '), h4:icontains('ANTIEMETICS '), h4:icontains(' ANTIEMETICS'), h4:icontains(' ANTIEMETICS '), h5:icontains('ANTIEMETICS '), h5:icontains(' ANTIEMETICS'), h5:icontains(' ANTIEMETICS '), b:icontains('ANTIEMETICS '), b:icontains(' ANTIEMETICS'), b:icontains(' ANTIEMETICS '), td:icontains('ANTIEMETICS '), td:icontains(' ANTIEMETICS'), td:icontains(' ANTIEMETICS '), span:icontains('ANTIEMETICS '), span:icontains(' ANTIEMETICS'), span:icontains(' ANTIEMETICS '), strong:icontains('ANTIEMETICS '), strong:icontains(' ANTIEMETICS'), strong:icontains(' ANTIEMETICS '), div:icontains('ANTIEMETICS '), div:icontains(' ANTIEMETICS'), div:icontains(' ANTIEMETICS ')p:icontains('BRAND '), p:icontains(' BRAND'), p:icontains(' BRAND '), li:icontains('BRAND '), li:icontains(' BRAND'), li:icontains(' BRAND '), h3:icontains('BRAND '), h3:icontains(' BRAND'), h3:icontains(' BRAND '), h4:icontains('BRAND '), h4:icontains(' BRAND'), h4:icontains(' BRAND '), h5:icontains('BRAND '), h5:icontains(' BRAND'), h5:icontains(' BRAND '), b:icontains('BRAND '), b:icontains(' BRAND'), b:icontains(' BRAND '), td:icontains('BRAND '), td:icontains(' BRAND'), td:icontains(' BRAND '), span:icontains('BRAND '), span:icontains(' BRAND'), span:icontains(' BRAND '), strong:icontains('BRAND '), strong:icontains(' BRAND'), strong:icontains(' BRAND '), div:icontains('BRAND '), div:icontains(' BRAND'), div:icontains(' BRAND ')p:icontains('CAPABLE '), p:icontains(' CAPABLE'), p:icontains(' CAPABLE '), li:icontains('CAPABLE '), li:icontains(' CAPABLE'), li:icontains(' CAPABLE '), h3:icontains('CAPABLE '), h3:icontains(' CAPABLE'), h3:icontains(' CAPABLE '), h4:icontains('CAPABLE '), h4:icontains(' CAPABLE'), h4:icontains(' CAPABLE '), h5:icontains('CAPABLE '), h5:icontains(' CAPABLE'), h5:icontains(' CAPABLE '), b:icontains('CAPABLE '), b:icontains(' CAPABLE'), b:icontains(' CAPABLE '), td:icontains('CAPABLE '), td:icontains(' CAPABLE'), td:icontains(' CAPABLE '), span:icontains('CAPABLE '), span:icontains(' CAPABLE'), span:icontains(' CAPABLE '), strong:icontains('CAPABLE '), strong:icontains(' CAPABLE'), strong:icontains(' CAPABLE '), div:icontains('CAPABLE '), div:icontains(' CAPABLE'), div:icontains(' CAPABLE ')p:icontains('COMMAND '), p:icontains(' COMMAND'), p:icontains(' COMMAND '), li:icontains('COMMAND '), li:icontains(' COMMAND'), li:icontains(' COMMAND '), h3:icontains('COMMAND '), h3:icontains(' COMMAND'), h3:icontains(' COMMAND '), h4:icontains('COMMAND '), h4:icontains(' COMMAND'), h4:icontains(' COMMAND '), h5:icontains('COMMAND '), h5:icontains(' COMMAND'), h5:icontains(' COMMAND '), b:icontains('COMMAND '), b:icontains(' COMMAND'), b:icontains(' COMMAND '), td:icontains('COMMAND '), td:icontains(' COMMAND'), td:icontains(' COMMAND '), span:icontains('COMMAND '), span:icontains(' COMMAND'), span:icontains(' COMMAND '), strong:icontains('COMMAND '), strong:icontains(' COMMAND'), strong:icontains(' COMMAND '), div:icontains('COMMAND '), div:icontains(' COMMAND'), div:icontains(' COMMAND ')p:icontains('CONFLUENCE ') ....
一个包含 87Kb 选择器的查询，在一个页面上执行大约需要 30-40 秒。有没有办法优化它。在进行查询之前，我已经消除了页面中不存在的标签。
编辑：我不能用正则表达式进行整页文本解析的原因是我需要在解析后用一些 HTML 替换那些匹配的单词，这类似于通过在页面上注入一些 HTML 来突出显示这些单词。如果我执行正则表达式，我将失去对 HTML 元素及其位置的控制。正则表达式替换也不能保证文本节点。它还替换标题属性和其他属性（如果存在）中写入的单词。
【问题讨论】：
我相信这个问题更适合codereview.stackexchange.com 最有可能更好的问题是为什么你需要这样的东西。对我来说，这似乎是早期阶段的设计错误。 @Sirko 帮我解决这个问题。我没有得到更好的主意。我需要在解析后用一些 HTML 替换那些匹配的单词，这类似于通过在它们的位置注入一些 HTML 来突出显示页面上的这些单词。如果你知道的话，给我建议一个更好的解决方法.. @Sirko 请检查编辑了解更多详情 【参考方案1】：相反，为什么不直接使用整个页面 html，并针对单词数组使用正则表达式？
测试 HTML：
<div id='container'>
<p>Chess</p>
<span>Chess and Checkers</span>
<h1> Chess and Checkers</h1>
</div>
Javascript：
$("document").ready(function()
var html = $("#container").html();
var words = ["Chess", "checkers"];
$.each(words, function()
var phrase = this;
html = html.replace(new RegExp(phrase, "gim"), "foo");
);
$("#container").html(html);
);
输出：
富
富和富foo 和 foo
【讨论】：
这在我的情况下不起作用。由于我需要在解析后用一些 HTML 替换那些匹配的单词，这类似于通过在它们的位置注入一些 HTML 来突出显示页面上的这些单词。通过执行正则表达式，我无法将元素放在它们的确切位置。正则表达式有很多问题，因为它还替换了我不想要的标题属性中写的单词。 我不需要替换属性内写的单词的原因是，我需要用 HTML 替换。将 HTML 元素代替 title 属性中的单词会破坏整个元素。例如。<div title="this is WORD"> This is word</div> 变成 <div title="this is <span>replacement</span>">This is <span> replacement</span> </div> 没有意义。如何使用 jQuery 日期选择器优化引导输入标签
】如何使用jQuery日期选择器优化引导输入标签【英文标题】：HowtooptimizeBootstrapInputTagsWithajQueryDatepicker【发布时间】：2019-03-1422:07:34【问题描述】：我已经实现了一个日期选择器。这样当我从日期选择器中选择一年时，选定的年... 查看详情
如何使用 rails 和 jquery 优化 ajax 搜索
】如何使用rails和jquery优化ajax搜索【英文标题】：Howtooptimizeajaxsearchusingrailsandjquery【发布时间】：2021-07-0120:11:52【问题描述】：我有一个包含150条记录的用户表，在页面加载时，它会加载前10条记录，并在滚动时不断显示新记录... 查看详情
如何优化 jquery 数据表以有效加载大数据（10k-50k 行）？
】如何优化jquery数据表以有效加载大数据（10k-50k行）？【英文标题】：Howtooptimizejquerydatatabletoloadlargedataefficiently(10k-50krows)?【发布时间】：2014-11-2101:08:57【问题描述】：我正在使用配置最少的jquery数据表在我的网站上展示数据。... 查看详情
js、jquery如何隐藏浏览器地址栏（网页优化，手机可以，ipadmini不可以，求大神指教）
<metaname="apple-mobile-web-app-capable"content="yes"/>方法1不行if(document.documentElement.scrollHeight<=document.documentElement.clientHeight)方法2不行bodyTag=document.getElementsByTagName('body')[0];bodyTag.style.height=document.documentElement.clientW... 查看详情
前端性能优化：jquery性能优化
...Query的each循环比原生的for循环性能相差几十倍。前端性能优化：循环优化2尽量使用ID，类型，类选择器，避免使用属性选择器 尽量使用ID，类，类型选择器，避免属性选择器。I 查看详情
优化jquery选择器
优化jQuery选择器选择优化比以前更加重要，因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任。记住这些小技巧可以让你轻松突破学习选择器时的瓶颈。jQuery扩展如果可能的话，避免使用jQuery... 查看详情
jquery性能优化
jquery性能优化 作为一个刚毕业的小白，刚刚工作了一段时间，因为工作地域的原因又开始使用jquery了，工作中遇到了一些性能优化的问题，所以特意总结下来，作为我的第一篇博客小小留个念想的。 1.选择合适... 查看详情
优化 jQuery 中的 DOM 选择
】优化jQuery中的DOM选择【英文标题】：OptimizeDOMselectioninjQuery【发布时间】：2014-08-1214:33:18【问题描述】：这是一个完整的DEMO我是JavaScript/jQuery插件的新手。如何为以下脚本创建jQuery插件，DOM选择可以更加优化。varoption="N":"None","F... 查看详情
前端性能优化jquery性能优化
一、使用合适的选择器$("#id");1.使用id来定位DOM元素无疑是最佳提高性能的方式，因为jQuery底层将直接调用本地方法document.getElementById();如果这个方式不能直接找到你需要的元素，那么你可以考虑调用find()方法，代码如下：$("#domo"... 查看详情
jquery性能优化的十种方法
jquery性能优化的十种方法有时候我们在书写jquery的时候，为了书写代码方便，往往忽略了程序执行过程中，给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢，甚至无法运行等问题。因此我们... 查看详情
jquery性能优化
上周，我整理了《jQuery设计思想》。那篇文章是一篇入门教程，从设计思想的角度，讲解"怎么使用jQuery"。今天的文章则是更进一步，讲解"如何用好jQuery"。我主要参考了AddyOsmani的PPT《提高jQuery性能的诀窍》（jQueryProvenPerformanceTi... 查看详情
为 IE 优化 jQuery
】为IE优化jQuery【英文标题】：optimizationjQueryforIE【发布时间】：2011-12-1814:06:05【问题描述】：我有功能：functiondoBlamingItem($cell,showEditMark)$cell.hover(function()$cell.toggleClass(\'clickable-cell\',showEditMark).toggleClass(\'editing-cell\ 查看详情
jquery面试题汇总
...ff1f;[jQuery]JQuery一个对象可以同时绑定多个事件，这是如何实现的？[jQuery]jQuery中如何将数组转化为json字符串，然后再转化回来？[jQuery]jQueryUI怎样自定义组件？[jQuery]Zepto的点透问题如何解决？[jQuery]jQuery和Z... 查看详情
jQuery 优化/最佳实践
】jQuery优化/最佳实践【英文标题】：jQueryOptimization/BestPractices【发布时间】：2011-03-1422:18:36【问题描述】：好的，给牛仔装上鞍，因为这将是一个很长的时间。我整个上午都在浏览我的一些旧代码，我想知道最佳实践和优化。为... 查看详情
优化 JavaScript CSS 下载
...录期间下载整个用户会话所需的所有JavaScript和CSS文件。如何才能做到这一点？所有页面的标题都相同。如何优化？【 查看详情
jQuery 选择器优化
】jQuery选择器优化【英文标题】：jQueryselectoroptimization【发布时间】：2011-08-2701:53:58【问题描述】：在选择器的右侧要具体，在左侧不太具体。//unoptimized$(\'div.data.gonzalez\');//optimized$(\'.datatd.gonzalez\');QuoteSource有人能解释一下为什... 查看详情
优化加载jquery的方法
请看下面的一段代码:1<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>2<scripttype="text/javascript">3window.jQuery||document.write("<scriptsrc=‘__ADMIN 查看详情
jQuery 优化多个选择器
】jQuery优化多个选择器【英文标题】：jQueryOptimisationMultipleSelectors【发布时间】：2011-11-1819:25:37【问题描述】：在我的脚本顶部我有两个变量持有两个选择器：varall_open=$(\'ul#festival_datesli.controlsa:eq(0)\');varall_close=$(\'ul#festival_datesli... 查看详情