性能优化分享Performance Optimization
Homepage优化方案分享2022.4.11
一、性能检测工具lighthouse（可使用调试器里lighthouse）
公司已搭建lighthouse-ci工具 ，可用vpn访问http://10.16.12.74:9001/，目前已添加3个项目
二、FCP首次内容渲染优化，服务端渲染优势
1、无需等待所有JavaScript下载完成并执行，才显示内容，用户能够更快速地看到渲染的页面，提升FCP分数与用户体验。
2、ISR优化，第一屏限制为静态组件，因为动态数据服务端没有渲染出html，需要等待所有js下载执行+请求数据才能渲染，体验不好
详见http://events.jianshu.io/p/6a28e52139aa
1、html文件不大于60kb
2、css放head标签
3、js放最后面避免阻塞渲染，或者添加defer属性
详见https://www.cnblogs.com/7Ezreal/p/12916471.html
四、FCP字体优化
1、外部字体放入我们CDN，避免外部地址网络阻塞
2、删除无用字体请求
3、添加font-display: swap属性，字体下载完成前用默认字体渲染
详见font-display的用法_CSS, font-display, font 教程_W3cplus
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://static.platform.michaels.com/font/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7W0Q5n-wU.woff2) format('woff2');
}五、LCP渲染优化（最先可见最大文本或图片）
每个页面根据业务场景设置，比如首页预加载轮播图第一张图片
1、next项目设置Image组件priority为true，优先加载图片，提升LCP分数
2、nginx项目手动设置<link rel="preload" as="image" href={carouselData[0]['imageUrl']} />
<Image src={imageUrl} priority={true} />六、TTI可交互时间优化，模块懒加载
每个楼层将进入视野时开始渲染，减少初次渲染dom数量。建议使用h5新api交叉观察器，代替scroll与getBoundingClientRect方案
详见IntersectionObserver API 使用教程 - 阮一峰的网络日志
import MikObserverLazy from 'michaels-ssr/components/MikObserverLazy';
<MikObserverLazy>{child}</MikObserverLazy>七、预加载域名dns
对第三方域的服务器请求也会影响 LCP，尤其是当浏览器需要这些请求来在页面上显示关键内容的情况下。
<link rel="dns-prefetch" href="https://imgs.michaels.com" />
<link rel="dns-prefetch" href="https://cdn.cookielaw.org" />
<link rel="dns-prefetch" href="https://akimages.shoplocal.com" />
<link rel="preconnect" href="https://static.platform.michaels.com" />
<link rel="preconnect" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://www.google-analytics.com" />八、http1.1升级到http2或http3
1.HTTP2使用的是二进制传送，更加安全稳健，HTTP1.X是文本（字符串）传送。
大家都知道HTTP1.X使用的是明文的文本传送，而HTTP2使用的是二进制传送，二进制传送的单位是帧和流。帧组成了流，同时流还有流ID标示，通过流ID就牵扯出了第二个区别
2.HTTP2支持多路复用，突破同一域名请求数量限制，实现全速传输
因为有流ID，所以通过同一个http请求实现多个http请求传输变成了可能，可以通过流ID来标示究竟是哪个流从而定位到是哪个http请求
3.HTTP2头部压缩
HTTP2通过gzip和compress压缩头部然后再发送，同时客户端和服务器端同时维护一张头信息表，所有字段都记录在这张表中，这样后面每次传输只需要传输表里面的索引Id就行，通过索引ID就可以知道表头的值了
4.HTTP2支持服务器推送
HTTP2支持在客户端未经请求许可的情况下，主动向客户端推送内容
1、由于我们的接口数据比较大，开启压缩，加快网络传输。tomcat 与nginx开启大于500b接口数据gzip压缩
2、cdn服务器针对json、js、css等文本文件开启gzip压缩
1、接口数据缓存，对不变接口数据进行缓存，再次访问不再请求
2、串行接口优化，比如sku与商品信息来回请求可后端处理好一并返回
3、获取商品数据接口精简，只返回前端需要的数据
4、前端数据懒加载，比如菜单分类推荐商品，前端鼠标移上去再加载
1、强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
2、比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。
详见https://www.cnblogs.com/chenqf/p/6386163.html
十二、图片优化与Image组件
1、akamai CDN服务器开启根据客户浏览器支持程度智能转化webp格式
2、设置懒加载loading="lazy"，有效提升分数
3、设置宽与高避免抖动，提升CLS分数
4、设置title在鼠标进入时显示的文本
5、设置alt是图像显示不出来时的替换文本，有利SEO
6、合理设置priority，优先加载图片，优化LCP分数
十三、webpack之splitChunks与externals
1、使用SplitChunks拆分主js文件，提示并发下载速度与缓存效果
2、外部拓展externals配合cdn，减少主js文件大小，提升缓存效果
详见https://juejin.cn/post/6844904103848443912
1、使用bit14或15打包esm格式
2、适配next与nginx项目
