如何提高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 相关文章推荐
3款实用的在线JS代码工具(国外)
Mar 15 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
JS延迟加载加快页面打开速度示例代码
Dec 30 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
js实现验证码干扰(动态)
Feb 23 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和javascript常用正则表达式及用法实例
2014/07/01 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
jQuery实现简单的手风琴效果
2020/04/17 jQuery
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
详解Python中的分支和循环结构
2020/02/11 Python
Python新手学习raise用法
2020/06/03 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
HTML5新标签兼容——> 的两种方法
2018/09/12 HTML / CSS
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
家教广告词
2014/03/19 职场文书
2014年保卫工作总结
2014/12/05 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
基石观后感
2015/06/12 职场文书
2019财务转正述职报告
2019/06/27 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
带你学习MySQL执行计划
2021/05/31 MySQL
python_tkinter弹出对话框创建
2022/03/20 Python