前端知识-用户体验

用户体验

性能优化

通过性能分析工具来观察页面各阶段的耗时和性能指标, 有针对性的进行优化

加载时间太长
- 资源体积过大: 减小产物大小, 减少传输量
  - 现代构建工具提供了压缩(compression), 树摇(tree shaking), 依赖外置(externals) 功能来减小产物大小
  - 同时提供代码拆分(code splitting), 按需加载(lazy loading) 等基本功能来减少传输量
  - 主流框架还支持服务端渲染(SSR), 部分基于React的应用框架还提供服务器组件(RSC). 流式渲染技术实现了分段渲染和传输,
  - 静态生成技术在构建阶段就生成静态页面, 用户直接访问, 省掉大量客户端脚本
- 网络延迟高
  - HTTP/2协议提升网络并发传输效率;
  - CDN分发静态资源;
  - 在边缘计算节点部署无服务器应用;
  - 使用浏览器资源提示属性(预加载, 预取, DNS预解析, 预连接);
  - 对图片进行专项优化, 如使用现代图片格式webp和avif; 预渲染缩略图; 在标准img的loading, fetchpriority, decoding, srcset属性上进行优化等
- 缺少缓存
  - 本地缓存: 利用HTTP协议的缓存头(Cache-Control, Last-Modified, ETag)来协商缓存的存储方式; 用浏览器存储API(LocalStorage, IndexedDB)来手动管理缓存; 利用Service Worker的缓存功能来最大程度缩短页面加载时间
  - 远端缓存: 在服务端或代理设备上配置内存缓存, 边缘缓存, 网关缓存等方案, 提高缓存利用率
- 渲染受阻
  - 将非关键的JS文件标记为异步加载(async或defer), 来避免阻塞HTML解析
  - 采用Web Worker和WebAssembly技术, 将非常消耗计算资源的任务移出主线程和加速计算
  - 对于白屏时间较长的单页应用, 可在主文档全局变量中预写入数据, 来减少首屏代码中的接口请求
交互过程不流畅
- 海量的数据
  - 长列表展示: 分页和虚拟滚动选择性渲染
  - 大数据可视化: 数据抽样, 分片渲染, Canvas渲染, WebGL加速技术分摊图形计算压力; 离屏渲染技术在屏幕外的缓冲区中进行图像合成
- 大量的动画
  - 在动画上使用带有硬件加速功能的CSS属性, 如transform, opacity, perspective
  - 使用浏览器提供的requestAnimationFrame函数, 或是开源动效方案, 如Lottie和Framer Motion
- 频繁的交互
  - 使用防抖(Debounce)和节流(Throttle), UI框架提供的方案(v-show和keep-alive; useTransition和useDeferredValue)来实现更友好的交互反馈
资源消耗过渡
计算资源(CPU, 内存), 网络资源(宽带, 流量)等.
- 不合理的资源加载:
  - 错误的构建设置
  - 未经优化的静态资源
  - 三方库滥用
  - 无效缓存
- 代码质量问题:
  - 只监听不卸载的事件处理器
  - 长时间执行的同步代码
  - 频繁的网络请求

UI设计

加载反馈
- 首屏骨架: 首屏页面加载时, 优先渲染一个页面骨架屏, 以减少用户白屏等待时的焦虑感
- 耗时操作: 当用户执行的动作耗时较长时, 展示一个Loading提示, 避免用户重复操作
- 强弱依赖: 在尽可能保证并发的前提下, 分别处理接口, 对弱依赖进行降级, 以提升用户体验和系统可用性
异常反馈
系统遭遇异常时给予用户的反馈
- 错误提示页面
- 轻提示(黄条, toast)
- 强提示(alert)
兜底渲染
当预期条件不满足时, 执行默认动作. 比如空数据
响应式设计
适应不同屏幕的大小
- CSS的媒体查询功能, 为不同宽度高度的屏幕应用不同的样式, 还可以检测分辨率, 色彩深度, 触摸屏, 实现深色模式
  只能改变样式, 无法反过来影响JS逻辑
- JS计算, 通过监听resize事件来感知屏幕宽度变化
交互习惯适应