如何提高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 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
JS常用排序方法实例代码解析
Mar 03 Javascript
详解webpack-dev-middleware 源码解读
Mar 23 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 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
codeigniter中view通过循环显示数组数据的方法
2015/03/20 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
python2.7删除文件夹和删除文件代码实例
2013/12/18 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
基于python 字符编码的理解
2017/09/02 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
韩国商务邀请函
2014/01/14 职场文书
个人年终总结范文
2015/03/09 职场文书
倡议书格式及范文
2015/04/29 职场文书
成事在人观后感
2015/06/16 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Redis高并发缓存架构性能优化
2022/05/15 Redis