本文整理了近两年来国际站店铺在体验优化上做的努力和探索,也取得了不错的成果,分享出来希望对其他类似场景能有帮助。
性能优化大体上可以分为网络性能优化和交互体验优化:
- 交互体验优化,优化页面的交互体验,滚动是否顺滑,点击反馈是否及时,操作是否有卡顿等
- 避免 DOM 的重绘和重排
- DOM 操作尽量减少或者进行操作合并
- 动画元素尽量采用 absolute 等脱离文档流的定位
- 确保对用户的操作反馈及时,刷新率保持 60fps
- 保证每一个 js 任务在 1000/60=16.67ms 执行完毕
- 复杂计算交给 woker 进程
- 避免 DOM 的重绘和重排
- 网络性能优化,大多数情况是要进行首屏性能优化
- 减少 ttfb 的时间
- 减少 dns 查询、TCP 握手建链、ssl 建连
- 避免 302 redirect
- 减少后端
- 减少 ttfb 的时间