前端知识-用户体验

用户体验

性能优化

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

• 加载时间太长

  • 资源体积过大: 减小产物大小, 减少传输量
    • 现代构建工具提供了压缩(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事件来感知屏幕宽度变化
• 交互习惯适应

可访问性

• 国际化业务: 提供多语言切换. Vue的vue-i18n, React的reactIntl, Angular的angular-translate
• 视听残障人士: 适配屏幕阅读器, 利用色彩对比度检查工具确保颜色组合对色盲用户友好

个性化

• 主题换肤
• 记忆
  在不借助服务端保存数据的情况下, 通过本地存储记住用户上一次访问的状态
  比如页面滚动位置, 数据筛选条件, 复杂表单的草稿等
• A/B测试
  针对不同的用户画像, 渲染不同的页面. 通过算法分析优化页面布局, 找到转化率最高的设计方案