前端性能优化之重排和重绘

重绘重排两者之间的区别减少重排的方法BFC触发BFC的条件

前端重排重绘详解

什么是重排和重绘？ 重排：若渲染树的一部分更新，且尺寸变化，就会发生重排。 重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的vidibility、outline、背景颜色等，就会发生重绘。 PS：重绘不一定导致重排，但重排一定会导致重绘。重排会产生比重绘更大的开销。 重排和重绘何时会发生？ 触发重排： （1）页面第一次渲染：在页面发生首次渲染的时候，所有组件都要进行首次布局，...

大家好，我是全栈老李。今天咱们聊点硬核的——CSS性能优化。很多前端同学可能觉得CSS就是写写样式，能跑就行，但真正的高手都知道，CSS写得不好，页面卡成PPT可不是开玩笑的。尤其是重排（Reflow）和重绘（Repaint），这两个家伙简直是性能杀手。

重排也称为回流或重构，是指当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的过程。这个过程需要浏览器重新计算元素的几何属性，并重新构建渲染树。

　　重流（Reflow）是指布局引擎为frame计算图形的过程。 frame是一个矩形，拥有宽高和相对父容器的偏移。frame用来显示盒模型（content model）， 但一个content model可能会显示为多个frame，比如换行的文本每行都会显示为一个frame。 　　重绘（Repaint）发生在元素的可见性发生变化时，比如背景色、前景色等。 因此回流必然会引起重绘。 　　 重...

1.何为重绘与重排

一、Reflow和Repaint是什么？ 首先，我们需要了解一下浏览器渲染的大致流程： 解析HTML文档，构建DOM树 解析CSS属性，构建CSSOM树 结合DOM树和CSSOM树，构建render树 在render树的基础上进行布局，计算每个节点的几何结构 把每个节点绘制在屏幕上 一个页面可以简单的看成两个部分： DOM节点：描述页面的结构 DOM节点的属性：描述DOM节点如...

重排和重绘作为前端必须要掌握的知识点，在面试中出现的机率通常都是较高的

1.document.write和innerHTML的区别document.write重排整个页面 innerHTML可以重绘页面的一部分2.浏览器运行机制1、构建DOM树（parse）：渲染引擎解析HTML文档，首先将标签转换成DOM树中的DOM node（包括js生成的标签）生成内容树（Content Tree/DOM Tree）；2、构建渲染树（construct）：解析对应的CSS样式文...

1、浏览器自己的优化：浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。**（5）**将需要多次重排的元素，position属性设为absolute或fixed，元素脱离了文档流，它的变化不会影响到其他元素；3、元素位置的改变，或者使用动画；