如何提高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小技巧 2.5 则
Sep 12 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
node.js中的socket.io的广播消息
Dec 15 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
微信小程序入门之广告条实现方法示例
Dec 05 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
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中使用sftp教程
2015/03/30 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
JS实现前端页面的搜索功能
2018/06/12 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
Python验证码识别的方法
2015/07/10 Python
python实现对excel进行数据剔除操作实例
2017/12/07 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
美国第一香水网站:Perfume.com
2017/01/23 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
Java面向对象面试题
2016/12/26 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
如何写好升职自荐信
2014/01/06 职场文书
股份合作协议书
2014/04/12 职场文书
销售员岗位职责
2014/06/09 职场文书
党委班子对照检查材料
2014/08/19 职场文书
无私奉献演讲稿
2014/09/04 职场文书
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers