DOM性能瓶颈与Javascript性能优化
这两天比较闲,写了两篇关于JS性能缺陷与解决方案的文章(《JS特性性能缺陷及JIT的解决方案》,《Javascript垃圾回收浅析》),主要描述了untyped,GC带来的问题与JIT引擎的解决方案。但相对于Js引擎的问题,我认为DOM导致的性能问题更值得关注。
一.Dom的性能瓶颈及原因
1. 为什么是DOM
标准的xml/html的文本解析协议,常见的有DOM与SAX。在解析速度及内存占用上,SAX比DOM有优势,但为什么浏览器选择DOM解析html?
(1)DOM VS SAX
SAX提供一次性解析文本,不生成对象,Iterator模式访问元素,event-based,PUSH模式触发,简单说:App需要向Parser注册,当Parser遍历xml时,触发调用APP 。想深入体验,用下javax.xml.parsers.SAXParser。这里说个题外话,改进版StAX是PULL模式,但这都不重要了,重要是:一次性文本解析,不生成对象。
DOM解析文本后,生成DOM树。即:一次性文本解析,生成对象。
(2)浏览器选择了DOM
单次效率DOM不如SAX,但SAX不生成对象,浏览器很多操作很难满足,比如:元素定位,元素样式渲染……所以DOM是必然之选。
2. DOM的性能问题
【1】核心问题
当解析的html文件很大时,生成DOM树占用内存较大,同时遍历(不更新)元素耗时也更长。但这都不是重点,DOM的核心问题是:DOM修改导致的页面重绘、重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨!
DOM操作会导致一系列的重绘(repaint)、重新排版(reflow)操作。为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的,这些浏览器将对对 DOM的操作放进一个队列,并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说,在JavaScript执行的过程,直到发生重新排版,用户一直被阻塞。
一般的浏览器中(不含IE),repaint的速度远快于reflow,所以避免reflow更重要。
导致repaint、reflow的操作:
* DOM元素的添加、修改(内容)、删除( Reflow + Repaint)
* 仅修改DOM元素的字体颜色(只有Repaint,因为不需要调整布局)
* 应用新的样式或者修改任何影响元素外观的属性
* Resize浏览器窗口、滚动页面
* 读取元素的某些属性(offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))
【2】其他
某些Javascript框架中,CSS选择器,如:var el = $('.hyddd');由于IE6、7不支持,所以Javascript框架必须通过遍历整个DOM树来寻找对象。
二. 针对DOM问题,Javascript的应对方案
1. 针对repaint、reflow,Nicholas 大叔在他的《Speed up your JavaScript, Part 4》做了详细介绍,这里我也整理一下:
解决问题的关键是:减少因DOM操作,引起的reflow。Nicholas总结了一些方法:
【1】在DOM外,执行尽量多的变更操作。Demo:

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


