Reflow
作者：mike 来源：163 UED 发布时间：2009-10-25 12:34:00
在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，道理应该如此。
根据文中提到的reflow，想到的疑点：
<div>
<div>…content…</div>
<div><img src=”‘ /></div>
</div>
当在HTML里没指定图片的宽高时，reflow只是针对img元素还是它的父元素甚至更多祖先元素？
在常规页面中大量用到的标签切换情况也类似？你知道吗？
0
投稿猜你喜欢
- iniconf博主前两天在写一个小的go语言项目，想找一个读取ini格式配置和的三方库，在网上找了一圈感觉都不是很好用， 使用起来非常的奇怪
- 本文实例讲述了python提取字典key列表的方法。分享给大家供大家参考。具体如下：这段代码可以把字典的所有key输出为一个数组d2 = {
介绍每当我使用pandas进行分析时，我的第一个目标是使用众多可用选项中的一个将数据导入Pandas的DataFrame 。对于绝大多数情况- 学习前言神经网络的应用还有许多，目标检测就是其中之一，目标检测中有一个很重要的概念便是IOU什么是IOUIOU是一种评价目标检测器的一种指标
- 如题，先上效果图：主要分为两大步骤使用python语句，通过百度地图API，对已知的地名抓取经纬度使用百度地图API官网的html例程，修改
- 本文实例为大家分享了python模拟事件触发机制的具体代码，供大家参考，具体内容如下EventManager.py# -*- encodin
- 使用索引提高查询速度1.前言在web开发中，页面模板，业务逻辑(包括缓存、连接池)和数据库这三个部分，数据库在其中负责执行SQL查询并返回查
- 这一款是用原生javascript实现的分页插件pagenav，页码显示jquery插件,只需要存在#pageNav,则会在其中显示页码，调
- 本文实例讲述了JS实现键值对遍历json数组功能。分享给大家供大家参考，具体如下：<!DOCTYPE html><html
- 很高兴参加了这一期的薯片会，认识了几个朋友～～不料的却是今天我要来总结一下本次薯片会我们总共讨论了三个议题：A、 如何让“用户”更容易识别超
- 前言在做项目中，网站前台或者后台有些数据需要在多个视图页面使用，例如用户基本信息数据，菜单展示数据。首先想到的是在每个控制器里传入这些需要的
- 一、模型方法 本工程采用的模型方法为朴素贝叶斯分类算法，它的核心算法思想基于概率论。我们
- python 文件操作seek() 和 telll() 自我解释file.seek()方法格式： seek(offset,whence=0)
- 首先看一下来自Wolfram的定义 马尔可夫链是随机变量{X_t}的集合（t贯穿0,1,..
- 在pyqt5编程过程中，经常会遇到输入或选择多个参数的问题，把多个参数写到一个窗口中，主窗口会显得很臃肿，所以，一般是添加一个按钮，调用对话
- 本文实例为大家分享了python地震数据可视化的具体代码，供大家参考，具体内容如下参考源码：seisplot准备工作：在windows10下
- 我经常使用json进行存储配置，于是常常遇到这样的问题：如果想要对某个数组里的值进行模糊搜索，同时输出相关的其他数组相同位置的的值该如何实现
- 环境配置新建python虚拟环境并激活conda create -n pyqt python=3.8conda activate py36安
- 我就废话不多说了，直接上代码吧！import syssys.path.append("..")from datetime
- 本文实例讲述了Python嵌套函数，作用域与偏函数用法。分享给大家供大家参考，具体如下：内嵌函数（嵌套函数）：意思：在函数里面再定义一个新的
