优化性能提高用户体验

用户体验

除了之前我讲的技术功能实现和项目架构设计，最重要的就是人机交互中的用户体验。

用户界面、应用框架、工具链、编程语言等，都是为了用户体验服务的。

用户体验广义上可以分为性能、UI 设计、可访问性、个性化。

下面我以性能为例来说明下如何提高用户体验。

性能分析

我们可以打开 google 的 Chrome devtools，查看 performance 分析页面性能。

比如从 render-blocking resources ，查看哪些资源阻塞页面渲染。

然后就是一些性能指标，比如：

• fcp：首次内容绘制，用户看到页面第一个元素的时刻
• lcp：最大内容绘制，页面完整呈现的时间

还有 火焰图 long task，main 栏火焰图中标红的函数调用，表示执行时间较长的函数 long task 。这样我们就可以定位到这些低性能代码进行优化。

页面加载时间太长

资源体积优化

1. 减少产物大小

   1. 压缩（compression）
   2. 树摇（tree shaking）
   3. 依赖外置（external modules）

2. 减少传输量

   1. 代码拆分（Code Splitting）
   2. 按需加载（lazy loading）
   3. 服务端渲染（SSR）
   4. react 服务器组件（RSC）
   5. 流式渲染（streaming rendering）
   6. 静态生成（静态展点生成（SSG）、增量静态生成（ISG））

网络延迟优化

1. http / 2
2. cdn
3. 边缘计算
4. 浏览器资源提示
   1. preload
   2. prefetch
   3. dns-prefetch
   4. preconnect
5. 图片优化
   1. webp / avif
   2. 懒加载
   3. 预渲染缩略图
   4. 响应式图片（srcset）

缺少缓存

1. 本地缓存
   1. http 缓存头（cache-control 、ETag 等）
   2. 浏览器本地存储
   3. service worker
2. 远端缓存
   1. 内存缓存
   2. 边缘缓存
   3. API 网关

渲染受阻

1. js 异步加载 （async 、defer）
2. Web Worker
3. Web Assembly

交互过程不流畅

海量的数据

1. 长列表展示
   1. 分页
   2. 虚拟列表
2. 大数据可视化
   1. 数据抽样
   2. 分片渲染
   3. canvas 渲染
   4. webgl 加速

大量的动画

1. 开启 css 硬件加速
   1. transform
   2. opacity
   3. requestAnimationFrame
2. 开源动效方案

频繁的交互

1. js
   1. 防抖
   2. 节流
2. 框架 react / vue
   1. v-show
   2. keep-alive
   3. useTransition
   4. useSDeferredValue
   5. useOptimistic

资源消耗过渡

1. 不合理的资源加载
   1. 错误的构建设置
   2. 未经优化的静态资源（产物分析工具分析）
   3. 第三方库滥用
   4. 无效缓存
2. 代码质量
   1. 只监听不卸载的事件处理器
   2. 长时间执行的同步代码
   3. 频繁的网络请求

上述来自：性能优化