如何提高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 相关文章推荐
javascript 操作Word和Excel的实现代码
Oct 26 Javascript
Jquery 滑入滑出效果实现代码
Mar 27 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
VUE实现一个分页组件的示例
Sep 13 Javascript
微信小程序canvas实现刮刮乐效果
Jul 09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
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
php抓取https的内容的代码
2010/04/06 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
几个javascript操作word的参考代码
2009/10/26 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
2016/04/14 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
nodejs 的 session 简单使用
2016/06/06 NodeJs
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
图文讲解vue的v-if使用方法
2019/02/11 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
js实现扫雷源代码
2020/11/27 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python简单实现基于SSL的IRC bot实例
2015/06/15 Python
Python列表对象实现原理详解
2019/07/01 Python
Python银行系统实战源码
2019/10/25 Python
用python写爬虫简单吗
2020/07/28 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
大学军训感言300字
2014/03/09 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
民间借贷被告代理词
2015/05/23 职场文书
用React Native制作一个简单的游戏引擎
2021/05/27 Javascript