去听了牛人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是一款由Adobe公司推出的网页设计工具,它主要针对现代网页设计中的响应式布局和CSS3动画。在“Adobe Edge Reflow Preview”这个标题中,我们可以明确这款软件是用于预览和创建Web项目的,...
Swift-Reflow是一个专门为Objective-C设计的单向数据流解决方案,灵感来源于流行的前端框架Flux、Redux以及Vue。在现代软件开发中,数据管理是至关重要的,尤其是在构建复杂的应用程序时。Swift-Reflow引入了类似的...
标题中的“Reflow Oven_reflowoven_arduino_diy_”暗示了这是一个关于使用Arduino自制再流炉(Reflow Oven)的项目。再流炉在电子制造中用于焊接表面安装器件(SMD),通过精确控制温度来熔化焊膏,完成元件与电路板...
### 如何高效设定Reflow温度曲线 在表面贴装技术(SMT)中,回流焊作为连接电子元器件和印刷电路板(PCB)的关键工艺步骤,其温度曲线的设定直接影响到焊接质量和产品的可靠性。《如何高效设定Reflow温度曲线》一文...
### Symbion S36 Post-Reflow AOI系统知识点解析 #### 一、Symbion S36系统概述 Symbion S36是一款专为表面贴装技术(Surface Mount Technology, SMT)生产线设计的先进后回流自动光学检测(Automatic Optical ...
### Ersa Reflow Oven 变频器概述 **Ersa Reflow Oven**是一种用于电子制造领域的设备,它通过精确控制温度来完成表面贴装技术(SMT)组件的焊接过程。其中提到的“变频器”是该设备中的一个关键组成部分,主要用于...
### Standard Reflow Profile知识点 #### 一、标准回流焊简介 回流焊是一种通过将焊膏熔化形成金属间化合物来实现电子元器件与电路板之间电气连接的技术。本文件详细介绍了适用于标准封装和无铅封装的标准回流焊...
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 ...
《Android TextView动画库:Reflow Animator深度解析》 在Android应用开发中,TextView是我们最常用的控件之一,它用于展示文本信息。然而,当需要在多个TextView之间进行平滑过渡时,开发者通常需要编写复杂的...
RTI-033-97 Datapaq Reflow Tracker System 窄形六通道系统 包含下列内容 SW5366A Insight炉温跟踪仪中文分析软件 DQ1862 Q18 数据记录器,K 型电极, 6个通道, -200°to 1370℃ 精度± 0.5℃,每通道可储存18,...
JEDEC SPP-024A 标准程序和实践 - Ball Grid Array 封装的 Reflow 平坦性要求 JEDEC SPP-024A 标准程序和实践为 Ball Grid Array 封装的 Reflow 平坦性要求提供了一个 Alternatives 解决方案。在某些情况下,...
标题:NUC970 PCBA Reflow Profile.pdf 知识点: 1. NUC970 PCBA指的是基于NUC970芯片的印刷电路板组装(Printed Circuit Board Assembly,简称PCBA),这是一个特定于某款产品或型号的电路板组装过程,其中NUC970...
在深入探讨CSS reflow之前,需要了解一些基础概念。首先,CSS渲染对象是指在浏览器渲染页面时,将HTML文档中的每一个元素抽象为一个盒子模型,这个盒子模型会包括边距、边框、填充和实际内容。Mozilla浏览器使用了一...
在前端性能优化的领域中,回流(Reflow)与重绘(Repaint)是非常关键的概念。它们是浏览器渲染过程中最常见、也最影响性能的两个步骤。为了深入理解这两个概念,我们首先需要了解浏览器的渲染流程。 在用户通过...
`reflow`(回流)和`repaint`(重绘)是浏览器在更新页面布局和视觉表现时的两个关键过程。理解并有效地减少这两者的发生,能够显著提升网页加载速度和交互响应。以下是一些基于项目经验的策略来降低`reflow`和`...
回流Reflow 是一个非常基本的工作流助手,它需要一个状态 getter/setter 函数和一个工作流定义,并返回一个转换函数,该函数将在状态之间转换对象,遵循工作流规则并调用提供的任何工作流状态转换逻辑。人为的例子:...
本文将深入探讨两个关键概念:repaint(重绘)和reflow(渲染),以及如何通过理解它们的工作原理来提升JavaScript的执行效率。 **Repaint(重绘)**是指当一个元素的外观发生变化,但其在页面布局中的位置并未改变...
git-reflow –自动执行git工作流程(2015福冈Ruby奖得主) 如果您的工作流程如下所示: 创建功能分支 编写出色的代码 创建一个对主请求请求 通过代码审查获取“ lgtm” 合并到主节点(默认情况下被压缩,但是可以...