Reflow
作者:mike 来源:163 UED 发布时间:2009-10-25 12:34:00
在CSS规范中有一个渲染对象的概念,通常用一个盒子(box, rectangle)来表示。mozilla通过一个叫frame的对象对盒子进行操作。frame主要的动作有三个:
* 构造frame, 以建立对象树(DOM树)
* reflow, 以确定对象位置,或者是调用mozilla的Layout(这里是指源码的实现)
* 绘制,以便对象能显示在屏幕上
总的来说,reflow就是载入内容树(在HTML中就是DOM树)和创建或更新frame结构的响应的一种过程。
要提高页面性能,其实就是避免reflow的开销。那么,有哪些方面是需要reflow的呢?比如,未指定图片宽高的话,图片的载入会使页面 reflow, 因为要根据图片宽高来更新frame。这里就有一个提高页面性能的小技巧:如果事先能够确定图片宽高的话,最好在HTML里写上。
在编写一些常见的动态效果时,一般使用CSS的display来切换可见性。很不幸,这也会产生reflow. 把元素置为display:none,相当于把这个元素的frame销毁了,再置回非none时,需要重新构造frame,这就产生了reflow. 而另外一个切换可见性的属性visibility则不存在reflow问题,置为visibility:hidden的元素的frame并没有销毁,需要显示的时候其实就是一个绘制(上面提到的动作第三步)过程而已,没有reflow,因此效率会更高。如果你看过一些JavaScript库/框架的源码,会发现它们大量使用visibility而不是display,道理应该如此。
根据文中提到的reflow,想到的疑点:
<div>
<div>…content…</div>
<div><img src=”‘ /></div>
</div>
当在HTML里没指定图片的宽高时,reflow只是针对img元素还是它的父元素甚至更多祖先元素?
在常规页面中大量用到的标签切换情况也类似?你知道吗?
猜你喜欢
- “'验证码'等于'流氓软件'”这句话本身存在逻辑问题,因为“验证码”并不是一个软件,而是软件里的一个功能。这
- 有个帖子写的检查全角的 <script> fun
- 提起Apple,大部分人都会提起Apple的设计,除了Apple里拥有一批天才设计师外,还因为乔布斯对于设计有着苛刻的要求。所以在IT界,A
- '-----------------------------------------------------------
- 当鼠标移动上去后,字慢慢的变大的 效果应该 如果实现啊<!DOCTYPE html PUBLIC "-//W3C//DTD
- 当然是可以的,而且非常简单,今天就教大家在ASP中不用模板生成HTML静态页的方法。这里假设有一个htmer.asp动态页面,你想把它生成为
- asp之家注:本文介绍了使用asp来获取access数据库中的一条随机记录的方法,简单实用,相信对初学者有所帮助,根据这个方法其实我们可以实
- 1、灵活运用样式 熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,
- 内容摘要:当我们不想让某IP服务我们的网站时,我们就要写段程序来限制IP地址。asp中如何对ip进行过滤限制?本文介绍了一种方法,这个函数只
- 今天我们来一起看看Dreamweaver MX 2004在加密FTP 传送 方面的新功能。我们一般在做
- 原理:第一步:应用程序把查询SQL语句发给服务器端执行。我们在数据层执行SQL语句时,应用程序会连接到相应的数据库服务器,把SQL语句发送给
- Macromedia官方将在其他软件中内建Fireworks技术称为Fireworks技术,网上也称之为内建图片编辑器。Dreamweave
- 内容摘要:在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作,那时主要是用到di
- 在ASP.NET2.0通过SMTP的验证发送EMAIL ,代码如下:’Create a new MailMes
- 你可能正建立自己在网上的家-WEB页,又或者它已经被你安置在网络某一角里。无论出于什么目的,你都希望有
- 如何做一个计数器并让人家申请使用? 第一步:创建一个计数器(最简单的数字计数器,不是图片式的):&nbs
- 如何提高Request集合的使用效率?以加快程序处理速度: strTitle=Request.Form("Title&q
- 如何在页面中快捷地添加翻页按钮? 先编写一个nextprev.inc文件,再将代码<
- 传统的HTML页面中连动下拉框采用了两种方法:1)直接将下拉框中的内容hardcode于html的javascript中,调用javascr
- 用VBS语言实现的一个简单网页计算器,功能:可以进行加法、减法、乘法、除法、取反、开根号、及指数运算。虽然简单但是比起windows xp自