Jquery dom查找方法性能分析

最新推荐文章于 2023-05-14 10:57:27 发布

ganen_qian

最新推荐文章于 2023-05-14 10:57:27 发布

阅读量1.1k

点赞数

分类专栏： javascript jquery

本文链接：https://blog.csdn.net/nihaoma71121/article/details/51142371

版权

本文探讨了jQuery中DOM查找方法的性能，包括children()、next()、nextAll()、prev()、prevAll()、siblings()、closest()等，并通过实际代码测试了不同遍历方式在删除DOM并解除事件绑定时的效率。实验结果显示，使用变量暂存的方式性能最佳，而通过根节点使用find()方法通常表现良好。建议开发者深入理解各种方法以适应不同场景。

摘要由CSDN通过智能技术生成

每次要动笔写一篇文章时，才发现需要准备的很多很多，原本只想记录一个小点，但一要写文章就会发现能牵扯出一大面来，再次验证了：基础很重要！本文只记录笔者近期开发中遇到的jquery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。

jquery为遍历dom结点操作提供了丰富的方法：children()、next()、nextAll()、prev()、prevAll()、siblings()、closest()等，可自行搜索jquery之dom基础操作相关资料。因此，我们如果想要操作某一元素的父子及兄弟元素会有各种各样的渠道，笔者以自己在移除dom时，清除dom中所有绑定事件过程为例，验证几种dom遍历方法的性能情况，代码如下：

html：

<span style="font-size:14px;"><div class="conditionGroup">
    <div class="orDivOut">
	<div class="orDivBr"></div>
	<div class="orDiv orDivText">or</div>
    </div>
    <div class="ruleAddCondition">
	<input type="text" class="form-control valid appDll"/>	
	<div class="and-condition-parent">
         <div class="addConditionBr"></div>
         <div class="addInner">
         <div class="addDiv">and</div>
             <input type="text" class="form-control valid appSubDll" /> 
             <input type="text" class="form-control valid conditionalDll" /> 
             <input type="text" class="form-control valid valueTxt" />
           </div>
      </div>
    </div>
</div></span>