网页首屏性能优化总结

写在前面

本文首发于公众号：符合预期的CoyPan

做为一名前端工程师，网页首屏性能优化是一个绕不开的话题。最近这段时间我作了一些首屏性能优化的项目，这里作一个小小的总结。

项目实施过程

网页是运行在浏览器端的，优化网页性能没法脱离浏览器。因此首先须要搞清楚浏览器加载一个网页的过程。最经典、常见的一个问题就是：从输入Url到网页呈如今用户面前，到底发生了什么。这里面最重要的两个点：网络请求过程以及浏览器的工做原理（主要是渲染原理）。搞清楚这两个点，咱们才有了优化的理论基础。

接下来是项目实施的过程：

明确首屏指标 -> 优化前首屏指标测量与分析 -> 优化 -> 优化后首屏指标测量与分析 -> 优化收益总结

每个过程都有必须完成的工做，并非想到哪里就优化哪里，而是须要完整、严谨的数据支持。

优化方法总结

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

资源加载优化

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

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

页面渲染优化

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

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

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

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

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

写在后面

本文总结了系统地进行前端性能优化的总体思路。具体到实施的过程，每一种优化方法都能搜到详细的文章，这里就不展开了。同时，还应该结合具体的业务场景对症下药，最终真正的提升用户体验。符合预期。

---