性能优化笔记

谈论性能优化首先需要明确衡量标准，前端工程师需要做的就是根据标准中的指标来确定一个页面是否有性能问题，然后通过经验或者相关工具来判断性能的瓶颈在哪里，从而确定具体优化的方案。

RAIL是一种以用户为中心的性能模型，它提供了一种考虑性能的结构。该模型将用户体验分解到按键操作（例如，点击、滚动、加载）中，帮助您为每个操作定义性能目标。

RAIL代表Web应用生命周期的四个不同方面：响应、动画、空闲和加载。用户对这些上下文分别有不同的性能期望，因此，性能目标是根据上下文以及用户如何感知延迟的用户体验研究来定义的。

模型的细节可以使用RAIL模型衡量性能，总结一下：

以用户为中心。

在100毫秒内响应用户输入。

播放动画或执行滚动时，在10毫秒内生成一帧。

最大限度延长主线程空闲时间。

在5000毫秒内加载交互式内容。

指标包括：

FCP（FirstContentfulPaint）

LCP（LastContentfulPaint）

TTI（TimeToInterractive）

FID（FirstInputDelay）

TBT（TotalBlockTime）

CLS（CumulativeLayoutShift）

如何衡量加载速度：FCP、LCP

如何衡量操作流畅度：TTI、FID、TBT

如何衡量页面的视觉稳定程度：CLS

参考这篇文章

JPEG

JPEG使用的是有损压缩算法，压缩比高，所以适合做轮播图、背景图等，可以呈现丰富的色彩。但是不太适合展示logo等对细节要求高的图片。

渐进式JPEG

在网络缓慢的情况下可以优先加载出一个比较模糊的版本，再逐渐清晰。

GIF

GIF支持的颜色数量少，不太适合展示照片。展示Logo的话不如PNG，所以一般用来展示动画，但是单纯展示动画也不如使用视频格式，成熟的视频编解码格式更能节省网络开销。

PNG

PNG使用的是无损压缩算法，并且支持alpha透明通道，适合展示logo或者带透明度的图片，通常包括PNG-8、PNG-24、PNG-32。

WebP

WebP是一种有较高视觉体验的格式，但在IE和Safari上兼容性较差。所以需要做兼容处理。

SVG

SVG是一种基于XML语法的文件格式。适合展示矢量图。学习成本比较高，通过工具编辑出来的svg会携带大量冗余信息。

优化手段包含：

CSSSpirit

小图片使用Base64

使用Web字体

图片懒加载（注意intersectionObserver）

预加载（preload/prefetch/preconnect/dns-prefetch）

压缩混淆

代码拆分，按需加载

DLLPlugin

多进程加快速度

支持TreeShaking

避免回流和重绘，尽量只触发合成(仅触发合成的CSS属性只有transform和opacity)，可以参考浏览器渲染原理

避免主线程阻塞，可以使用webworker

截流防抖

减少样式计算，CSS使用BEM规范

避免频繁修改DOM，可以使用react等虚拟DOM技术

强制缓存（相关HTTP头expires和cache-control）

协商缓存（一般是last-modified和ETag两个头同时使用）

ServiceWorker拦截请求

通过HTTP2实现的Push缓存

CDN缓存

小程序首页优化，测试机器iphone8：

优化前：2s+

分包加载1s

代码执行1s

接口1s

优化后：1s+

分包加载1s

代码执行+接口1s

图片优化

使用webp

后台上传图片增加相关校验，从上游规范素材质量

设置宽高，避免页面抖动

开启懒加载只渲染可是区域内的图片，首屏从100+图片减少到30+

使用字体图标

渲染优化：

拆分接口，分屏渲染，使首页接口请求速度提升50%+

通过localstorage缓存首屏骨架，实现渐进式秒开

利用空闲计算时间进行预加载详情页关键

下架一些不再使用的实验逻辑

针对feed流优化：

无限滚动。通过一个二位数组存储数据，根据视口的位置判断到底展示哪个list，其他list使用div替代。

算法优化。之前为了保证左右两边元素个数相同，频繁获取元素的clientHeight。改为一次计算。

原文：https://juejin.cn/post/7095680719174762527