如何提高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 ajax提交表单数据的两种实现方法
Apr 29 Javascript
ExtJS4如何给同一个formpanel不同的url
May 02 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
Ionic如何实现下拉刷新与上拉加载功能
Jun 03 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
通过JavaScript下载文件到本地的方法(单文件)
Mar 17 Javascript
小程序实现层叠卡片滑动效果
Aug 26 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 float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php共享内存段示例分享
2014/01/20 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
vue实现文字加密功能
2019/09/27 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python中操作MySQL入门实例
2015/02/08 Python
python实现的jpg格式图片修复代码
2015/04/21 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
Python简单生成随机数的方法示例
2018/03/31 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python函数中不定长参数的写法
2019/02/13 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
Pytorch之finetune使用详解
2020/01/18 Python
如何使用python传入不确定个数参数
2020/02/18 Python
学会python自动收发邮件 代替你问候女友
2020/05/20 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
村班子对照检查材料
2014/08/18 职场文书
2015年个人思想总结
2015/03/09 职场文书
2015年体育部工作总结
2015/04/02 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
Go 语言中 20 个占位符的整理
2021/10/16 Golang
MySQL常用慢查询分析工具详解
2022/08/14 MySQL