如何提高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 相关文章推荐
页面中body onload 和 window.onload 冲突的问题的解决
Jul 01 Javascript
Javascript 面向对象之重载
May 04 Javascript
js函数调用常用方法详解
Dec 03 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
学习jQuey中的return false
Dec 18 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
一个简洁的多级别论坛
2006/10/09 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
WordPress中Gravatar头像缓存到本地及相关优化的技巧
2015/12/19 PHP
Thinkphp3.2.3整合phpqrcode生成带logo的二维码
2016/07/21 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
基于NodeJS的前后端分离的思考与实践(一)全栈式开发
2014/09/26 NodeJs
node.js超时timeout详解
2014/11/26 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
2015/02/28 Javascript
Javascript中replace()小结
2015/09/30 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
2017/07/04 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python迭代用法实例教程
2014/09/08 Python
Python中设置变量访问权限的方法
2015/04/27 Python
python中zip()方法应用实例分析
2016/04/16 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
Python IDLE入门简介
2017/12/08 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
C语言开发工程师测试题
2016/12/20 面试题
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
中青班党性分析材料
2014/02/16 职场文书
文明班集体申报材料
2014/05/23 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书