前端性能优化知识整理总结

-1. 优化思想

优化原因

• 谷歌的数据表明，一个有10条数据0.4秒可以加载完的页面，在变成30条数据加载时间为0.9秒后，流量和广告收入减少了20%。当谷歌地图的首页文件大小从100kb减少到70~80kb时，流量在第一周涨了10%，接下来的三周涨了25%。

• 腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成9.4%的PV的下降，8.3%跳出率的增加以及3.5%转化率的下降。

• 让用户在使用产品时有更快更舒适的浏览体验

优化目标

Google团队提出的RAIL模型：

Response：100ms内响应；
在用户注意到滞后之前，我们有 100 ms的时间可以响应用户输入。
对于需要超过 500 毫秒才能完成的操作，始终提供反馈，则用户不会陷入困惑。这也是一些交互设计师一直坚持处处操作有反馈的原因。

Animation：10ms内生成一帧；
在数学上来说，人眼感受到的帧数为60帧/s，则会认为是流畅的动画。
1s/60 = 1000ms/60 =