如何提高Dom访问速度


Posted in Javascript onJanuary 05, 2017

在浏览器中对于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属性

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
Jan 27 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
AngularJS中run方法的巧妙运用
Jan 04 #Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 #Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 #Javascript
基于jQuery实现选项卡效果
Jan 04 #Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 #Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 #Javascript
jQuery实现联动下拉列表查询框
Jan 04 #Javascript
You might like
php检测图片木马多进制编程实践
2013/04/11 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
可插入图片的TEXT文本框
2013/12/27 Javascript
jQuery Select下拉框操作小结(推荐)
2016/07/22 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
node.js的事件机制
2017/02/08 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
c++生成dll使用python调用dll的方法
2014/01/20 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
Tensorflow加载预训练模型和保存模型的实例
2018/07/27 Python
Python global全局变量函数详解
2018/09/18 Python
selenium+python自动化测试之鼠标和键盘事件
2019/01/23 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python实现根据给定坐标点生成多边形mask的例子
2020/02/18 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
使用python计算三角形的斜边例子
2020/04/15 Python
django创建css文件夹的具体方法
2020/07/31 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
实习生自我评价
2014/01/18 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
警察群众路线整改措施
2014/09/26 职场文书
领导干部学习心得体会
2016/01/23 职场文书
2016年社区综治宣传月活动总结
2016/03/16 职场文书