一、前端快照
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 }}></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渲染、主文档预加载
- 前端主文档加载通常指的是html文档加载，就是用户打开一个网页，首页取得文件；主文档预加载：链接上带x-preload
- Server-Side Rendering 服务器端渲染。是指在 Server 端进行页面内容的渲染，并 HTML 中直接返回渲染结果。HTML 完成加载，即完成了页面的渲染，页面的性能受机器性能和网络的影响被降到了最低。
FCP：
页面视图首次渲染，通常是 SSR 的首 Chunk 内容或者是快照上屏时间，用户首次看到页面视图的时间
FSP:
从点击的时间到首屏 内容稳定渲染完成的时间（含图片渲染完成），用户可以看到首屏的全部内容（首屏可见且内容稳定）