// 更好的做法
// 使用容器存放临时变更, 最后再一次性更新DOM
var fragment = document.createDocumentFragment();
for (var i=0; i < items.length; i++){
var item = document.createElement("li");
item.appendChild(document.createTextNode("Option " + i);
fragment.appendChild(item);
}
list.appendChild(fragment);

【2】操作DOM前,先把DOM节点删除或隐藏,因为隐藏的节点不会触发重排。Demo如下:

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

【3】一次性,修改样式属性。Demo如下:
// 不好的做法
// 这种做法会触发多次重排
element.style.backgroundColor = "blue";
element.style.color = "red";
element.style.fontSize = "12em";

// 更好的做法是,把样式都放在一个class下
.newStyle {
background-color: blue;
color: red;
font-size: 12em;
}
element.className = "newStyle";

【4】使用缓存,缓存临时节点。
// 不好的做法
document.getElementById("myDiv").style.left = document.getElementById("myDiv").offsetLeft +
document.getElementById("myDiv").offsetWidth + "px";
// 更好的做法
var myDiv = document.getElementById("myDiv");
myDiv.style.left = myDiv.offsetLeft + myDiv.offsetWidth + "px";
2. 针选择其的问题,我只能说:没办法…… : (
三. 参考资源
2. 《Speed up your JavaScript, Part 4》
DOM性能瓶颈与Javascript性能优化的更多相关文章
- JavaScript性能优化
如今主流浏览器都在比拼JavaScript引擎的执行速度,但最终都会达到一个理论极限,即无限接近编译后程序执行速度. 这种情况下决定程序速度的另一个重要因素就是代码本身. 在这里我们会分门别类的介绍J ...
- javascript性能优化-repaint和reflow
repaint(重绘) ,repaint发生更改时,元素的外观被改变,且在没有改变布局的情况下发生,如改变outline,visibility,background color,不会影响到dom结构渲 ...
- 摘:JavaScript性能优化小知识总结
原文地址:http://www.codeceo.com/article/javascript-performance-tips.html JavaScript的性能问题不容小觑,这就需要我们开发人员在 ...
- JavaScript性能优化小窍门汇总(含实例)
在众多语言中,JavaScript已经占有重要的一席之地,利用JavaScript我们可以做很多事情 , 应用广泛.在web应用项目中,需要大量JavaScript的代码,将来也会越来越多.但是由于J ...
- JavaScript性能优化小知识总结(转)
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 前言 一直在 ...
- 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- JavaScript性能优化篇js优化
JavaScript性能优化篇js优化 随着Ajax越来越普遍,Ajax引用的规模越来越大,Javascript代码的性能越来越显得重要,我想这就是一个很典型的例子,上面那段代码因为会被频繁使用, ...
- Javascript 性能优化的一点技巧
把优秀的编程方式当成一种习惯,融入到日常的编程当中.下图是今天想到的一点Javascript 性能优化的技巧,分享一下,抛砖引玉.
- 高频dom操作和页面性能优化(转载)
作者:gxt19940130 原文:https://feclub.cn/post/content/dom 一.DOM操作影响页面性能的核心问题 通过js操作DOM的代价很高,影响页面性能的主要问题有如 ...
随机推荐
- nuget的搭建及多源冲突
为什么使用nuget来管理类库引用就不再阐述,好处真的一抓一把.在使用nuget的时候,我们如果总去访问别人的nuget源,受限于网络情况的好坏,速度真的没法保证,更别说访问国外的源了.那好,我们来自 ...
- awk命令详解
搜索 纠正错误 添加实例 awk 文本和数据进行处理的编程语言 补充说明 awk 是一种编程语言,用于在linux/unix下对文本和数据进行处理.数据可以来自标准输入(stdin).一个或多个文件 ...
- Android实现双击事件的两种方式
Work around的方法是先监听onTouch事件来监听连续点击次数,每次点击都布置一个间隔时间的延时任务,延时任务执行时判断间隔内是否还有点击,如果没有则发布点击次数,重置计数. 实现代码如下: ...
- 使用ndk编译c可执行程序
1.创建工程目录 在ubuntu系统下搭建好ndk编译环境,创建test目录 mkdir test 在test目录下创建jni目录 cd test mkdir jni 2.编写源代码 vim hel ...
- Xcode 属性面板添加自定义控件属性
让自定义控件像原生控件一样可以在属性面板配置参数,Apple文档传送 直接上效果图,根据
- eclipse逐步调试
Eclipse 的单步调试 1.设置断点在程序里面放置一个断点,也就是双击需要放置断点的程序左边的栏目上.2.调试(1)点击"打开透视图"按钮,选择调试透视图,则打开调试透视图界面 ...
- WAMP错误提示:HTTP Error 404.The requested resource is not found
原因: 本地80端口被占用,需要修改WAMP的默认端口 修改设置: 找到 bin/apache/apache***/conf/httpd.conf文件 将文件中的80修改为8088 (注:修改三个位置 ...
- win7系统下的飞秋发送文件失败问题
飞秋发送文件失败这个问题大多数是由防火墙引起的1.检查windows自带的防火墙设置,在左侧的"允许程序通过windows防火墙"查看飞秋是否存在,不存在则增加之,公网.专网都勾选 ...
- java 深入技术八(内省)
1. javabean的软件设计思想 2.内省:封装了java反射,提供直接操作属性的Setter和getter方法的方法 3.核心API:BeanInfo java 的描述信息,Introspect ...
- ztree-demo
<!DOCTYPE html><HTML><HEAD> <TITLE> ZTREE DEMO - Async</TITLE> <met ...