>[success] # 小程序架构模型 1. 微信客户端作为宿主环境为了执行小程序的各种文件：**wxml文件、wxss文件、js文件** 2. 小程序基于 `WebView `环境下运行的，`WebView `弊端就是 **JS 逻辑、DOM 树创建、CSS 解析、样式计算、Layout、Paint (Composite) 都发生在同一线程，在 WebView 上执行过多的 JS 逻辑可能阻塞渲染，导致界面卡顿**，因此微信做了优化**采用了目前称为「双线程模型」的架构**  * `WXML`模块和`WXSS`样式运行于 渲染层，渲染层使用`WebView`线程渲染（一个程序有多个页面，会使用多个`WebView`的线程） * JS脚本运行于 逻辑层，逻辑层使用`JsCore`运行`JS`脚本 * 这两个线程都会经由微信客户端（`Native`）进行中转交互 * 小程序的运行环境 | **运行环境** | **逻辑层** | **渲染层** | | --- | --- | --- | | iOS | JavaScriptCore | WKWebView | | 安卓 | V8 | chromium定制内核 | | 小程序开发者工具 | NWJS | Chrome WebView | >[danger] ##### 小程序和普通网页开发区别 1. ​**网页开发渲染线程和脚本线程是互斥的**，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。 2. 网页开发者可以使用到各种**浏览器暴露出来的 DOM API，进行 DOM 选中和操作**。但注意小程序的js 是运行在单独的线程容器`JSCore `中，并没有一个完整浏览器对象，因而缺少相关的**DOM API和BOM API。** 3. 网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对` IE、Chrome、QQ`浏览器等，在移动端需要面对**Safari、Chrome以及 iOS、Android 系统中的各式 WebView **。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，**小程序中三大运行环境也是有所区别的** >[danger] ##### skyline 1. [skyline](https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/introduction.html)小程序的一个实验属性，介绍提供更为接近原生的用户体验，我们在 WebView 渲染之外新增了一个渲染引擎 Skyline，其使用更精简高效的渲染管线，并带来诸多增强特性，让 Skyline 拥有更接近原生渲染的性能体验。