如何提高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 相关文章推荐
JS 统计时间
Mar 09 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
Jul 11 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
基于JavaScript实现随机点名器
Feb 25 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
PHP4.04简明安装
2006/10/09 PHP
php 常用字符串函数总结
2008/03/15 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
理解js回收机制通俗易懂版
2016/02/29 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
2016/09/23 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
python实现用户管理系统
2018/01/10 Python
Python判断有效的数独算法示例
2019/02/23 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
python  ceiling divide 除法向上取整(或小数向上取整)的实例
2019/12/27 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
致跳远、跳高运动员广播稿
2014/01/09 职场文书
期末复习计划
2015/01/19 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
create-react-app开发常用配置教程
2022/06/25 Javascript