开发者社区> 长征2号> 正文

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. 针选择其的问题,我只能说:没办法…… : (

 

三. 参考资源

1.《Web 2.0应用客户端性能问题十大根源

2. 《Speed up your JavaScript, Part 4



本文转自hyddd博客园博客,原文链接:http://www.cnblogs.com/hyddd/archive/2013/02/07/2908960.html,如需转载请自行联系原作者。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14281 0
优化婚恋app源码性能,首先要找到性能瓶颈
如果婚恋app源码它可以承受百万级别的并发量,但是系统延迟高达十几秒,那它的性能还需要进行优化,同样的,如果系统延迟很低但是不能承受高并发,这对系统来说也没有意义。
24 0
Chrome性能专家Addy Osmani教你优化JavaScript
不确定 JavaScript 的开销对你的用户体验影响是否太大了?
454 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29201 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
20714 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
23588 0
JavaScript是如何工作的:渲染引擎和优化其性能的技巧
摘要: 理解浏览器渲染。 原文:JavaScript是如何工作的:渲染引擎和优化其性能的技巧 作者:前端小智 Fundebug经授权转载,版权归原作者所有。 这是专门探索 JavaScript 及其所构建的组件的系列文章的第11篇。
1928 0
+关注
1703
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载