https://developers.weixin.qq.com/miniprogram/dev/framework/

  • 上面的链接就是微信小程序开发的文档链接

小程序的独特性

https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8A%80%E6%9C%AF%E5%8F%91%E5%B1%95%E5%8F%B2

  • 在官网的介绍中从这几个维度进行了小程序的核心讲解：

    • 1. 小程序和pc浏览器的web前端开发之间的区别

    • 2. 小程序和webviewclient注入类型的开发的区别

    • 3. 小程序自身的一些特性

  • 从这三个维度来进行的讲解吧

    • 小程序本身而言的话实际上和 hybrid 的跨端开发方式是极其类似的，原理是相通的讷

    • 只是微信/百度/抖音等这些平台提供了统一的 JSBridge 调度的原生端的 API 而已

  • 理解什么是线程，这是小程序架构和浏览器架构下的不同点？

    • 伴随的问题就是：

      • 在nodejs开发的时候为什么一些长任务开启子进程child_children来进行实际操作

      • 在原生端开发的时候，为什么会开启一个子线程来操作UI xml

  • 理解v8引擎，以及浏览器的进程模型？

  • 理解什么是渲染层，什么是逻辑层？

  • 探究不同浏览器内核的区别？

  • 理解什么是SDK？

  • 核心思考小程序开发和普通网页开发的区别是什么？？

  • 理解一下 hybird 架构是什么！

https://juejin.cn/post/7219943233798373432?searchId=202603061335435E8F4271E192253C731D

小程序代码构成

  • 核心是分为了四块：json 配置层，js逻辑层，wxml的html骨架层，wxss的css样式层

    • 比如说后续的 taro 或者说 uniapp 底层的逻辑是怎样的不同，都是会想办法编译为上诉的四个文件类型的基本结构呢，从而让微信小程序可直接在微信平台进行加载和运行

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发

这是官方的一句话的描述，以及前面的描述实际上和android开发是很类型的，android原生开发，当需要进行操作不同的页面的时候就需要进行切换线程，保证操作的准确性吧

小程序 VS Android/Hybird

架构模型

  • 小程序的架构模型

    • 小程序是采取的是「双线程 + 多webview实例」架构

    • 逻辑层：一个独立的JS线程（JSCore/V8引擎），负责的是业务逻辑和数据处理相关的操作吧，不会直接的操作DOM

    • 渲染层：每个页面对应一个独立的 webview 实例（线程），负责的是页面的渲染，逻辑层通过「数据通信桥」向渲染层传递数据，渲染层仅做被动的数据渲染

    • 页面在进行切换的时候，小程序做的是「隐藏/显示」对应的 webview，并没有进行销毁，切换的本质是「渲染线程的激活/挂起」

  • android + hybird 架构模型

    • 原生 android 是 「单应用主线程（UI线程） + 多子线程」的架构模型吧，Hybird 就是在原生页面中嵌入了一层 webview 而已（一般基于 chromium 内核来做的呢）

    • 原生页面：运行在android主线程的（UI 线程），所有的UI操作必须在住线程中执行讷

    • Hybird 页面：一个 webview 对应一个独立的 「webview进程/线程」（可以通过配置实现），webview 内部的 JS 执行和 DOM 的渲染在自身线程，和原生主线程通过 addJavascriptInterface/shouldOverrideUrlLoading 来实现通信吧

维度

具体表现

页面与线程绑定

两者都是「一个页面（小程序页面 / Hybrid WebView 页面）对应一个独立的渲染线程」，页面切换 = 线程切换（激活 / 挂起）；

线程隔离性

单个页面的渲染异常（如小程序页面 JS 卡死、WebView 崩溃）不会直接导致整个应用崩溃，仅影响当前页面；

通信机制

都存在「跨线程 / 跨进程通信」：小程序是逻辑层 ↔ 渲染层，Hybrid 是原生主线程 ↔ WebView 线程，且通信都需要通过「桥接层」（而非直接调用）；

页面复用策略

两者都不会频繁销毁页面线程：小程序会缓存已打开的 WebView（上限一般 5-10 个），Android Hybrid 也会复用 WebView 实例（避免重复创建的性能损耗）。

维度

小程序

Android + Hybrid

线程模型核心

「逻辑层单线程 + 渲染层多线程」：所有页面的业务逻辑共享一个 JS 线程，渲染层多 WebView 独立；

「原生多线程 + WebView 多线程」：原生页面可多线程（子线程处理耗时任务），每个 WebView 有独立的 JS 线程 + 渲染线程；

WebView 本质

小程序的 WebView 是「阉割版」：无完整浏览器内核，禁用 window/document 等直接 DOM 操作，仅支持框架层的渲染指令；

Hybrid 的 WebView 是「完整浏览器内核」：可直接操作 DOM/BOM，支持所有前端 API，与浏览器行为一致；

