前言
最近在看小程式相關，從技術角度來看小程式在Hybrid的優化過程有很多值得我們學習的地方，所以我想在學習的同時也能有所輸出，在這個系列我不會講怎麼去申請一個小程式，怎麼去開發一個程式，而是講從小程式我們能學到什麼，儘管它現在還存在很多問題，但大範圍的使用會推動小程式將微信技術生態做到極致，使用到Hybrid技術的公司非常多，希望我的系列文章能對大家有所幫助。
在微信下的頁面技術演變
從技術的角度來看，其實微信的頁面技術是小程式的前身，如下圖。
在微信裡面的網頁，可以通過JS-SDK來呼叫微信native，讓開發者使用到微信的原生能力，當JS-SDK公佈後受到很多開發者的歡迎，但隨著廣泛的使用，開發者們又遇到了很多問題。
- 白屏
使用者在手機訪問微信的一個h5，由於移動裝置的限制和網路速度，都會有一個明顯的白屏。
微信團隊用了很多精力來解決這個問題，就出現了後面的JS-SDK增強版，這裡面有個比較重要的功能就是：離線儲存。 離線儲存簡單的理解就是從本地載入web資源而不再從服務端拉取，從而避免網路速度的瓶頸。
離線儲存降低了網路延時大大提高了h5的使用者體驗，但在一些複雜的頁面依然會有白屏的問題，這裡主要是js和css的複雜性會佔用大量的UI執行緒而影響WebView的渲染。
其實目前大部分公司使用的是類似JS-SDK方案：靈活的網頁開發+ 豐富的原生功能 + 離線儲存。
- 沒有native流暢的操作
有些團隊使用SPA框架來模擬native的原生頁面切換，但SPA也有自己的弊端，隨著業務的複雜，很有可能讓WebView的負擔越來越大，而且做到這一點需要開發者有足夠的時間和精力。
- 安全
對攻擊防不勝防，瀏覽器下的js是非常靈活，可以對Dom和Bom隨意操作，可以隨意跳轉，可以動態執行等等。
所以，微信能否解決之上的問題呢，微信的頁面是否能做到以下：
- 快速的載入
- 強大的能力
- 流暢的體驗
- 安全
- 開發成本低
這就是小程式。
小程式的技術選型
小程式如果想解決之前純網頁技術的一些問題，必須要做一些新的嘗試
- 可否使用Native技術
要達到快速的載入和流暢的體驗，是不是直接基於微信的客戶端開發就Ok了呢？但這有個問題，這麼做意味著小程式的程式碼需要和微信客戶端程式碼一起釋出，這種節奏肯定無法滿足的。
- 可否使用ReactNative
RN雖然用javascript解釋執行，但渲染方面還是Native渲染，其實RN能解決載入和渲染的問題，但它也仍然有些不足，這裡引用微信官方給的原因
- 對css的支援問題無法滿足web開發者日漸增長的需求，如果改造也要花很大精力和風險。
- 到目前還是有些效能的坑以及bug，對於複雜一些的頁面比較難以勝任。
- 不可預期的因素，比如之前鬧的沸沸揚揚的許可證。
純h5有很多弊端，純Native又不可能滿足發版的需求，RN又不是很成熟，所以最終微信在面對自己的技術生態下對小程式的選型還是Hybrid，介面由成熟的Web技術渲染，邏輯由成熟的Js解析和執行，再加上微信Native提供的原生能力。但要實現之上所說的需求，小程式還是需要基於Hybrid做突破。
雙執行緒模型
雙執行緒：小程式的邏輯層與渲染層是分開兩個執行緒， 邏輯層的js用到Native自身的JSCore來解析和執行，而介面還是通過WebView來渲染。通訊過程如下圖（圖片來自微信官方文件，侵刪）：
一般的Hybrid技術，WebView既做js解析和執行，還要渲染html和css，當頁面比較複雜時，很有可能出現介面的渲染等待JS的執行從而造成白屏現象，我們用雙執行緒可以降低Webview的負擔，在複雜的頁面互動裡可以並行js執行與介面渲染。 另外Native的Jscore僅僅只是實現了ECMAScript標準，它不像瀏覽器還需要實現DOM與BOM，所以在小程式裡通過js無法操作dom，無法使用BOM，這也在一定程度上解決了安全和管控的問題。
小程式的javascript
如上所說，小程式的javascript是由JSCore來實現ECMAScript，除了這個之外小程式還提供了一個框架和一系列api，這些底層的升級是與微信客戶端的升級同步的。
（圖片來自微信官方文件，侵刪）：
總結
微信頁面以及小程式的技術體系其實與大多數公司一致，但微信做為一個平臺會將安全與效能做到極致，雖然大部分公司不需要做到微信這種平臺體量，但它的技術演進還是能給我們很多借鑑，比如我們可以也用多個WebView嗎？我們也可以用雙執行緒嗎？我們也可以做WebView預載入嗎？我們也能做微信開發者工具嗎？接下來我們也會漸漸結合我們自身的業務場景繼續和大家分享。
由於第一篇為了給後面的知識內容做些準備，所以用到了微信官網的一些內容和圖片，特此說明，侵刪。
參考文獻：小程式開發指南
如想閱讀更多文章，可以關注我們的微信公眾號：大前端工程師
