>[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 擁有更接近原生渲染的性能體驗。