页面生命周期管控

小程序框架强管控：页面生命周期（onShow/onHide）由框架统一调度，开发者无法绕过；

原生 + Hybrid 弱管控：原生页面生命周期由 Android 系统管控，WebView 生命周期由开发者自行管理（易出现内存泄漏）；

性能调度优先级

渲染层线程优先级由小程序引擎动态调整：前台页面优先级高，后台页面降优先级（节省资源）；

WebView 线程优先级由 Android 系统管控：开发者可通过 Process.setThreadPriority 手动调整，但易与系统调度冲突；

跨页面数据共享

逻辑层单线程天然共享：所有页面可直接访问全局变量 / 缓存，无需额外通信；

WebView 多线程隔离：不同 WebView 之间数据不共享，需通过原生层中转（如 SharedPreferences / 广播）；

小程序 skyline 引擎

https://juejin.cn/post/7527206638261862426?searchId=202603061525567657D12A4906055B5535https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/introduction.html

一、Skyline 引擎的核心定位

首先明确：Skyline 不是对传统小程序双线程模型的推翻，而是对渲染层的重构 + 线程模型的优化，核心目标是：

  1. 解决传统 WebView 渲染的性能损耗（如 DOM 解析、样式计算耗时）；

  2. 缩小小程序与原生 App（Android/iOS）的体验差距；

  3. 兼容原有小程序开发语法（无需大规模改代码）。

它的定位类似于「小程序版的 React Native」—— 用更接近原生的渲染方式替代 WebView 渲染，但保留小程序的逻辑层设计。

二、Skyline 引擎的底层原理（核心突破）

1. 先对比传统小程序引擎的痛点

传统小程序渲染层依赖 WebView：

  • 逻辑层（JS 线程）→ 通信桥 → WebView 渲染层 → 解析 WXML/WXSS → 生成 DOM → 绘制到屏幕；

  • 中间环节多（DOM 解析 / 布局计算），且 WebView 本身是「浏览器内核子集」，性能远低于原生渲染。

2. Skyline 引擎的核心架构

Skyline 重构了「渲染层」，核心是「抛弃 WebView 内核，改用原生渲染管线」，整体架构如下：

逻辑层（原有 JS 线程） → 通信桥 → Skyline 渲染层 → 原生渲染组件 → 屏幕

  • 渲染层核心：不再基于 WebView，而是自研的「原生渲染引擎」（Android 端基于 Skia 图形库，iOS 端基于 CoreGraphics）；

  • 模板编译：WXML/WXSS 编译时直接转换为「原生渲染指令」（而非 DOM 节点），避免 DOM 解析损耗；

  • 线程模型优化：

    • 保留「逻辑层单线程」（兼容原有代码）；

    • 渲染层拆分为「布局线程 + 绘制线程」：布局计算（如 flex 布局）在独立线程执行，绘制（像素渲染）在 GPU 线程执行，避免主线程阻塞；

    • 页面切换时，仅切换「原生渲染组件树」的激活状态，而非 WebView 实例，切换耗时从「毫秒级」降到「微秒级」。

3. 关键技术特性

  • 原生组件直通：Skyline 中 <view> <button> 等组件不再是 WebView 中的「伪原生组件」，而是直接映射为 Android/iOS 的原生 View 组件，点击、滑动等事件无 WebView 桥接损耗；

  • 离屏渲染：复杂动画（如弹窗、轮播）在离屏缓冲区渲染后再合成到主屏幕，避免重绘导致的卡顿；

  • 按需更新：仅更新数据变化的组件节点（而非整个页面），类似 React 的虚拟 DOM 差分更新，但基于原生组件树实现，效率更高；

  • GPU 加速：所有渲染操作优先使用 GPU 计算，替代传统 WebView 的 CPU 软渲染。

三、Skyline 引擎 vs 传统引擎 vs Android Hybrid

维度

传统小程序引擎

Skyline 引擎

Android Hybrid（WebView）

渲染底层

WebView 内核（DOM）

原生渲染管线（Skia/CoreGraphics）

完整 WebView 内核（DOM）

渲染线程模型

单 WebView 线程

布局线程 + 绘制线程 + GPU 线程

WebView 主线程 + GPU 线程

页面切换本质

WebView 实例切换

原生组件树激活 / 挂起

WebView 实例切换

事件响应耗时

~20ms（桥接 + DOM）

~2ms（原生事件）

~15ms（WebView 事件）

动画帧率

平均 45fps 左右

稳定 60fps（接近原生）

平均 50fps 左右

内存占用

高（WebView 缓存）

低（原生组件树）

高（WebView 进程）

兼容性

完全兼容 Web 语法

部分兼容（禁用 DOM/BOM）

完全兼容 Web 语法

关于小程序的讲解就到这里了吧！还有很多很多，但是其他的就是纯 API 的调度和使用了吧