如何提高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 attachEvent和addEventListener使用方法
Mar 19 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
javascript向后台传送相同属性的参数即数组参数
Feb 17 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
jQuery层级选择器实例代码
Feb 06 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
Jul 19 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 Javascript
Vue slot用法(小结)
Oct 22 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 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 批量生成html,txt文件的实现代码
2013/06/26 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
React组件的三种写法总结
2017/01/12 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
Python hashlib模块用法实例分析
2018/06/12 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
学习python分支结构
2019/05/17 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
给男朋友的道歉信
2014/01/12 职场文书
教师校本培训方案
2014/02/26 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸
python运算符之与用户交互
2022/04/13 Python