前端性能优化的方案

一、前端快照

1、为什么需要前端快照？

当用户浏览应用时，快速加载和展示页面，可以缩短白屏时间；

2、前端快照的基本原理

保存页面的DOM结构和状态信息

3、获取页面快照

在需要获取快照的时候，获取当前页面的html和状态

const snapShot = {
  html: document.documentElement.outerHtml
}

通过上述代码我们将页面的html结构和状态信息保存在一个对象里面；然后存进local里面

4、恢复页面快照

// 根据保存的快照信息，恢复页面状态
function restoreSnapShot(snapShot) {
  document.write(snapShot.html);
}

注意：前端页面快照在网速慢的情况下可能带来页面闪动，在一定程度上影响用户的体验；开发复杂性和维护成本都会增加，因为前端快照需要服务器端渲染；

二、图片优化

2.1：商详主图渐进加载

1、什么是图片渐近加载

通过对首次加载到图片质量和尺寸进行压缩，达到图片快速上屏效果。等高清图加载完成将图片替换成高清图

2、原理

CDN、OSS支持根据图片链接拼接的特殊字段对图片质量及尺寸进行压缩

3、可交互之后图片渐进加载

渲染流程

1、渲染低清图，首次拿到图片链接进行uri转换，包含webp、图片质量等处理

2、压缩图片质量

参考OSS图像处理、CDN图像处理

3、高清图加载完成直接进行替换

// 此处省略源码
const highResImage = new Image();
highResImage.src = highPicUrl;

注意：图片渐进加载，虽然低清图文件较小，加载速度较快，但是低清图视觉质量差，可能影响用户的视觉体验；所以我们也可以采取高清图和低清图竞对的方式，谁先加载完成就渲染谁；

2.2、其它策略

• 将所有小图片限制在3kb
• 降低图片数量
• 图片推zchche
• 图片定宽高、减少重绘
• 使用iconfont
• 图片预加载

三、字体预上屏

什么是字体预上屏？

可以提前加载字体，确保页面可以正常渲染文字，避免出现文字闪烁或者文字空白的现象，提高用户的体验；
1、将用到的字体在第一段流中提前加载到内存中

<div style={{ fontFamily: 'AlibabaSans-102-Bold', fontSize: 0 }}>1</div>
  <div style={{ fontFamily: 't3c-iconfont', fontSize: 0 }}>&#xe61d;</div>

四、css、js、接口预加载

什么是预加载？

提前加载某些资源，如css、js文件或者字体，减少页面加载时间；

1、css和js预加载
通过link标签的prefetch属性进行预加载所需要的资源。当用户点击链接时，资源已经下载好了，可以立即使用；

<link rel="prefetch" href="style.css">
<link rel="prefetch" href="script.js">
// DEMO
// js资源预下载
jsList?.map?.((item) => {
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = item;
  link.as = 'script';
  document.head?.appendChild?.(link);
});
// css资源预下载
cssList?.map?.((item) => {
  const link = document.createElement('link');
  link.rel = 'prefetch';
  link.href = item;
  link.as = 'style';
  document.head?.appendChild?.(link);
});

2、接口预加载
例如弹窗的内容是异步渲染的，则可以首屏渲染完成之后，预先请求弹窗的数据；
注意：预加载会存在资源浪费的情况，比如预加载的资源不是用户需要的，或者用户快速离开页面等，都是一种资源的浪费；因此，接口预加载应该谨慎使用，根据具体的应用场景来决定是否使用接口预加载

五、首屏模块数据裁剪

1、首屏模块数据走ssr、非首屏模块数据异步加载

六、骨架屏

1、什么是骨架屏

骨架屏就是在网页或者应用的数据还未完全加载时，显示的占位图，用于预览页面布局；
它的作用就是提高用户体验、减少用户的等待感知，使页面加载变得更为顺畅；

2、前端实现骨架屏的方式很多：

1、使用服务端渲染，在首屏渲染的时候，直接返回骨架屏html，可以快速展示给用户；
注意：骨架屏不适用于所有类型的页面，对于内容简单或者加载速度比较快的页面，就会显得多余了，可以使用简单Loading组件过渡效果；

七、ssr渲染、主文档预加载

1. 前端主文档加载通常指的是html文档加载，就是用户打开一个网页，首页取得文件；主文档预加载：链接上带x-preload
2. Server-Side Rendering 服务器端渲染。是指在 Server 端进行页面内容的渲染，并 HTML 中直接返回渲染结果。HTML 完成加载，即完成了页面的渲染，页面的性能受机器性能和网络的影响被降到了最低。

FCP：
页面视图首次渲染，通常是 SSR 的首 Chunk 内容或者是快照上屏时间，用户首次看到页面视图的时间
FSP:
从点击的时间到首屏 内容稳定渲染完成的时间（含图片渲染完成），用户可以看到首屏的全部内容（首屏可见且内容稳定）