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

-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 = 16ms/帧；
也就是说加上每一帧的预算是16ms，减去浏览器绘制帧的时间，留给我们的大约只有10ms/帧。 如果超过这个时间，用户眼中动画的流畅度就会降低。

Idle：最大程度增加空闲时间；
利用空闲的时间完成推迟的工作。
例如，尽可能减少预加载数据以便应用快速加载，并利用空闲时间加载剩余数据。推迟的工作应分成每个耗时约 50 毫秒的多个块。
如果用户开始交互，优先级最高的事项是响应用户。

Load：1000ms内呈现内容；
在 1 秒钟内网站加载完毕。
否则用户的注意力会分散，他们处理任务的感觉会中断。启用渐进式渲染和在后台执行一些工作。将非必需的加载推迟到空闲时间段。

用户评价性能延迟
0-16ms：用户可以感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒。留给应用大约 10 毫秒的时间来生成一帧。
0-100ms：在此时间窗口内响应用户操作，他们会觉得可以立即获得结果。时间再长，操作与反应之间的连接就会中断。
100-300ms：轻微可觉察的延迟
300-1000ms：延迟感觉像是任务自然和持续发展的一部分(用户觉得这是正常流，但不会觉得快)
1000+ms：用户的注意力将离开他们正在执行的任务。
10,000+ms：用户感到失望，可能会放弃任务；之后他们或许不会再回来。

优化方法

优化内容效率

评估每个资产的表现：其价值及其技术性能。

• 它提供给用户的价值能否抵消下载并显示它的开销？

• 是否能够评估并证明其价值？

• 该资源（特别是第三方资源）能否保持稳定的性能？

• 该资源是否处于或是否需要处于关键路径中？

• 如果该资源不可用，是否会影响网页的性能和用户体验？

不断地去对资源做检查，以给用户展示想看到的高性能、有价值信息。

图片优化

JPG有损压缩，PNG、GIF无损

——需要动画：gif

——不需要动画
————不需要高画质细节清晰：jpg

————需要高画质细节清晰

——————需要>256色图片：png24
——————不需要>256色：png8
优化gif图：http://www.lcdf.org/gifsicle/

优化jpg图：http://jpegclub.org/jpegtran/

png无损优化：http://optipng.sourceforge.net/

png有损优化：https://pngquant.org/

svg压缩：https://github.com/svg/svgo

合并图像

web优化中的减少http请求数量，通过减少页面图片的数量来实现。
合并图片后，可以通过css的background-image、background-size、background-position属性定位使用单个图片。

• 合并主要用于图标和按钮等小而多的元素，复杂的图像尽量不合并，尤其是jpg格式。

• logo和内容图片不要合并，不能破坏html本身的语义结构。

• 尽可能让颜色值相近的图片合并到同一张雪碧图里面。

• 空白也要占用空间，控制图片之前的空隙。

• 追求优化度可以手动合并，追求速度可以使用工具合并，例如cssGaga：http://www.99css.com/cssgaga/

优化检测