谈论性能优化，我们需要清楚地衡量标准。前端工程师需要做的是确定页面是否根据标准指标存在性能问题，然后确定通过经验或相关工具的性能在何处，以确定特定的优化方案。
Rail Model Rail是一种以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解为关键操作（例如，单击，滚动，加载），以帮助您定义每个操作的性能目标。
铁路代表Web应用程序生命周期的四个不同方面：响应，动画，空闲和加载。用户对这些上下文的性能期望不同。因此，根据上下文以及用户如何看待延迟的用户体验研究来定义性能目标。
该模型的详细信息可以使用导轨模型来衡量性能。总结：
Chrome浏览器的性能使用灯塔生成报告指标包括：
如何测量加载速度：FCP，LCP
如何测量平滑操作：TTI，FID，TBT
如何测量页面的视觉稳定性：CLS
参考本文
JPEG使用压缩算法损失和高压缩率，因此它适用于制作旋转地图，背景地图等，可以显示丰富的颜色。但是，它不适合显示需要高细节的图片，例如徽标。
进步的jpeg
在慢网络的情况下，可以先加载相对模糊的版本，然后逐渐清除。
GIF支持少量的颜色，不适合显示照片。它不如PNG显示徽标，因此通常用于显示动画，但是仅显示动画不如使用视频格式。成熟的视频编解码器格式可以节省网络费用。
PNG使用非破坏性压缩算法，并支持适用于显示徽标或透明图片的Alpha透明通道，通常包括PNG-8，PNG-24，PNG-24，PNG-32。
WebP是一种具有高视觉体验的格式，但在IE和Safari上的功能较差。因此，需要兼容。
SVG是基于XML语法的文件格式。适用于显示矢量图。学习成本相对较高。由工具编辑的SVG将携带许多冗余信息。
优化的手段包括：
很少的程序主页优化，测试机iPhone8：
优化之前：2s+
优化之后：1s+
图片优化
渲染优化：
饲料流的优化：