如何提高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 相关文章推荐
jQuery on()方法使用技巧详解
Apr 16 Javascript
被遗忘的javascript的slice() 方法
Apr 20 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
JavaScript String 对象常用方法总结
Apr 28 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
Vue动态获取width的方法
Aug 22 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
JavaScript中的this妙用实例分析
May 09 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
php mysql索引问题
2008/06/07 PHP
PHP伪静态页面函数附使用方法
2008/06/20 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
jquery插件制作 图片走廊 gallery
2012/08/17 Javascript
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
前端性能优化建议
2020/09/17 Javascript
Django框架中的对象列表视图使用示例
2015/07/21 Python
SQLite3中文编码 Python的实现
2017/01/11 Python
Python基于win32ui模块创建弹出式菜单示例
2018/05/09 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
软件测试英文面试题
2012/10/14 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
情人节活动总结范文
2015/02/05 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
门面租赁合同范文
2019/08/06 职场文书