前端性能优化之渲染之概述

[zhuanyongxigua]

上一文说的是如何更快的把资源搞到浏览器上。本篇文章要讲的是如何把拿到的资源更快的显示出来。

这是How browsers work一文中的非常经典浏览器渲染过程的说明。略微有点复杂，可以用谷歌开发文档中的更简化的图示：

这是一个完整的渲染过程，这个图示的目的是为了帮助我们做性能优化，因为开发者能够优化的环节基本上只有这五个。

1. 运行JavaScript；

2. 然后计算样式，也就是CSS；

3. 拿着计算好的样式与DOM Tree结合成Render Tree，也就是Layout（布局）；

   这里主要是确定每一个节点的大小和位置，没有显示的（如display为none）的DOM节点是不会进入Render Tree的。

4. 绘制；

   这里经常会看到“光栅化”这个词语。很简单，看下图就明白了：

计算好的图形是矢量的，可实际显示器上的图形是由一个一个的像素点组成的，所以这一步就需要计算机不断的计算，把每一个像素点需要显示的颜色计算出来，可想而知这一步的消耗有多么的大。实际上绘制的环节也是渲染过程中消耗最大的一步。

5. 合成，就是把不同的图层合并起来。

从浏览器接收完毕服务器发过来的资源到内容完整的显示出来，至少需要进行一次渲染。在初次完成渲染之后，如果有一些DOM的操作或其他的操作，为了完整的现实内容，整个渲染过程还会重新执行一次。

页面的生命周期

一个页面的生命周期主要包括下面四个步骤，也是优化的四个目标：

1. Load；

   也就是本文开头说的上一文的内容，通常优化的目标是1秒，这一步完成之后主要的内容和功能需要加载完成。

2. Idle；

   闲置时间，加载完成之后用户会思考一下需要操作什么，一般这里有50毫秒的时间，可以做一些预处理的工作，如果可以进行一些复杂的计算。

3. Response；

   对用户操作的响应，比如用户点击按钮，需要在100毫秒之内有反应。

4. Animate。

   页面中可视的变化都是动画，动画优化的目标与上面三种略有区别，是60fps或60HZ。这是因为大部分屏幕的刷新率是60HZ，所以，为了保证动画不显得卡顿，也需要达到这个水平。平均到每一帧，大概有16毫秒。一帧可以当做是一次渲染（实际上并不一定），也就是上面说的渲染过程，一个动画实际上就是浏览器在不断的重复渲染出新的图形的过程。

   更准确的说，一次渲染并不是每一帧的全部，因为除了完成渲染，浏览器还有其他的工作要做，所以实际上留给渲染的时间大概只有10～12毫秒，不过这不重要，只要可以保证优化之后的动画每一帧可以达到16毫秒就可以了。

   常见的动画有上拉或上滑页面显示新的内容，点击显示左侧或右侧的菜单栏等。

参考资料：

• How browsers work
• 渲染性能

[zhuanyongxigua]

总算在十一之前写完了一篇，九月份没有断档。