開發小程式繞不開 webview，什麼是 webview？有什麼作用呢？
一、什麼是 webview
WebView 也叫網頁視圖，是原生系統用于移動端 APP 嵌入(Embed) Web 技術，方式是内置了一款高性能 webkit 核心浏覽器。大白話就是可以用來承載網頁的容器。
Webview 是一個基于 webkit 引擎，可以解析 DOM 元素，展示html頁面的控件，它和浏覽器展示頁面的原理是相同的，是以可以把它當做浏覽器看待。
現在手機應用層開發的方向有兩種：用戶端開發(比如我們說的app)和 HTML5 移動端開發！
所謂的 HTML5 端就是：HTML5 + CSS + JS 來建構 一個網頁版的應用,而這中間的媒介就是這個 WebView,而 Web 和網頁端可以通過JS來進行互動,比如, 網頁讀取手機聯系人,調用手機相關的API等！
而且相比起普通的用戶端開發,HTML5移動端有個優勢： 可以用百分比來布局,而且如果 HTML5 端有什麼大改,我們不用像用戶端那樣去重新下一個 APP,然後 覆寫安裝,我們隻需修改下網頁即可！
而用戶端...慘不忍睹,當然 HTML5 也有個缺點,就是性能的問題, 資料積累,耗電問題,還有閃屏等等...
二、webview主要用于什麼地方？或者說什麼需求下會使用到webview?
在電腦上展示 html 頁面，通過浏覽器打開頁面即可浏覽，而手機系統層面，如果沒有 webview 支援，是無法展示 html 頁面，是以 webview 的作用即用于手機系統來展示 html 界面的。是以它主要在需要在手機系統上加載 html 檔案時被需要。
三、微信小程式中的 webview
小程式的主要開發語言是 JavaScript ，小程式中，邏輯層和渲染層是分開的，分别運作在不同的線程中。 具體的運作環境如下：
| 運作環境 | 邏輯層 | 渲染層 |
| iOS | JavaScriptCore | WKWebView |
| 安卓 | V8 | chromium定制核心 |
| 小程式開發者工具 | NWJS | Chrome WebView |
可以看出，小程式的渲染層也是運作在webview上的；
四、為什麼webview會很慢？
普通使用者通路webview經曆過程如下：
- 互動無回報
- 到達新的頁面，頁面白屏
- 頁面基本架構出現，但是沒有資料；頁面處于loading狀态
- 出現所需的資料
于是，做了測試結果如下
說明
在浏覽器中，我們輸入位址時（甚至在之前），浏覽器就可以開始加載頁面。 而在用戶端中，用戶端需要先花費時間初始化WebView完成後，才開始加載。
五、如何避免webview加載慢？
- 全局WebView
在用戶端剛啟動時，就初始化一個全局的WebView待用，并隐藏； 當使用者通路了WebView時，直接使用這個WebView加載對應網頁，并展示
- 用戶端代理資料請求
在用戶端初始化WebView的同時，直接由native開始網絡請求資料； 當頁面初始化完成後，向native擷取其代理請求的資料。
六、webview的性能優化
- WebView初始化慢，可以在初始化同時先請求資料，讓後端和網絡不要閑着。
- 後端處理慢，可以讓伺服器分trunk輸出，在後端計算的同時前端也加載網絡靜态資源。
- 腳本執行慢，就讓腳本在最後運作，不阻塞頁面解析。
- 同時，合理的預加載、預緩存可以讓加載速度的瓶頸更小。
- WebView初始化慢，就随時初始化好一個WebView待用。
- DNS和連結慢，想辦法複用用戶端使用的域名和連結。
- 腳本執行慢，可以把架構代碼拆分出來，在請求頁面之前就執行好。
七、webview 和原生Native如何選擇？
在内嵌的WebView中應該限制允許打開的WebView的域名，并設定運作通路的白名單。或者當使用者打開外部連結前給使用者強烈而明顯的提示。
在一個用戶端内，native目前主要功能是提供高效而基礎的功能；内部的WebView則添加一些性能體驗要求不高但動态化要求高的能力。
提高用戶端的動态能力，或者提高WebView的性能，都是提升App功能覆寫的方式。
而目前的各種架構，ReactNative、Week包括微信小程式，都是這個趨勢的嘗試。
文章來源：https://juejin.cn/post/6950890297450561550