小程序性能优化核心知识体系
本章梳理小程序性能优化的四大核心维度：渲染性能、加载性能、内存优化、网络优化。面试中常围绕这四个方向出题，考察候选人对小程序运行机制、性能瓶颈定位及优化手段的掌握程度。以下从知识结构到常见面试问答逐层展开。
| 优化维度 | 核心指标 | 常用手段 | 面试高频点 |
|---|---|---|---|
| 渲染性能 | FPS、首帧时间 | WXS、避免setData大数据、虚拟列表 | diff机制、渲染层与逻辑层通信 |
| 加载性能 | 首屏秒开率、包体积 | 分包加载、预加载、SSR/骨架屏 | 分包策略、启动流程 |
| 内存优化 | 内存占用、GC频率 | 及时释放引用、复用对象 | 内存泄漏场景、Heapshot分析 |
| 网络优化 | 请求耗时、成功率 | CDN、预连接、数据缓存、请求合并 | 域名收敛、弱网适配 |
面试问答卡片一：渲染性能
面试问题：如何优化小程序的渲染性能？请列举具体手段。
面试官考察点：是否理解小程序双线程架构（渲染层 vs 逻辑层），是否掌握 setData 本质及 diff 机制，是否有实际优化经验。
回答框架：
- ① 减少 setData 数据量，只更新变化部分，避免传递整个对象。
- ② 使用 WXS 在渲染层处理简单逻辑，减少跨线程通信。
- ③ 对长列表使用虚拟列表组件（如 recycle-view），控制渲染节点数。
- ④ 避免频繁触发重排重绘：使用 CSS 动画代替 JS 动画，减少 onPageScroll 中的复杂计算。
示例回答：“我从三个维度优化渲染：第一，严格控制 setData 数据量，每次只传变化字段，并用 diff 分析工具检查冗余。第二，在商品列表页使用 WXS 处理价格过滤，避免逻辑层频繁回调。第三，滚动列表改用 recycle-view，同时开启 component2 编译模式以提升渲染效率。”
可能追问：
- setData 底层是如何做 diff 的？
- WXS 有哪些限制？与纯 JS 相比优缺点？
- 虚拟列表在 iOS 低端机上的表现如何优化？
面试问答卡片二：加载性能
面试问题：如何减少小程序的启动和页面加载时间？
面试官考察点：是否了解小程序启动生命周期（冷启动/热启动），是否掌握分包、预渲染、数据预拉取等机制。
回答框架：
- ① 分包策略：按业务维度分包，首包只放首页及核心依赖，非首屏功能放入独立分包。
- ② 使用预加载：通过 preloadRule 定义分包预加载关系，利用空闲时间下载分包。
- ③ 数据预拉取：在页面跳转前用 wx.prefetch 或提前发起网络请求。
- ④ 包体积优化：压缩图片、去除无用资源、使用 Tree Shaking 减少无用代码。
示例回答：“以电商小程序为例，我把商品详情、订单等独立分包，首页分包控制在 1.2MB 以内。同时配置 preloadRule，在首页加载完成后预加载详情分包。网络层面，在 App onLaunch 中预拉取首页配置数据，让首屏渲染直接使用缓存，节省 300ms 等待。”
可能追问：
- 分包加载失败如何降级？
- 预拉取的数据如何与页面生命周期配合？
- 如何测量首屏秒开率？使用什么工具？
面试问答卡片三：内存优化
面试问题：小程序内存泄漏有哪些常见原因？如何排查和优化？
面试官考察点：是否理解 JavaScript 的垃圾回收机制，是否清楚小程序中容易造成内存泄漏的典型场景（闭包、定时器、全局变量等）。
回答框架：
- ① 常见原因：未清除的 setInterval/setTimeout、事件监听未移除、全局变量引用、闭包循环引用。
- ② 排查手段：使用开发者工具 Memory 面板拍摄堆快照（Heapshot），对比前后对象数量变化。
- ③ 优化措施：页面 onUnload 时清除所有定时器和监听；使用 WeakMap 保存 DOM 引用；避免在全局对象上挂载大数据。
示例回答：“我遇到过搜索页面轮询接口导致内存持续增长。排查时用开发者工具抓取 Heapshot，发现每次轮询都生成新的函数闭包。优化方案：在页面 onLoad 时只注册一次定时器，并在 onUnload 中 clearInterval；轮询回调使用箭头函数捕获 this 而非每次都新建匿名函数。”
可能追问：
- WeakMap 和 Map 的区别？为什么 WeakMap 更适合存 DOM 引用？
- 小程序和浏览器环境的内存管理有何差异？
- 如何设计一个内存自监控的上报机制？