在互联网时代，网络应用的性能对于用户体验、市场竞争力和公司声誉至关重要。随着Web技术的不断发展，用户对网页加载速度和响应速度的期望不断提高。因此客观、标准地衡量页面性能对于优化页面具有关键性的指导作用。通过准确地评估性能瓶颈和问题所在，我们可以更有效地调整和优化页面，从而改善用户体验，提高市场竞争力。
FCP (First Contentful Paint)
首次内容绘制，标记浏览器渲染来自 DOM 第一位内容的时间点，内容可能是文本、图像等元素,是用户感知加载速度的一个重要指标。LCP (Largest Contentful Paint)
最大内容绘制时间，计算从页面开始加载到用户与页面发生交互（点击，滚动）这段时间内，最大元素绘制的时间，该时间会随着页面渲染变化而变化，因为页面中的最大元素在渲染过程中可能会发生改变。LCP (Largest Contentful Paint)
累计布局偏移。测量在页面的整个页面生命周期内发生的所有意外布局偏移中累计的布局偏移分数。更多的页面指标不在重复解释，感兴趣可以查看https://web.dev/metrics/
- 在实验场景中：使用工具在稳定、受控的环境中模拟页面加载
- 在实际场景中：基于真实用户的实际页面加载与页面交互
1、ftwo 之家基于web-vitals包装的前端性能采集工具 2、Chrome User Experience Report 是google的性能检测工具，通过引入google提供的脚本，将我们的客户端数据上报google，从而统计你的网页的性能报告和评估 如何衡量线上页面站点性能，推荐使用之家的ftwo前端线上采集工具，基于真实用户实际浏览过程中收集相关指标，坏体验的UV指标参照如下，坏UV占比控制在25%以下
► 开启Gzip压缩
gzip 是 GNUzip 的缩写，最早用于 UNIX 系统的文件压缩。HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。目前主流的浏览器，Chrome，firefox，IE 等都支持该协议。常见的服务器如 Apache，Nginx，IIS 同样支持，gzip 压缩效率非常高，通常可以达到 70% 的压缩率。
►使用 HTTP 2
HTTP2.0 大幅度的提高了 web 性能，在 HTTP1.1 完全语义兼容的基础上，进一步减少了网络的延迟。实现低延迟高吞吐量。
► 使用CDN
使用内容分发网络（CDN）是一种优化页面性能的有效方法，它能够缩短网络加载时间，为用户提供更快的访问速度。CDN 将网站的静态资源（如文档、图片、样式表、脚本等）复制到分布在各地的服务器上，使用户能够从离他们较近的服务器上加载资源，从而减少网络延迟。为了从 CDN 中获得最佳性能，应针对文档、资源和接口分别设置合适的缓存时长。以下是一些建议： 1. 文档：对于 HTML 文档，建议设置较短的缓存时长（如几分钟到几小时），以便在内容发生更改时，用户能够尽快获取到更新后的内容。 2. 资源：对于 CSS、JavaScript 等静态资源，可以设置较长的缓存时长（如一周到一个月），因为这些资源的更新频率通常较低。但务必确保资源具有唯一的版本号或哈希值，以便在更新时使缓存失效。 3. 接口：对于 API 接口，缓存时长的设置要根据数据更新频率进行调整。如果数据经常发生变化，建议使用较短的缓存时长；如果数据变化不大，可以使用较长的缓存时长。同时要注意合理设置缓存策略，如 Cache-Control 头部，以确保数据的实时性和准确性。通过使用 CDN 并合理设置缓存时长，我们可以显著提高页面加载速度，优化用户体验，并节省服务器带宽和资源。
图片往往是一个 h5 页面的重要组成部分，然而图片占用的资源往往也是很大的，因此图片优化在性能优化中占据很重要的地位。下面来看几种优化图片的方式。
图片懒加载：当图片出现在可视区域或者即将出现在可视区域时再加载图片，避免一次性加载全部图片，会对用户体验造成很大影响。
降低图片质量：一些图片适当降低图片质量时，通常是看不出来区别的，尤其是作为背景图片时，可以使用dis命令进行图片压缩。
尽量使用CSS代替图片：一些简单的图片效果如果可以通过 CSS 效果实现则进行用 CSS 来实现，可以减小请求次数或者打包体积大小。
图片指定尺寸：图片裁剪成合适尺寸大小,img元素固定宽高，避免因网络加载导致页面抖动。
使用webp图片：WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
在项目中经常会使用到第三方的插件，比如在模板页中引入或是全局注册，会导致项目首屏资源体积增加，改成组件内局部注册或是动态引入lib的地址场景一: 在我们营销专题页中弹窗种类很多，但是实际在用户端弹出使用时刻，只会是一两个弹窗。因此统一所有弹窗的入口，在通过动态组件只弹窗某一个弹窗。
场景二: 长页面，板块很多，而且都是城市维度的动态数据，非首屏的板块，提前预热计算板块是否存在，通过动态组件和板块的高度，当滑动可视窗口才开始下载资源和渲染。
通过指令和组件完成状态，实现组件有序显示，避免出现页面CLS偏移。
（1）自定义指令v-module-status，绑定两个参数一个版块的顺序，一个版块的执行完成状态。（2）定义一个全局组件状态存储对象，存储页面使用了v-module-status指令的组件状态数据。（3）指令中检查当前组件的执行完成状态是否完成，若完成，则遍历全局组件状态存储对象，查找出当前组件之前的所有组件，查看是否之前的所有组件已经完成接口请求，如果完成则把当前组件的display：none移除，反之设置成display:none，同时当前之后的所有组件也进行更新是否显示的状态。（4）使用指令的组件内部需要配合设置一个接口请求完成状态的标识，传递给指令，能保证指令可以拿到当前组件的接口请求状态。广告位投放中间页，根据一定条件，跳转不同的落地页，影响页面的重定向时长。 带车系投递（高意向度）滚动锚点至猜你喜欢板块，不带车系通投（低意向度）锚点到SKU板块；猜你喜欢、SKU板块中间存在N个动态的板块，自动锚点时，页面会不断跳动，给用户带来不友好的体验。1. 去掉自动锚点功能，让用户自主地浏览页面和板块，避免页面频繁跳动。2. 优化自动锚点逻辑，在用户关闭半屏开屏弹窗后再进行锚点跳转。这样一来，用户可以先关注弹窗内容，并在关闭后再被引导至相应板块，从而减少页面跳动现象。
► vue 路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。let router = createSimpleRouter({
routes: [
{
path: `${URL_PREFIX}/index`,
name: "index",
component: () => import(/* webpackChunkName: "index" */ '../views/index/Index'),
meta: meta
},
{
path: `${URL_PREFIX}/cities`,
name: "cities",
component: () => import(/* webpackChunkName: "cities" */ '../views/cities/Index'),
meta: {
...meta,
subcategoryId: 11750,
}
},
{
path: `${URL_PREFIX}/success/:encryptedOrderId`,
name: "success",
component: () => import(/* webpackChunkName: "success" */ '../views/success/Index'),
meta: {
...meta,
subcategoryId: 14393,
}
}]
});
https://web.dev/metrics/
https://www.infoq.cn/article/HVyqFtlxgDao4vq5Durp
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/70027824/viewspace-2989591/
，如需转载，请注明出处，否则将追究法律责任。
