如何提高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 相关文章推荐
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
jQuery实现的进度条效果
Jul 15 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
vue + socket.io实现一个简易聊天室示例代码
Mar 06 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
vue与iframe之间的信息交互的实现
Apr 08 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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+mysql一个名片库程序
2006/10/09 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
jQuery插件passwordStrength密码强度指标详解
2016/06/24 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
JS实现吸顶特效
2020/01/08 Javascript
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
python魔法方法-属性访问控制详解
2016/07/25 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
在python中修改.properties文件的操作
2020/04/08 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
给学校建议书范文
2014/05/13 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2015大学生自我评价范文
2015/03/03 职场文书
python实现图片批量压缩
2021/04/24 Python
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server