小程序

小程序的两个核心线程是什么？

小程序采用双线程模型，其两个核心线程分别是：

• 视图线程（View/Webview 线程）：负责页面渲染，包括将 WXML 模板和 WXSS 样式转化为用户界面，同时处理用户交互事件，如点击、滑动等。
• 逻辑线程（AppService 线程）：负责执行 JavaScript 业务逻辑，包括数据处理、API 调用和事件响应等。

这种设计将渲染与逻辑分离，视图线程专注于界面展示，逻辑线程处理业务逻辑，两者通过事件和数据通信进行协作。这种架构提升了小程序的运行效率，同时增强了安全性，因为逻辑线程无法直接操作 DOM，减少了潜在的安全风险。

小程序双线程架构的优缺点有哪些？

优点：

1. 性能优化：逻辑与渲染分离，避免长时间 JavaScript 执行阻塞 UI 渲染，使界面更加流畅。
2. 安全性高：逻辑层运行在受限环境中，无法直接操作 DOM，降低了恶意代码对系统的影响。
3. 开发效率提升：采用数据驱动视图的方式，简化了开发流程，同时提供丰富的组件和 API。
4. 跨平台支持：一套代码可运行在 iOS、Android 等多个平台，减少适配成本。

缺点：

1. 通信开销：逻辑层与视图层通过消息通信，存在序列化/反序列化的性能开销。
2. 功能限制：无法直接操作 DOM，部分 Web 功能在小程序中不可用或受限。
3. 调试复杂：双线程模型增加了调试难度，错误追踪需要跨线程分析。
4. 学习成本：开发者需要适应小程序特有的开发模式和 API。

小程序的渲染流程是怎样的？

小程序的渲染流程可以分为以下几个步骤：

1. 初始化：小程序启动时，分别初始化逻辑线程和视图线程。
2. 数据绑定：开发者在逻辑层通过 setData 方法设置数据，数据被序列化后传递到视图层。
3. 虚拟 DOM 生成：视图层接收到数据后，结合 WXML 模板生成虚拟 DOM 树，并与上一次渲染的 DOM 进行 diff 比较。
4. 页面渲染：根据 diff 结果，仅更新变化的部分到真实 DOM，并应用 WXSS 样式，完成页面渲染。
5. 事件处理：用户在视图层触发事件后，事件被传递到逻辑层处理，逻辑层可能再次调用 setData 更新视图。

这种渲染机制通过数据驱动视图的方式，确保了界面更新的高效性。

小程序的渲染流程与 Web 有哪些差异？

1. 线程模型：

   • Web：通常采用单线程模型，JavaScript 执行和 DOM 渲染在同一个线程，复杂操作可能导致页面卡顿。
   • 小程序：采用双线程模型，逻辑与渲染分离，提升渲染性能。

2. DOM 操作：

   • Web：可以直接操作 DOM，灵活性高，但容易引发性能问题。
   • 小程序：无法直接操作 DOM，只能通过数据驱动视图更新，限制了一些高级操作。

3. 数据更新机制：

   • Web：可通过多种方式更新 DOM，如直接操作或使用框架。
   • 小程序：必须通过 setData 方法更新数据，触发视图更新。

4. 渲染性能：

   • Web：复杂页面可能出现卡顿，特别是大量 DOM 操作时。
   • 小程序：通过双线程和虚拟 DOM 优化，通常能保持较好的渲染性能。

5. 样式处理：

   • Web：支持完整的 CSS 特性，可动态修改样式。
   • 小程序：使用 WXSS（CSS 子集），部分 CSS 特性不支持。

6. 组件化：

   • Web：组件化方案多样（如 React、Vue），但需要额外引入。
   • 小程序：内置组件系统，提供统一的组件开发模式。

这些差异体现了小程序在性能优化和安全性方面的设计权衡，但也带来了一定的功能限制。

介绍一下小程序中的生命周期

小程序中的生命周期主要分为三部分：应用的生命周期、页面的生命周期、组件的生命周期。

参考：

• 面试官：说说微信小程序的生命周期函数有哪些？ | web前端面试 - 面试官系列
• 小程序框架 / 逻辑层 / 页面生命周期
• 自定义组件 / 组件生命周期