关于重绘and重排
在研究CSS3动画性能的时候，看到了重排两个字。
突然想到自己虽然听说过这么个东东，但一直也没深入研究之。
趁着当下正好有研究的劲头，所以一不做二不休，把这个point也给学习了。
同样是一番查找资料...不过这次我得跟作者和原文say sorry了...
因为...我在整理的过程中没注意mark下原文的url...so~~~
主会原谅我的...
浏览器的工作流程
1.浏览器会解析三个东西：
HTML/SVG/XHTML，事实上，Webkit 有三个 C++ 的类对应这三类文档。解析这三种文件会产生一个 DOM Tree。
CSS，解析 CSS 会产生 CSS Rule Tree。
Javascript脚本，主要是通过 DOM API 和 CSSOM API 来操作 DOM Tree 和 CSS Rule Tree。
2.解析完成后，浏览器引擎会通过 DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。
注意：Rendering Tree 并不等同于 DOM Tree，因为一些像 Header 或 display:none 的东东是不会出现在渲染树中的。
CSS Rule Tree 主要是为了完成匹配并把 CSS Rule 附到 Rendering Tree 上的每个 Element。也就是 DOM 结点。也就是所谓的 Frame。
然后，计算每个 Element 的位置，这又叫 layout 和 reflow 过程。
3.通过调用操作系统 Native GUI 的 API 绘制。
重绘和重排的概念
Repaint —— 重绘。屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow —— 重排。意味着元件的几何尺寸变了，我们需要重新验证并计算 Render Tree。是 Render Tree 的一部分或全部发生了变化。这就是 Reflow，或是 Layout。（HTML 使用的是 flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 reflow）reflow 会从 <html> 这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置，在 reflow 过程中，可能会增加一些 frame，比如一个文本字符串必需被包装起来。
重排的成本比重绘的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，但是如果 reflow 发生在手机上，那么这个过程是非常痛苦和耗电的。
多说两句关于滚屏的事，通常来说，如果在滚屏的时候，我们的页面上的所有的像素都会跟着滚动，那么性能上没什么问题，因为我们的显卡对于这种把全屏像素往上往下移的算法是很快。但是如果你有一个 fixed 的背景图，或是有些 Element 不跟着滚动，有些 Elment 是动画，那么这个滚动的动作对于浏览器来说会是相当相当痛苦的一个过程。你可以看到很多这样的网页在滚动的时候性能有多差。因为滚屏也有可能会造成 reflow。
由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。这也是为什么我们要避免使用 table 做布局的一个原因。此外，使用 table 的话，可能很小的一个小改动会造成整个 table 的重新布局。
常见的触发重排的操作
1.DOM元素的几何属性变化。
当DOM元素的几何属性变化时，渲染树中的相关节点就会失效，浏览器会根据DOM元素的变化重建构建渲染树中失效的节点。之后，会根据新的渲染树重新绘制这部分页面。而且，当前元素的重排也许会带来相关元素的重排。例如，容器节点的渲染树改变时，会触发子节点的重新计算，也会触发其后续兄弟节点的重排，祖先节点需要重新计算子节点的尺寸也会产生重排。最后，每个元素都将发生重绘。可见，重排一定会引起浏览器的重绘，一个元素的重排通常会带来一系列的反应，甚至触发整个文档的重排和重绘，性能代价是高昂的。
2.DOM树的结构变化。
当DOM树的结构变化时，例如节点的增减、移动等，也会触发重排。浏览器引擎布局的过程，类似于树的前序遍历，是一个从上到下从左到右的过程。通常在这个过程中，当前元素不会再影响其前面已经遍历过的元素。所以，如果在body最前面插入一个元素，会导致整个文档的重新渲染，而在其后插入一个元素，则不会影响到前面的元素。
3.获取某些属性。
浏览器引擎可能会针对重排做了优化。比如Opera，它会等到有足够数量的变化发生，或者等到一定的时间，或者等一个线程结束，再一起处理，这样就只发生一次重排。但除了渲染树的直接变化，当获取一些属性时，浏览器为取得正确的值也会触发重排。这样就使得浏览器的优化失效了。
这些属性包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以，在多次使用这些值时应进行缓存。
此外，改变元素的一些样式，调整浏览器窗口大小等等也都将触发重排。
减少重排次数和缩小重排影响范围的一些方法
1.将多次改变样式属性的操作合并成一次操作。例如：
<script>
var changeDiv = document.getElementById('changeDiv');
changeDiv.style.color = '#093';
changeDiv.style.background = '#eee';
changeDiv.style.height = '200px';
</script>
可以合并为：
<style>
div.changeDiv {
background: #eee;
color: #093;
height: 200px;
}
</style> <script>
document.getElementById('changeDiv').className = 'changeDiv';
</script>
因为多次改变属性的操作，当中包含N个会触发重排的属性改变，就会触发N次重排。将其合并后，就只触发一次了。
2.将需要多次重排的元素，position 属性设为 absolute 或 fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
3.在内存中多次操作节点，完成后再添加到文档中去。
例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的html片段，再一次性添加到文档中去，而不是循环添加每一行。
4.由于 display 属性为 none 的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。
如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。
5.在需要经常取那些引起浏览器重排的属性值时，要缓存到变量。
这些属性包括：offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。
所以，在多次使用这些值时应进行缓存。
6.不要在css里面写expression，如果css里有expression，很小的一个行为都有可能重新计算一遍。
关于重绘and重排的更多相关文章
- 浏览器渲染详细过程：重绘、重排和 composite 只是冰山一角
https://juejin.im/entry/590801780ce46300617c89b8 渲染 这张很经典的图许多人都看过,其中的概念大家应该都很熟悉,也就是这么几个步骤:js修改dom结构或 ...
- CSS新特性contain，控制页面的重绘与重排
在介绍新的 CSS 属性 contain 之前,读者首先需要了解什么是页面的重绘与重排. 之前已经描述过很多次了,还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势. OK,下面进入本文正题, ...
- DOM的回流和重绘（重排、重绘）
什么是DOM回流? 页面渲染时,我们对HTML结构简单的增删查改时,浏览器会对所有的dom进行重新排序,这就i是DOM回流,严重影响浏览器性能 DOM的回流和重绘: **DOM的回流**:当页面中元素 ...
- 关于DOM的操作以及性能优化问题-重绘重排
写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...
- 浏览器的重绘(repaints)与重排(reflows)
转:http://www.css88.com/archives/4991#more-4991 在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好.主要原因是这些效果通 ...
- 浏览器的重绘repaints与重排reflows深入分析
重绘是一个元素外观的改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观,接下来将详细介绍,需要了解的朋友可以参考下: 在项目的交互或视觉评审中,前端同学常常会对一些交互效果质 ...
- 重绘（redraw或repaint）,重排（reflow）
浏览器运行机制图: 浏览器的运行机制:layout:布局: 1.构建DOM树(parse):渲染引擎解析HTML文档,首先将标签转换成DOM树中的DOM node(包括js生成的标签)生成内容树(Co ...
- 前端性能优化--为什么DOM操作慢？ 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
- 重绘(repaints)与重排(reflows)
当页面布局和几何属性改变时就需要＂重排＂ 避免在修改样式的过程中使用 offsetTop, scrollTop, clientTop, getComputedStyle() 这些属性, 它们都会刷新渲 ...
随机推荐
- Java API研究：获取本地环境所有网卡及每个网卡的所有网络配置
一个网卡(不太标准,应该叫做一个网络接口,一个网卡是可以拥有多个网络接口的,如SoftAP)拥有一套网络配置:ip地址,子网掩码,网关,dns等等. 自java 1.6开始,提供了访问网络配置的一些接 ...
- Host is blocked because of many connection errors; unblock with 'mysqladmin flush-hosts'
环境:linux,mysql5.5.21 错误:Host is blocked because of many connection errors; unblock with 'mysqladmin ...
- python版本selenium定位方式（不止八种哦）
除了大家熟知的8种定位方式之外 1.id定位:find_element_by_id(self, id_)2.name定位:find_element_by_name(self, name)3.class ...
- js ~或者~~
问题:~是什么意思? 答:js中是对数字取反 var a = null; var b = '23' console.log(~~null) console.log(~~b)
- 二. linux基础命令
linux的基本命令一般有100多个,多练就可以了: 如果登陆用户是root,那么是#:如果是其他用户,则显示的是$ 练习:基本命令 1.创建一个目录/data mkdir /data ...
- 洛谷P5158 【模板】多项式快速插值
题面 传送门 前置芝士 拉格朗日插值,多项式多点求值 题解 首先根据拉格朗日插值公式我们可以暴力\(O(n^2)\)插出这个多项式,然而这显然是\(gg\)的 那么看看怎么优化,先来看一看拉格朗日插值 ...
- PL/SQL那点事-->修改Oracle数据库里面的字段长度
在开发过程中,遇到有个问题:在Oracle数据库中,利用PL/SQL数据库开发工具来开发,某一字段的长度不能满足需求时候,采用下面的语法就行修改 alter table 表名 modify 字段名 长 ...
- 用IDA辅助分析grub的小技巧
IDA可以辅助我们分析grub的代码,但是bootloader本身只是bin文件,为了让IDA能正确识别分析,我们还需要提供一些基本的参数,比如文件加载到内存的地址等. 图中MBR是加载到0x7C00 ...
- Python全栈-magedu-2018-笔记12
第三章 - Python 内置数据结构 字典dict key-value键值对的数据的集合 可变的.无序的.key不重复 字典dict定义 初始化 d = dict() 或者 d = {} dict( ...
- python在一堆目录中寻找json文件
在一个目录下,有好几层目录,里面零零散散存放着几个json文件,我要做的是用python脚本把它们都找出来,一开始就一层一层地找,用os.listdir加上for循环,根据目录树的深度确定for循环的 ...