rendering performance

如今大部分设备的刷新频率数60fps，什么意思呢？意思就是每秒屏幕刷新60次。举个例子：页面上出现动画或者渐变的效果，又或者用户滚动页面，那么浏览器渲染动画或页面的每一帧的频率也需要跟设备屏幕的刷新率保持一致。每帧的预算时间是16.66ms，这个时间段中浏览器要处理很多事情，所以最好的情况是在10ms内将所有工作做完，如果超出预算时间，那么帧率会下降，就会出现常见的卡顿现象，对用户体验带来负面影响

The pixel pipeline

要想在预期时间内完成页面更新则主要有5个关键点需要关心，这些点决定了页面的渲染时间

frame-full-a9d1a7d7-0b9e-40b9-809a-40254258e7ad

JavaScript : 一般来说，JavaScript通常用来实现一些视觉变化的效果，比如来处理一些动画效果，或者对一个数据集排序，又或者修改页面的DOM元素等。当然除了JavaScript，还有一些常用的方法也可以实现类似的效果，比如：CSS Animation Transitions Web Aninations API。
Style : 这个过程主要是样式计算。是根据样式匹配选择器计算出哪些元素需要应用哪些属性规则的过程，知道规则后计算出每个元素的最终的样式。
Layout : 知道了各个元素对应的规则后，浏览器开始计算元素要占据的空间大小和在屏幕中的位置，页面布局模式意味着一个元素可能会影响其他元素，例如元素的宽一般会影响其子元素的宽度以及树中各处的节点。
Paint : 绘制是填充像素的过程。它涉及绘制出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分，绘制一般在多个图层上完成
Composite : 由于页面的各部分内容可能被绘制在多个图层，因此需要按照正确的顺序绘制到屏幕上，特别是对于重叠在一起的元素来说，这个顺序是非常重要的。

这些部分都是很重要的，处理不当就会导致页面出现卡顿情况，所以为了做好这一点必须要确切的知道你的代码到底会影响渲染的哪个阶段

JS/CSS > Style > Layout > Paint > Composite

如果修改元素的"layout"属性，即改变元素的几何属性(例如宽高，或位置)，那么浏览器必须检查其他所有元素并重新计算，受到影响的部分要重新绘制，最终进行合成。所以要重走整个过程
JS/CSS > Style > Paint > Composite

如果修改的内容是属于“Paint”属性(比如:背景图片，文字颜色或阴影)，这些不会影响到页面布局，所以浏览器会直接跳过Layout阶段。
JS/CSS > Style > Composite

如果修改的属性既不需要页面重新布局，也不需要重新绘制，那浏览器会跳过Paint和Layout阶段，这种情况开销最低，适合用在动画或滚动的情况

接下来会从以下这几个阶段分别来看每个阶段需要注意的问题

原文地址:渲染性能分析

渲染性能分析(一)

rendering performance

The pixel pipeline