高级前端小程序开发面试宝典

1. 小程序核心概念与原理

1.1 小程序的本质

问题：小程序的本质是什么？它与传统 web 应用的区别是什么？
答案：小程序是一种基于 Web 技术（HTML/CSS/JavaScript）的轻量级应用，运行在微信、支付宝等超级应用内部。与传统 Web 应用相比，它具有：
- 更接近原生应用的体验
- 无需安装，即点即用
- 有固定的生命周期和页面管理
- 受限于平台的 API 和能力
- 运行环境是基于 WebView 或类似技术的容器

1.2 小程序的架构

问题：请描述小程序的架构设计。
答案：小程序采用双线程架构：
- 渲染线程：负责页面渲染，运行在 WebView 中
- 逻辑线程：负责业务逻辑，运行在独立的 JavaScript 引擎中
- 两者通过消息通信机制进行数据传递
- 这种架构保证了小程序的性能和安全性

1.3 小程序的生命周期

问题：请详细说明小程序的生命周期（包括应用和页面）。
答案：
- 应用生命周期：
  - onLaunch：小程序初始化时触发
  - onShow：小程序启动或从后台进入前台时触发
  - onHide：小程序从前台进入后台时触发
  - onError：小程序发生错误时触发
- 页面生命周期：
  - onLoad：页面加载时触发，只触发一次
  - onShow：页面显示时触发
  - onReady：页面初次渲染完成时触发，只触发一次
  - onHide：页面隐藏时触发
  - onUnload：页面卸载时触发

2. 小程序性能优化

2.1 启动优化

问题：如何优化小程序的启动性能？
答案：
- 减少代码包大小（分包加载、按需引入）
- 优化首屏渲染（预加载数据、骨架屏）
- 合理使用 onLaunch 和 onShow 生命周期
- 避免在启动时执行耗时操作
- 使用 wx.getBackgroundAudioManager() 等 API 预加载资源

2.2 渲染优化

问题：如何优化小程序的渲染性能？
答案：
- 减少 setData 调用次数和数据量
- 使用 this.setData 时只传递变化的数据
- 避免在 onPageScroll 等频繁触发的事件中使用 setData
- 使用虚拟列表处理长列表
- 合理使用 wx.createSelectorQuery() 减少 DOM 操作

2.3 网络优化

问题：如何优化小程序的网络请求？
答案：
- 使用 wx.request 的 header 字段设置缓存策略
- 实现请求队列和并发控制
- 使用 WebSocket 进行实时通信
- 合理使用本地存储缓存数据
- 图片资源使用 CDN 加速

2.4 内存优化

问题：如何优化小程序的内存使用？
答案：
- 及时清理定时器和事件监听器
- 避免在页面中存储大量数据
- 使用 wx.removeStorageSync 清理不需要的本地存储
- 合理使用 wx.createWorker 处理耗时任务
- 页面卸载时释放资源

3. 小程序安全

3.1 安全问题

问题：小程序常见的安全问题有哪些？
答案：
- 接口安全：未对用户输入进行校验
- 数据安全：敏感数据未加密传输
- 逻辑安全：业务逻辑漏洞
- 依赖安全：第三方库存在安全漏洞
- 存储安全：本地存储中的敏感信息

3.2 安全措施

问题：如何保障小程序的安全性？
答案：
- 接口请求使用 HTTPS
- 实现接口签名和参数验证
- 敏感数据加密存储和传输
- 定期更新第三方依赖
- 使用 wx.login 获取 code 进行登录认证
- 前端输入验证和后端双重校验

4. 小程序高级特性

4.1 自定义组件

问题：请详细说明小程序自定义组件的使用和注意事项。
答案：
- 使用 Component 构造器定义组件
- 通过 properties 定义外部传入的数据
- 通过 data 定义组件内部数据
- 使用 slot 实现内容分发
- 注意组件间通信：triggerEvent 和 selectComponent