如何提高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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
JavaScript Distilled 基础知识与函数
Apr 07 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
vue内置指令详解
Apr 03 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 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中用数组的方法设置cookies
2011/04/21 PHP
使用PHP函数scandir排除特定目录
2014/06/12 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
关于laravel 子查询 & join的使用
2019/10/16 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
Nigma vs Alliance BO5 第三场2.14
2021/03/10 DOTA
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
Node.js模块加载详解
2014/08/16 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
JavaScript实现点击切换验证码及校验
2021/01/10 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
Windows下python2.7.8安装图文教程
2016/05/26 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
几款好用的python工具库(小结)
2020/10/20 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
Lucene推荐的分页方式是什么?
2015/12/07 面试题
教师演讲稿范文
2014/01/08 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS