Web性能
前言
还记得刚参加工作那会，用 Flash+ActionScript3 做网页游戏，由于Flash游戏的制作工艺已经较为成熟，实现某样功能，很多时候只需调用API加上一些对数据的处理即可，再复杂一点，核心的战斗场景，主要的难点也是JS的逻辑，至于渲染层面，Flash Player 已经帮我们做好了，我们不用管，想管也管不了。当然，flash 开发中对图片素材的优化还是很重要的，通常以加载时的 loading 时间作为一个游戏体验和性能的参考指标。
后来做Web前端，对于性能的要求逐渐升高，可以使用的方法也越来越丰富。将H5游戏里的大量动画帧合并为一张大图（雪碧图），或对图片素材做预加载等等，都是性能优化的必要手段，直接影响到用户体验。
时间来到2021年，随着移动互联网和Web技术的快速发展，网页已经在我们的生活中无处不在。电脑上看通过浏览器看新闻，手机app中内嵌webview以实现内容的动态更新，透过微信公众号浏览文章，小程序本质上也是运行在webview上的网页。
可见，网页或者浏览器已经成为PC端和移动端不可或缺的一部分。而网页体验的好与坏除了内容之外，另一个重要的指标就是网页性能。
本文将从以下几个方面系统的阐述网页性能的方方面面，希望读完后能让你有所收获。
- 为什么要关注Web性能？
- 什么是Web性能？
- Web性能的衡量标准？
- 如何优化Web性能
- Web性能优化实战
- Web性能不退化机制
一、为什么要关注Web性能？
Web性能反应的是网页的加载和渲染速度快慢，以及对用户操作的响应是否及时。
性能糟糕的网页显示慢，反应迟钝，增加了被用户抛弃的风险，甚至可能内容展示不全。 性能较好的网页的目的，是让用户不要关注性能，而是网站的内容。
站点的速度会直接影响到站点的 跳出率、转化率、收益、用户满意度，以及 SEO搜索引擎优化 等，这也是我们要重视Web性能的原因。
二、什么是Web性能？
三、Web性能的衡量标准？
Web性能优化历史
性能标准
性能指标
性能测试工具
四、如何优化Web性能？
页面呈现过程：
- 流程分为哪些步骤？每个步骤做了什么事情？
- 页面如何加载，JS为何会阻塞页面加载？
- 合成是什么？为什么需要合成？
- 硬件加速是什么？如何触发硬件加速？
优化策略：
-
加载性能 HTTP2
-
渲染性能
五、Web性能优化实战
六、性能不退化机制
性能监控
