如何提高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 相关文章推荐
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
了解JavaScript中的选择器
May 24 Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 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 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
js parsefloat parseint 转换函数
2010/01/21 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JS解析XML实例分析
2015/01/30 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
jQuery实现增删改查
2020/12/22 jQuery
详细解读Python中的__init__()方法
2015/05/02 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
python处理写入数据代码讲解
2020/10/22 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
群众路线教育党课主持词
2014/04/01 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
机器人瓦力观后感
2015/06/12 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
Python进程池与进程锁之语法学习
2022/04/11 Python
mysql数据库如何转移到oracle
2022/12/24 MySQL