性能与体验优化 ✅
聚焦首屏、列表滚动、图片与资源、弱网离线、交互流畅、度量工具与优化闭环。
首屏性能如何优化？
答案
核心概念:
降低首包体积、减少首屏渲染路径上的网络与计算、并发准备关键资源；避免高频 setData 与大对象下发。
示例说明:
策略：分包/预下载 → 骨架屏 → 关键数据优先 → 次要资源延迟
面试官视角:
- 要点清单: 体积/网络/计算三维度；骨架与占位
- 加分项: 量化首屏 TTI/FP；自动化对比
- 常见失误: 首屏依赖分包资源；同步阻塞初始化
延伸阅读:
- 官方性能最佳实践
包体与资源体积如何控制？
答案
核心概念:
主包瘦身、静态资源压缩与去重、按密度与格式(WebP/AVIF)；监控体积增长与阈值告警。
示例说明:
资源策略：图片压缩/雪碧/按需；去除未使用组件与依赖
面试官视角:
- 要点清单: 体积来源拆解；持续监控
- 加分项: 产物审计与依赖白名单
- 常见失误: 多端资源重复打入
延伸阅读:
- 分包与资源管理文档
长列表/滚动性能如何优化？
答案
核心概念:
窗口化/分片渲染、最小化 setData、避免在滚动回调中重计算；使用内置组件能力替代频繁 DOM 更新心智。
示例说明:
做法：分页 + 视窗渲染 + 去抖(setData) + 预取下一页
面试官视角:
- 要点清单: 窗口化；合并更新；事件去抖
- 加分项: Worker 计算；占位与回收
- 常见失误: 滚动中 setData 大数组
延伸阅读:
- 列表组件与性能建议
图片加载与显示如何提速？
答案
核心概念:
渐进加载、占位图、CDN 变体(格式/尺寸)、缓存与并发控制；避免一次下发大量大图。
示例说明:
<image src="thumb" lazy-load="true" />
面试官视角:
- 要点清单: CDN 规格；占位与懒加载
- 加分项: 关键图预热/预渲染
- 常见失误: 原图直出；无占位
延伸阅读:
- 图片组件文档
setData 频率与数据量如何把控？
答案
核心概念:
合并/去抖/节流；传递最小 diff；数据扁平化；避免跨层级全量替换。
示例说明:
// 去抖 setData（示意）
面试官视角:
- 要点清单: 频率/大小预算；监控指标
- 加分项: 自动化拦截/告警
- 常见失误: 频繁小粒度更新
延伸阅读:
- 数据绑定机制
弱网与离线体验如何设计？
答案
核心概念:
请求超时/重试/退避、离线队列与缓存、网络状态订阅与提示；幂等与冲突解决。
示例说明:
wx.onNetworkStatusChange(({ isConnected }) => hint(isConnected))
面试官视角:
- 要点清单: 弱网策略；离线提交
- 加分项: 数据一致性；回放机制
- 常见失误: 仅失败重试；无反馈
延伸阅读:
- NetInfo/网络文档
卡顿与掉帧如何定位？
答案
核心概念:
使用性能面板/日志埋点定位重计算、频繁 setData、图片解码与滑动抖动；将重任务移至 Worker 或切片。
示例说明:
排查：事件 → setData 次数/大小 → 图片 → 滚动回调
面试官视角:
- 要点清单: 工具链；瓶颈拆解
- 加分项: 持续性能看板
- 常见失误: 缺监控，仅凭体验
延伸阅读:
- 性能面板文档
动效与交互流畅度如何保障？
答案
核心概念:
使用原生能力/内置动画接口，避免 JS 驱动的长链路动画；手势与动画协调，保证中断/回弹正确。
示例说明:
<movable-view direction="all" />
面试官视角:
- 要点清单: 原生驱动；中断管理
- 加分项: 复杂手势吸附/联动
- 常见失误: JS 循环驱动动画
延伸阅读:
- 动画/手势组件
骨架屏/占位与渐进式渲染？
答案
核心概念:
骨架快速反馈，随后渐进替换真实内容；占位减少布局抖动。
示例说明:
<view class="skeleton-card" />
面试官视角:
- 要点清单: 骨架覆盖比例；替换时机
- 加分项: 自动化生成骨架
- 常见失误: 骨架样式跳变明显
延伸阅读:
- 设计与实现案例
性能度量与优化闭环如何建立？
答案
核心概念:
定义关键指标(首屏/TTI/掉帧/错误率/体积)，自动化采集并建立阈值告警；灰度对比与回归测试形成闭环。
示例说明:
链路：采集 → 看板 → 告警 → 灰度 → 回归
面试官视角:
- 要点清单: 指标体系；自动化
- 加分项: A/B 与回归基线
- 常见失误: 无基线与阈值
延伸阅读:
- 监控平台文档