首屏优化思路

前端首屏性能优化的知识点很多，很杂。我分成了两个大的方向：资源加载优化 和 页面渲染优化。

资源加载优化
资源加载的优化，我分成了 5 个部分：减小资源大小，减少 Http 请求次数，提高 Http 响应速度，优化资源加载时机，优化加载方式。

每一个部分，都有很多的工作可以做。有的是需要从项目工程化上面解决，有的需要从网络基础设施上解决，有的是从代码层面解决。最终总结起来，资源加载优化主要是从大小、数量、速度、时机这几个基本方面进行优化，每一项优化最终都是对这四个基本面中一个或多个方面的优化。

页面渲染优化
页面渲染优化前，首先需要搞清楚浏览器的渲染原理，然后主要是在代码层面进行优化。我分了 3 个部分：优化 html 代码，优化 js 和 css 代码，优化动画效果。

浏览器渲染，还是那个经典的像素管道：

clipboard.png

优化 html 主要是对页面整体结构的优化，最终的目标尽可能快的生成 DOM 树，CSSOM，触发渲染，不要发生阻塞的情况。就是将像素管道中的 Style 和 Layout 尽可能提前。

优化 js 代码是为了减轻主线程的压力，防止主线程因长时间执行 js 代码，阻塞了页面渲染。即减少像素管道中的 JavaScrtip 的耗时。优化 css 代码是为了减少像素管道中 Style 的耗时。同时，还应该注意尽量减少重排和重绘，防止像素管道被中断然后从头再次触发。

优化动画效果是为了尽可能跳过上述像素管道中的 Layout 和 Paint。