关于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，道理应该如此。
0
投稿猜你喜欢
类似于and操作类似于or操作# 类型转换# sortedli=[2,45,1,67,23,10]li.sort() #list的排序方法p- vue开发依赖的相关配置Vue SSR 指南今天先做客户端方面的配置，明天再做服务端的部分。那么马上开始吧~修改部分代码脚手架生成的代码肯定
- 先上图功能：1、上拉日历折叠，展示周2、左右滑动切换月2、“今天”回到今天；“+”添加日程3、localStorage存储日程index,h
- 要实现的目标，简单示例：from functools import partialdef func1(f): re
- 在JavaScript中，数组本质上是一种特殊的对象，它的类型值会返回 object。如果我们需要比较两个数组是否相等，不能像比较基本类型(
- 前言本方案只适应于小的项目、项目未上线或者紧急情况下可采用这种方式，一旦开启慢日志查询会增加数据库的压力，所以一般采用后台对数据操作时间写入
- 对numpy 矩阵进行通道间求均值给定一个3x2x2得矩阵，得到一个2x2的矩阵，其中对应元素是通道间的均值import numpy as
- 在setup()钩子函数中调用父组件<template><div> &nb
- 引文之前将PHP反序列化的基础知识讲了一遍，不知道大家学习的怎么样了，今天给大家带来PHP反序列化的进阶知识：PHAR反序列化,也是之前本人
- 一、前言今天要介绍的 click 则是用一种你很熟知的方式来玩转命令行。命令行程序本质上是定义参数和处理参数，而处理参数的逻辑一定是与所定义
- 在ASP.net页面中，我们编写JavaScript脚本附加有注释时，这些注释也往往会随JavaScript脚本一起送到客户端。
- 依据null-values,MySQL的值为null的意思只是代表没有数据,null值和某种类型的零值是两码事,比如int类型的零值为0,字
- 当我们写用例断言时，往往一个断言结果是不够的，所以需要加入多重断言，而多重断言，当断言中间出现断言结果False时，会中断后续的断言执行，会
- 本篇文章通过调用opencv里的函数简单的实现了对图像里特定颜色提取与定位，以此为基础，我们可以实现对特定颜色物体的前景分割与定位，或者特定
- 事件对象asyncio.Event是基于threading.Event来实现的。事件可以一个信号触发多个协程同步工作，例子如下：import
- 你是否曾为表单设计感到过沮丧或不知所措呢？接下来三篇文章，希望能彻底改变你的看法，真正爱上Web表单设计。首先感谢Luke Wroblews
- 一、前言对于一个桌面应用来说，有时候单独一个窗口用户使用起来会不太方便，比方说写日报或者查看文件等，若是在同一窗口内，我只能做一件事，不能边
- 本文实例讲述了python避免死锁方法。分享给大家供大家参考。具体分析如下：当两个或者更多的线程在等待资源的时候就会产生死锁，两个线程相互等
- 线性逻辑回归本文用代码实现怎么利用sklearn来进行线性逻辑回归的计算，下面先来看看用到的数据。这是有两行特征的数据，然后第三行是数据的标
- 参数数量及其作用tf.layers.dense用于添加一个全连接层。函数如下：tf.layers.dense( i
