关于reflow
作者:Realazy 来源:Realazy 时间:2007-09-23 13:30:00
去听了牛人 dbaron 的一个 Web Page Layout/Display in Mozilla 讲座( via )。讲的东西对我一个只会HTML, CSS和JavaScript的人来说很底层,所以效果也比较“和谐”,只是大致了解了mozilla的CSS渲染源码分布位置和渲染流程而已。
讲座提到了reflow(如何翻译呢?又是一个问题)这个东东。之前对reflow有所闻,能经常从某些大牛的幻灯中提到,提高页面渲染的性能,需尽量避免reflow. 那么reflow是什么东西呢?它又是如何影响页面性能的?事后去问了一下dbaron(呵呵,我口语彻底不行,加上心理素质,最后是把问题写下来给他看),豁然开朗也。
在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,道理应该如此。
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
简化的CSS Reset — 常用CSS重设实例
Python通过类的组合模拟街道红绿灯
详解Python中Sync与Async执行速度快慢对比
![](https://img.aspxhome.com/file/2023/8/92138_0s.png)
python生成遍历暴力破解密码的方法
![](https://img.aspxhome.com/file/2023/6/107056_0s.png)
[翻译]JavaScript中对象的层次与继承
![](https://img.aspxhome.com/file/UploadPic/200812/31/cc-2-73s.png)
mysql游标的原理与用法实例分析
![](https://img.aspxhome.com/file/2023/1/129881_0s.png)
Go的固定时长定时器和周期性时长定时器
python 详解如何写flask文件下载接口
![](https://img.aspxhome.com/file/2023/9/68929_0s.png)
Python的Tornado Web框架深入解析
python基础练习之几个简单的游戏
jQuery 1.4新特性及其变化(上)
Webpack中的文件指纹的实现
![](https://img.aspxhome.com/file/2023/0/136840_0s.jpg)
语义化的HTML结构到底有何好处?
将Python文件打包成.EXE可执行文件的方法
深入理解Vue 的条件渲染和列表渲染
Python利用PyQt5制作一个获取网络实时数据NBA数据播报GUI功能
![](https://img.aspxhome.com/file/2023/7/87917_0s.jpg)
使用Go实现TLS服务器和客户端的示例
MySql查询某个时间段内的数据实例(前一周、前三个月、前一年等)
![](https://img.aspxhome.com/file/2023/3/100333_0s.png)