如何提高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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
JavaScript对象学习小结
Sep 02 Javascript
require.js的用法详解
Oct 20 Javascript
继续学习javascript闭包
Dec 03 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
个人站长制做网页常用的php代码
2007/03/03 PHP
php数据访问之增删改查操作
2016/05/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
javascript奇异的arguments分析
2010/10/20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
python实现决策树分类算法
2017/12/21 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
python实现最大优先队列
2019/08/29 Python
python实现的发邮件功能示例
2019/09/11 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
超市重阳节活动方案
2014/02/10 职场文书
《石榴》教学反思
2014/03/02 职场文书
关于责任的演讲稿
2014/05/20 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
实习计划书范文
2015/01/16 职场文书
介绍信如何写
2015/01/31 职场文书
倡议书的格式写法
2015/04/28 职场文书
党支部鉴定意见
2015/06/02 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python