- 浏览: 796938 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
yuhanwm910731:
我现在需要实现复选(非级联选择)的树形下拉菜单,麻烦发给我一份 ...
extjs3.X支持树型的下拉控件 -
shine1200:
“所以咱们现在设置的虚拟路径“/message/upload/ ...
weblogic虚拟路径的配置和使用(2) -
icefireforest:
Fangrn 写道jx_dream 写道楼主,我最近在做树形下 ...
extjs3.X支持树型的下拉控件 -
cloudfile:
谢谢分享!
c++库c#调用开发时需要注意的一点 -
xuweilinbegin:
我也要一份哦:xuweilin15353@163.com,谢谢 ...
extjs3.X支持树型的下拉控件
页面呈现流程
注:从上面可以看出,回流必将引起重绘,而重绘不一定会引起回流。
什么操作会引起重绘、回流
让我们看看下面的代码是如何影响回流和重绘的:
s.padding = " 2px " ; // 回流+重绘
s.border = " 1px solid red " ; // 再一次 回流+重绘
s.color = " blue " ; // 再一次重绘
s.backgroundColor = " #ccc " ; // 再一次 重绘
s.fontSize = " 14px " ; // 再一次 回流+重绘
// 添加node,再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc ! '));
请注意我上面用了多少个再一次。
从上个实例代码中可以看到几行简单的JS代码就引起了6次左右的回流、重绘。而且我们也知道回流的花销也不小,如果每句JS操作都去回流重绘的话,浏览器 可能就会受不了。所以很多浏览器都会优化这些操作,浏览器会维护1个队列,把所有会引起回流、重绘的操作放入这个队列,等队列中的操作到了一定的数量或者 到了一定的时间间隔,浏览器就会把flush队列,进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。
虽然有了浏览器的优化,但有时候我们写的一些代码可能会强制浏览器提前flush队列,这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候,就会让浏览器flush队列,比如:
1. offsetTop, offsetLeft, offsetWidth, offsetHeight
2. scrollTop/Left/Width/Height
3. clientTop/Left/Width/Height
4. width,height
5. 请求了getComputedStyle(), 或者 ie的 currentStyle
当你请求上面的一些属性的时候,浏览器为了给你最精确的值,需要flush队列,因为队列中可能会有影响到这些值的操作。
如何减少回流、重绘
减少回流、重绘其实就是需要减少对render tree的操作,并减少对一些style信息的请求,尽量利用好浏览器的优化策略。具体方法有:
1. 不要1个1个改变元素的样式属性,最好直接改变className,但className是预先定义好的样式,不是动态的,如果你要动态改变一些样式,则 使用cssText来改变,见下面代码:
var left = 1 ;
var top = 1 ;
el.style.left = left + " px " ;
el.style.top = top + " px " ;
// 比较好的写法
el.className += " className1 " ;
// 比较好的写法
el.style.cssText += " ; left: " + left + " px; top: " + top + " px; " ;
2. 让要操作的元素进行"离线处理",处理完后一起更新,这里所谓的"离线处理"即让元素不存在于render tree中,比如:
a) 使用documentFragment
或div等元素进行缓存
操作,这个主要用于添加元素的时候,大家应该都用过,就是先把所有要添加到元素添加到1个div(这个div也是新加的),
最后才把这个div append到body中。
b) 先display:none
隐藏元素,然后对该元素进行所有的操作,最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。所以只要操作只会有2次回
流。
3
不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,就先读取到变量中进行缓存,以后用的时候直接读取变量就可以了,见下面代码:
for (循环) {
el.style.left = el.offsetLeft + 5 + " px " ;
el.style.top = el.offsetTop + 5 + " px " ;
}
// 这样写好点
var left = el.offsetLeft,top = el.offsetTop,s = el.style;
for (循环) {
left += 10 ;
top += 10 ;
s.left = left + " px " ;
s.top = top + " px " ;
}
4. 考虑你的操作会影响到render
tree中的多少节点以及影响的方式,影响越多,花费肯定就越多。比如现在很多人使用jquery的animate方法移动元素来展示一些动画效果,想想
下面2种移动的方法:
// 如果是在自己的上面,则需要重绘,这里不会引起回流
$("#block1").animate({left:50});
// 而且改变的是marginLeft属性,所以这里每次改变不但会影响重绘,
// 还会引起父元素及其下元素的回流
实例测试
最后用2个工具对上面的理论进行一些测试,这2个工具是在我 "web
性能测试工具推荐"
文章中推荐过的工具,分别是:dynaTrace(测试ie),Speed Tracer(测试Chrome)。
第一个测试代码不改变元素的规则,大小,位置。只改变颜色,所以不存在回流,仅测试重绘,代码如下:
< script type ="text/javascript" >
var s = document.body.style;
var computed;
if (document.body.currentStyle) {
computed = document.body.currentStyle;
} else {
computed = document.defaultView.getComputedStyle(document.body, '');
}
function testOneByOne(){
s.color = 'red';;
tmp = computed.backgroundColor;
s.color = 'white';
tmp = computed.backgroundImage;
s.color = 'green';
tmp = computed.backgroundAttachment;
}
function testAll() {
s.color = 'yellow';
s.color = 'pink';
s.color = 'blue';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;
}
</ script >
color test < br />
< button onclick ="testOneByOne()" > Test One by One </ button >
< button onclick ="testAll()" > Test All </ button >
</ body >
testOneByOne
函数改变3次color,其中每次改变后调用getComputedStyle
,读取属性值(按我们上面的讨论,这里会引起队列的
flush),testAll
同样是改变3次color,但是每次改变后并不马上调用getComputedStyle
。
我们先点击Test One by One按钮,然后点击 Test All,用dynaTrace监控如下:
上图可以看到我们执行了2次button的click事件,每次click后都跟一次rendering(页面重绘),2次click函数执行的时间都差
不多,0.25ms,0.26ms,但其后的rendering时间就相差一倍多。(这里也可以看出,其实很多时候前端的性能瓶颈并不在于JS的执行,而
是在于页面的呈现,这种情况在用JS做到富客户端中更为突出)。我们再看图的下面部分,这是第一次rendering的详细信息,可以看到里面有2行是
Scheduleing layout task,这个就是我们前面讨论过的浏览器优化过的队列,可以看出我们引发2次的flush。
再看第二次rendering的详细信息,可以看出并没有Scheduleing layout
task,所以这次rendering的时间也比较短。
测试代码2:这个测试跟第一次测试的代码很类似,但加上了对layout的改变,为的是测试回流。
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
</ head >
< body >
< script type ="text/javascript" >
var s = document.body.style;
var computed;
if (document.body.currentStyle) {
computed = document.body.currentStyle;
} else {
computed = document.defaultView.getComputedStyle(document.body, '');
}
function testOneByOne(){
s.color = 'red';
s.padding = '1px';
tmp = computed.backgroundColor;
s.color = 'white';
s.padding = '2px';
tmp = computed.backgroundImage;
s.color = 'green';
s.padding = '3px';
tmp = computed.backgroundAttachment;
}
function testAll() {
s.color = 'yellow';
s.padding = '4px';
s.color = 'pink';
s.padding = '5px';
s.color = 'blue';
s.padding = '6px';
tmp = computed.backgroundColor;
tmp = computed.backgroundImage;
tmp = computed.backgroundAttachment;
}
</ script >
color test < br />
< button onclick ="testOneByOne()" > Test One by One </ button >
< button onclick ="testAll()" > Test All </ button >
</ body >
用dynaTrace监控如下:
相信这图不用多说大家都能看懂了吧,可以看出有了回流后,rendering的时间相比之前的只重绘,时间翻了3倍了,可见回流的高成本性啊。
大家看到时候注意明细处相比之前的多了个 Calcalating flow layout。
最后再使用Speed Tracer测试一下,其实结果是一样的,只是让大家了解下2个测试工具:
测试1:
图上第一次点击执行2ms(其中有50% 用于style Recalculation),
第二次1ms,而且第一次click后面也跟了2次style Recalculation,而第二次点击却没有style
Recalculation。
但是这次测试发现paint重绘的时间竟然是一样的,都是3ms,这可能就是chrome比IE强的地方吧。
测试2:
从图中竟然发现第二次的测试结果在时间上跟第一次的完全一样,这可能是因为操作太少,而chrome又比较强大,所以没能测试明显结果出来,
但注意图中多了1个紫色部分,就是layout的部分。也就是我们说的回流。
发表评论
-
提供IT系统运维支持、系统优化方案
2012-10-26 14:46 6提供IT系统运维支持、系统优化方案,有多个运维实施经验。 ... -
Java指定编码读写文件(UTF-8)
2010-11-30 14:00 3090有时我们需要程序动态生成jsp文件,采取系统默认的编码操作的文 ... -
was6.0发布struts2项目异常
2010-11-18 18:39 1967[10-11-18 18:31:33:609 CST] 000 ... -
利用spring提供的字符编码过滤器
2010-11-14 11:55 1956<!-- spring的字符集过滤器 --> ... -
简单的几句CSS布局口诀
2010-11-10 16:41 949简单的几句CSS布局口诀,就可以写出精简,标准的样式。 ... -
commons-email笔记
2010-11-10 14:38 1360import java.io.UnsupportedE ... -
如何解决 调用jar程序时出现 outofMemory的问题
2010-10-29 12:02 1184我们在调用 打包好的java程序时,如果程序要加载大量数据的话 ... -
GC策略的调优
2010-09-30 22:30 1610GC 策略在 G1 还没成熟的情况下,目前主要有串行、并 ... -
关于Spring和WebLogic版本兼容的一点小提示
2010-09-30 16:31 2053首先 WebLogic 的各个版本和 JDK 绑定的很紧, 或 ... -
删除WebLogic 10的缓存
2010-09-30 16:07 4625在WebLogic 10上部署了一个应用,最近作了更新并重新部 ... -
weblogic如何强制先加载web-inf/lib下的jar
2010-09-30 16:05 4769方法1: 修改WEB-INF\weblogic.xml (如 ... -
用Log4j自动生成日志
2010-09-27 13:28 1623Log4j是Apache基金会的一 ... -
java smslib发送短信
2010-09-10 10:02 1619public class SendMessage { ... -
Spring定时器的两种实现方式
2010-09-01 21:07 1446有两种流行Spring定时 ... -
使用 Commons-Email 在邮件内容中直接嵌入图片
2010-08-31 20:25 1310我们在发送邮件的时候,如果使用HTML在邮件内容中嵌入图片,& ... -
Struts2中转换Date类型的问题
2010-08-29 09:43 1325Web开发会涉及到很多类型转换的情况。我们知道,页面中的一切值 ... -
java smslib 发送短信错误信息
2010-08-25 15:02 4233org.smslib.GatewayException: GS ... -
rxtx取代javax.comm实现Java跨平台设备端口通信
2010-08-24 08:53 2151From Rxtx <!-- start conte ... -
javascript汉字转拼音代码
2010-08-22 08:21 4563使用方法(1):pinyin.go('汉字'); //例:张家 ... -
关于IE等浏览器在下载JAR文件时的,将后缀更改为zip等问题及解决方案
2010-08-03 12:19 1194httpd.conf这个文件中的mime.types上面,打开 ...
相关推荐
在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的,下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。
在认识重绘和回流之前,我们先认识一下一个页面加载的时候,会发生什么? 页面加载时,生成一个DOM树,DOM Tree里包含了构成页面所有的标签。Style Sheets(CSS样式表)会生成一个Style Rules。当DOM Tree和Style ...
理解重绘与回流对浏览器渲染效率的影响的PPT。用于知识分享
好东东,基于S7-200 PLC的热风回流焊机温控系统的设计,在设计的时候还是不错的
行业资料-建筑装置-并联回流式太阳能热水器.zip
行业文档-设计装置-轴心回流式太阳能真空集热器.zip
行业资料-建筑装置-带回流物料自动清理装置的斗式提升机.zip
行业资料-建筑装置-带有吹砂回流装置的喷砂机.zip
20210521-国泰君安-飞亚达-000026-消费回流、国货崛起,品牌叠加渠道助力高增长.pdf
双重移相控制的双向全桥DC-DC 变换器 及其功率回流特性分析
J-STD-033D 潮湿、回流焊和工艺敏感器件的操作、包装、运输及使用要求(中英对照自译版)
1. 浏览器渲染机制 2. 重绘 3. 回流 4. 浏览器优化 5. 减少重绘与回流
行业分类-设备装置-回流线体及具有该回流线体的锁螺丝平台
最全面安恒防火墙NAT配置实例,物超所值,仅供分享
行业分类-电子-关于带自动回流结构的喷雾器电泵的介绍分析.rar
行业资料-交通装置-一种回流叶马赫产品铸造模壳.zip
行业分类-电子-一种生态回流发电系统
下面来介绍一下什么是防抖! 防抖:任务频繁触发的情况下,只有任务触发的间隔超过制定的时间间隔的时候,任务才会被执行。 下面引用一下知乎上的一个例子: 防抖 点我防抖! [removed] = function() { ...
社科院-米果制造业回流:怎样回流?效果如何?-2020.6-6页精品报告2020.pdf
行业资料-电子功用-光伏电池大回流焊的说明分析.rar