回流与重绘对于前端来说可以说是非常重要的知识点了，我们不仅需要知道什么是回流与重绘，还需要知道如何进行优化。

随着互联网发展至今，对于网站来说，性能显的越来越重要了，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。所以，我们需要重视与CSS相关的性能优化。

本文正在参与 “性能优化实战记录”话题征文活动，网页的卡顿性能优化，前端性能优化，javascript性能优化，首屏加载优化，css加载性能优化，前端服务端渲染性能优化。页面卡顿优化、网页卡顿优化

游览器底层原理 1.游览器是如何解析css选择器的? 在生成渲染数的过程中,渲染引擎会根据选择器提供的信息来遍历DOM数,找到对应的DOM节点然后将样式规则附加到上面. 来看一段样式选择器代码,以及一

$\color{FF0000}{PS：对于是否是真的会影响性能，下面做一个实验。}$ $\color{FF0000}{貌似对css的计算是有些许影响，但是最终浏览器的总时间并没有太大出入(多次的平均值)。}$ PS：记得chrome有一个timline选项的，但是找不到了，不知…

我们通过 html、css 描述页面，浏览器会解析然后一帧帧渲染，通过 js 改变 dom 后，浏览器会重新计算布局信息然后渲染。 dom 改变有高频低频之分，比如动画就要高频改变样式，而且现代浏览器

使元素呈现新的外观，重绘不会带来重新布局，所有重绘不一定重排。 渲染对象在创建完成并添加到渲染树的时候，并不包含位置和大小信息，计算这些值的过程成为布局或者重排。重排一定会引起重绘。 通过devtools中的layers可以看到页面的所有图层。 重绘重排的基本单位是图层，所以g…

从 HTML5 规范到浏览器内部的数据结构再到渲染实际流程，完全阐述浏览器渲染机制 -- 渲染并不只是重绘重排和 composite 那么简单。

在介绍新的 CSS 属性 contain 之前，读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了，还不太了解的可以先看看这个提高 CSS 动画性能的正确姿势。 OK，下面进入本文正题，