为什么操作dom会消耗性能

因为对DOM的修改为影响网页的用户界面，重绘页面是一项昂贵的操作。太多的JavaScript DOM操作会导致一系列的重绘操作，为了确保执行结果的准确性，所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流（reflow），同时这也是最昂贵的浏览器操作之一，回流操作主要会发生在几种情况下：当对DOM节点执行新增或者删除操作时。动态设置一个样式时（比如element.style.width=”10px”）。当获取一个必须经过计算的尺寸值时，比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值（在兼容DOM的浏览器中，可以通过getComputedStyle函数获取；在IE中，可以通过currentStyle属性获取）。

解决问题的关键，就是限制通过JavaScript DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的，这些浏览器将对对DOM的操作放进一个队列，并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说，在JavaScript执行的过程中，用户不能和浏览器进行互动，直到一个回流操作被执行。（失控脚本对话框会触发回流操作，因为他执行了一个中止JavaScript执行的操作，此时会对用户界面进行更新）如果要减少由于DOM修改带来的回流操作，有两个基本的方法。第一个就是在对当前DOM进行操作之前，尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点：

for(var i = 0;i < items.length;i++){
var item=document.createElement("li");
item.appendChild(document.createTextNode("Option"+i);
list.appendChild(item);
}

这段代码的效率是很低的，因为他在每次循环中都会修改当前DOM结构。为了提高性能，我们需要将这个次数降到最低，对于这个案例来说，最好的办法是建立一个文档碎片（documentfragment），作为那些已创建元素元素的临时容器，最后一次将容器的内容直接添加到父节点中：

var fragment = document.createDocumentFragment();
for(vari=0;i < items.length;i++){
var item=document.createElement("li");
item.appendChild(document.createTextNode("Option"+i);
fragment.appendChild(item);
}
list.appendChild(fragment);

转载于:https://www.cnblogs.com/jiahuasir/p/10266932.html

为什么操作dom会消耗性能相关推荐

php 频繁dom和文件,性能优化之为什么不要频繁操作DOM
性能优化:为什么不要频繁操作DOM @[toc] 性能优化的时候,我们常说"不要频繁操作DOM",但是"DOM 为什么这么慢"以及"如何使 DOM 变 ...
JavaScript DOM操作为什么会影响性能
DOM操作影响性能的原因主要有以下两点: 在浏览器中,DOM的实现和ECMAScript的实现是分离的.比如在Chrome中使用WebKit中的WebCore处理DOM和渲染,但ECMAScript是 ...
从DOM到虚拟DOM——前端DOM发展史、性能与产能双赢背后的思考
写在前面的一些话从我上大学开始正式认识前端这个岗位到现在已经整整过了六年,这六年于我而言就像是观赏了一场盛大的游园活动.无数各式各样的框架.模式.开发思路如同花车一般从眼前掠过又走远.留下了一地残乱 ...
Javascript操作DOM常用API总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前, ...
[react] 为何说虚拟DOM会提高性能？
[react] 为何说虚拟DOM会提高性能? 虚拟dom相当于在js和真实dom中间加了一个缓存,利用dom diff算法避免了没有必要的dom操作,从而提高性能个人简介我是歌谣,欢迎和大家一起交 ...
【repost】Javascript操作DOM常用API总结
Javascript操作DOM常用API总结文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
前端为什么操作DOM的成本是昂贵的
引起成本增加的主要原因:重绘和重排(回流) 重排(回流):渲染树(render tree)的元素的内容.结构.位置或尺寸发生了变化,需要重新计算样式和渲染树重绘 :节点的一些样式(背景色,边框颜色, ...
读Zepto源码之操作DOM
2019独角兽企业重金招聘Python工程师标准>>> 这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎sta ...

为什么操作dom会消耗性能

为什么操作dom会消耗性能相关推荐

最新文章

热门文章