如何提高Dom访问速度

网络编程 2025/1/13 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中，两个dll的交互是比较耗时的，优化对Dom的操作可以提高脚本的执行速度。下面是对如何优化的一些总结：

将需要多次操作的节点存储在一个变量中，避免多次获取。

对于大多数浏览器来说innerHTML操作比Dom操作速度要快，最新的浏览器则相反，但对于大多数日常操作来说具体差异并不大，另外，如果需要新创建的html片段中的脚本能够执行则需要使用Dom操作。

不建议用数组的 length 属性做循环判断条件。访问集合的 length 比数组的length 还要慢。当每次迭代过程访问集合的 length 属性时，它导致集合器更新。可以简单的将length保存在一个变量中，也可以将集合先存储在数组中。

遍历 children 比 childNodes 更快，因为集合项更少。

重绘和重排版是负担很重的操作，可能导致网页应用的用户界面失去相应。所以，十分有必要尽可能减少这类事情的发生。减少方法有三种，一：将需要影响的集合先隐藏，在处理完成后再展示；二：创建需操作节点的备份，对备份处理完成后替换原节点；三：创建节点群，对节点群操作完成后替换到原节点，最高效，操作方式如：

 var fragment = document.createDocumentFragment();//创建节点群，文档片段
 appendDataToElement(fragment, data);//增加节点到节点群
 document.getElementById('mylist').appendChild(fragment);//仅引发一次重新排版

另外对行内样式的操作可以通过document.getElementById("doc").style.cssText修改元素style属性

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

提高网站访问速度,提高网页访问速度

标签：

提高网站访问速度,提高网页访问速度

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“如何提高Dom访问速度”

暂无如何提高Dom访问速度的评论...

更新日志

2025年01月13日

如何提高Dom访问速度

提高网站访问速度,提高网页访问速度

JavaScript实现数组降维详解

AngularJS中run方法的巧妙运用

评论“如何提高Dom访问速度”

更新日志

友情链接