前端性能优化篇

你遇到过性能很差的网页吗？

这种网页响应特别慢，占用大量的CPU和内存，浏览起来常常卡顿，页面的动画效果也不流畅。

你会有什么反应？可能大多数用户都会关掉这个网页，访问其他网站，作为一名开发者，如何才能提高性能呢？

一、网页生成流程

要理解网页性能为什么不好，就要了解网页的生成过程

网页的生成过程，大致可以分为五步：

1. HTML代码转化为DOM
2. CSS代码转化为CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一颗渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上

前三步都比较快，耗时的是第四步和第五步

“生成布局”（flow）和“绘制”（paint）这两步，合称为“渲染”（render）

二、重排和重绘

    网页生成的时候，至少会渲染一次。用户在访问的过程中，还会不断重新渲染