精读《让你的网页更丝滑（一）》

读这篇文章，终于让我对页面中帧的概念有了更清晰的了解。

帧与FPS的概念

要了解帧，首先要知道屏幕的成像原理。
屏幕的成像，简单来讲就是像幻灯片一样，通过快速地切换一张张图片，速度快到你看不到图片在切换，利用人的眼睛的视觉停留效应，因为人脑可以记住上一张出现过的图，所以让画面可以看起来是连续的。
一个画面如果要人眼感觉到流畅，需要达到60FPS，60FPS是什么概念？就是电脑要在1秒内切换60张图，专业点讲，就是1秒钟切换60帧。FPS就是用来描述“每秒切换多少帧”的单位，又叫刷新率。
即使你的电脑屏幕上没有什么动画出现，就这样待机着，你的屏幕也是在以超高的频率做刷新。

网页内动画元素的绘制是由浏览器完成的，为了实现60FPS的刷新率，意味着刷新一帧只能使用16.6ms，这16.6ms浏览器还要完成样式计算，布局，绘制，合成等操作，留给JS执行代码的时间只有10ms。

指标

当页面的响应，动画，空闲和加载的时间都在关键指标内，用户访问这个页面的感觉就是丝滑的。

像素管道

当页面样式发生变动时，浏览器在正常情况下会按照以下的顺序对页面进行处理：

像素管道

JS触发样式改变=》浏览器布局=》绘制=》合成

如果是不会触发重排的样式改变，则Layout不会被执行。纯CSS样式的改变不会由JS触发。

性能测量工具

提供了demo尝试F12的performance，知道了FSL（强制同步渲染）。发生的场景往往是用JS改变了样式后，马上去获取改变后的元素样式，导致浏览器要提前绘制出来，就为了告诉你元素的具体样式值。

requestAnimationFrame

之前不知道这个方法好在哪。看了这篇文章才知道，在requestAnimationFrame里的函数，会在每一帧的最开始执行。这样，如果你在动画是在16.6ms内可以执行完的话，就可以在一帧里完美地绘制出来。使用setTimeout或者setInterval，动画可能会在16.6ms的中间或者快结束的时候才执行，就可能出现掉帧的情况。当然，即使是使用requestAnimationFrame，如果动画的时间太久，也会导致掉帧。

参考资料：
让你的网页更丝滑（一）
刷新频率_百度百科
FPS（每秒传输帧数(Frames Per Second)）_百度百科