web性能优化方案推荐？

Question

业界是否存在比较完善的web性能优化方案？
在网上搜到的性能优化大多比较零碎，处理某个具体问题，但大多性能问题会出在方方面面，解决部分并不能带来明显的性能提升。性能瓶颈也都不太一样，有没成熟的方案可以借鉴。

我设想的方案是出个浏览器插件，具备如下功能：
1、识别出网站性能问题。
2、给出性能分析报告。
3、提供指导建议。
4、给出对应的尝试效果。
5、性能问题告警。

对比chrome的Lighthouse，
功能1基本实现，但缺少网络响应的性能问题环节，比如网络响应慢的问题。
功能2比较粗略，有评分和类型划分，但性能问题是如何分析出来的，这部分只能通过相关文档和翻看代码实现知道。
功能3给出了大致的指导方向，满足需求。
功能4虽然给出了预计节省时间，但验证效果并不方便，如果能提供配套工具会更好些。比如无用的代码，能够提供工具对这块代码进行删除。

Answer 1

你这个问题太大了，前端的性能优化涉及方面太多，js语法方面/内存/css/网络请求/同步异步/worker/web缓存/web API方面/框架层面...。通常来说，普通的网站，我们衡量web性能，可以参考谷歌给出的Web Vitals标准

Web Vitals

谷歌给出的标准对于一般的网站来说就可以很好的衡量性能是否够好，体验对于用户是否友好了。

但是对于不同类型的网站，这个标准并不能完全覆盖。比如说在线PS，复刻了PS的所有功能，除了要尽量做到谷歌的标准，更多关注的是解析文件的速度，每次页面绘制时的帧率等。这些都是要根据自己项目的实际情况去做优化，并且优化方案肯定不是一定的。比如某个功能导致了重排或者重绘，我们可以选择用canvas避免，也可以选择用一些CSS属性避免，甚至可以直接砍掉这个功能，用另外的交互方案代替，这也算是一种优化。所以哪种优化方式才是最合适的，不能一概而论，需要结合项目情况具体问题具体分析。

如何分析性能？Chrome有Web Vitals的插件，可以直接用来分析。Dev Tools的Performance/Memory/Lighthouse/Perfomance insights/NetWork都可以用来分析性能，只是侧重点不同。

最后，有些性能问题必须要对症下药，深入排查，不然简单的工具根本找不出来问题在哪。举个例子，当你发现你的页面内存一直在增长，但是看上去所有代码都是正常的，问题在哪？你只有去针对内存泄露这个点，用能看到内存详情的工具排查到底是哪里出了问题。