去听了牛人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
,道理应该如此。
相关推荐
Adobe Edge Reflow Preview下载
DIY reflow oven code for arduino
Reflow Text Animator A port of Plaid's ReflowText that allows easily transitioning between sibling TextViews - no matter their size or style. Usage To move and transform fromView into toView: new ...
Standard Reflow Profile for Standard and Lead-Free Packages ACTEL
Symbion S36 Post-Reflow AOI Systemsymbion S36后回流AOI系统
Ersa Reflow oven变频器文档
RTI-033-97 Datapaq Reflow Tracker System 窄形六通道系统 包含下列内容 SW5366A Insight炉温跟踪仪中文分析软件 DQ1862 Q18 数据记录器,K 型电极, 6个通道, -200°to 1370℃ 精度± 0.5℃,每通道可储存18,...
Objective-C单向数据流方案,灵感来自于Flux, Redux and Vue。
高效设置回流焊温度曲线参考手册,回流焊高质量的保证。
* 构造frame, 以建立对象树(DOM树) * reflow, 以确定对象位置,或者是调用mozilla的Layout(这里是指源码的实现) * 绘制,以便对象能显示在屏幕上 总的来说,reflow就是载入内容树(在HTML中就是DOM树)和创建或...
NUC970 PCBA Reflow Profile
reflow-animator,一个用于在同级TextView之间轻松过渡的库,博客附件,效果请查看博客相对应项目。
回流Reflow 是一个非常基本的工作流助手,它需要一个状态 getter/setter 函数和一个工作流定义,并返回一个转换函数,该函数将在状态之间转换对象,遵循工作流规则并调用提供的任何工作流状态转换逻辑。人为的例子:...
git-reflow –自动执行git工作流程(2015福冈Ruby奖得主) 如果您的工作流程如下所示: 创建功能分支 编写出色的代码 创建一个对主请求请求 通过代码审查获取“ lgtm” 合并到主节点(默认情况下被压缩,但是可以...
JEDEC SPP-024A Standard Procedures And Practices - Reflow Flatness Requirements for Ball Grid Array Packages - 完整英文电子版(6页).zip
回流焊大师Reflow Master是我的开源电烤箱回流控制器,我也出售在Tindie上组装的完整组件: ://www.tindie.com/products/13378/ 它是自定义硬件和自定义代码,但是都是开放源代码,因此,如果您想自己做一个挑战或想...
JEDEC SPP-024A Standard Procedures And Practices - Reflow Flatness Requirements for Ball Grid Array Packages - 完整英文电子版(6页).pdf
ReFlow是用于以下领域之一的模拟的脚本集的组合: 类比 数字的 混合信号 对于每个域,专用于该域的工具都收集在一个文件夹tools中。 工具是脚本的集合,用于在以工具名称命名的文件夹内执行精确的任务。 从而导致...
本文主要是结合自己的一些项目经验,给大家提出了几点减少浏览器reflow和repaint的方法和注意事项,希望对大家能有所帮助。