关于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,道理应该如此。
猜你喜欢
- 关于asp缓存函数,类什么的,在网上可以说笔笔皆是,为啥我要不辞辛苦去写一个呢?大概看了下,各有各的优点吧,可是大部分好像不可以缓存数据额,
- 我们在建立一个大型网站的时候会有很多副页面框架模式,甚至一些细节元素都是相同的。但令人困扰的是更新它们却要费些周折,要一遍遍地反复更新每个页
- 登录与注册两个按钮似乎天生就应该是排在一起的,就像很多地方的“确定”与“取消”一样,甚至排在一起的意义远远强于后者。于是长期以来,用户们也形
- 小毅的blog:http://andymao.com/andy/注:本文实例在IE5.x下可能会显示不出来,请使用IE6、IE7、Firef
- 先想创意,再画草图,接着鼠绘,最后做成flas * 。这是我的习惯流程。 这是想到中秋时,我第一时间内能浮想出的图像:大意是嫦娥奔
- 这篇文章详细的介绍了Oracle数据库SQL语句性能调整的基本原则,具体内容请参考下文。一、问题的提出在应用系统开发初期,由于开发数据库数据
- 环境Laravel 5.4原理在Laravel中,门面为应用服务容器中绑定的类提供了一个“静态”接口
- 使用.net2005自带的SQL-Express连接不上。解决方法:1.网络防火墙阻止数据库连接;2.默认SQL-Express没有启动Sa
- 首先创建一个表Use Test;Create Table TableTest(`ID` mediumint(8) default '
- 两年前,我们开发了一套基于Flash的文件(主要是图片)上传RIA应用,提供给阿里巴巴的用户使用。如果你使用过Wordpress或flick
- 1 运行SQLPLUS工具 sqlplus 2 以OS的默认身份连接 / as sysdba 3 显示当前用户名 show user 4 直
- 以下的文章主要介绍的是SQL Serve数据库到DB2连接服务器的实现过程,我们大家都知道不同数据库平台的互连,一般对其称之为数据库的异构服
- 人的大脑通过双眼来辨别视觉图形获取信息。大脑根据储存的经验,将所看到的视觉图形建立起优先级。由此可见,一个良好的视觉设计可以帮助大脑迅速有效
- 首先,了解下原理。1,提供文本框进行查询内容的输入2,将查询信息提交页面程序处理3,程序页主要作用:接受查询信息,根据此信息调用特定的SQL
- 今天同学向我提了一个问题,我觉得蛮有意思,现记录下来大家探讨下。问题是:在一个表里面,有一个允许为空的字段,空是可以重复的,但是不为空的值需
- 之前我写过一篇文章介绍如何实现中国站长站的文章干扰码功能:《谈中国站长站的文章干扰码实现方法》 首发在asp之家。如果大家有兴趣可以先看看。
- 我们可用ADO STREAM来做一个无组件的上传程序。Stream对象包含了许多操作二进制和文本文件的方法,我们现在用Stream对象来操作
- 程序开始:<% Server.ScriptTimeout = &HE10 '&
- 时间格式化函数,代码简单但较实用代码很简单,谁都能看懂Function fmstr(str, str1, Lens) Dim str2For
- 可视性的问题几乎在每次不同产品的用户测试中都会出现:用户总是对页面的某些元素、功能视若无睹,或根本无视。基于此,对这个问题进行了一番小小的研