回顧

前面兩篇介紹了小程序的一些基本原理(li)，大(da)家先回(hui)顧一下

我從小(xiao)程序(xu)學到了什么（一）

我從小程序(xu)學到了什么(me)（二）

小程序頁面加載

與之前遠程頁面+JS-SDK+離線存儲不同的是，編譯后的小程序頁面是直接存在微信客戶端本地的html。
流程如下(xia)圖(tu)（圖(tu)片來自微信官網(wang)文檔，侵(qin)刪）

第(di)一次打開小(xiao)程序以及小(xiao)程序有版本更新時，微信native會(hui)做下載(zai)代(dai)碼(ma)包以及加(jia)載(zai)相關的工(gong)作，用戶會(hui)覺得(de)有些(xie)延遲(chi)，但下次再打開就直接執行相應的代(dai)碼(ma)了（編譯后的html了）。

我司hybrid與小程序技術的對比

對于很(hen)多公司來說，小(xiao)程序僅(jin)僅(jin)只(zhi)是(shi)他一(yi)部(bu)分(fen)渠(qu)道，他們大部(bu)分(fen)精力還是(shi)在(zai)自己的(de)app上(shang)，之(zhi)前說過大部(bu)分(fen)公司都是(shi)hybrid方(fang)式，小(xiao)程序在(zai)加載速度與渲(xuan)染速度是(shi)對hybrid的(de)一(yi)種(zhong)優化(hua)，調試工具也非常方(fang)便，所以從它身(shen)上(shang)是(shi)很(hen)多地方(fang)可以來借鑒的(de)，這里我(wo)以我(wo)司的(de)hybrid做相應對比。

頁(ye)面(mian)加載與(yu)渲染(ran)

 目前我司是單WebView架構，并且未(wei)做(zuo)預加(jia)載，所以當(dang)我們從native跳轉(zhuan)到一個h5大概(gai)步驟(zou)如下

1. 初始化WebView
2. 連接遠程頁面
3. 下載靜態資源
4. 執行js
5. 渲染html與css

所以目前在(zai)網絡不好(hao)的情況(kuang)下，我們(men)的白屏還是比(bi)較明顯的。

WebView的版本

差別比較大的是(shi)android下WebView的版本，這個(ge)可(ke)以等加載與渲染相關優化完(wan)后專門分析。

前端框架

小程(cheng)序用wxml與wxss更(geng)多的是(shi)解(jie)決安全以(yi)及開發者門(men)檻的問題(ti)，而相比(bi)微信的我(wo)們并不是(shi)要(yao)做平臺，所以(yi)我(wo)們還是(shi)繼續保持目前的框架。

調(diao)試環境

我(wo)們(men)的(de)一(yi)般(ban)是clone一(yi)個native的(de)包，再啟動本地服務,配合(he)chrome或者(zhe)Safari來結合(he)調試，有(you)一(yi)定的(de)痛點，我(wo)們(men)也(ye)希(xi)望能夠方便的(de)集成在一(yi)起。

通過之上一系(xi)列(lie)對比(bi)可以(yi)看出，我(wo)們的hybrid在加(jia)載與(yu)渲染(ran)上有比(bi)較(jiao)大(da)的空間比(bi)，后續系(xi)列(lie)文章會著重分析這一塊。

總結

了(le)解(jie)了(le)小程(cheng)序一些基本原(yuan)理之后，我(wo)(wo)以我(wo)(wo)司hybrid與(yu)小程(cheng)序做(zuo)了(le)一些對比，從下(xia)節起我(wo)(wo)們就(jiu)要(yao)開始借鑒小程(cheng)序的(de)一些思路來做(zuo)些優化了(le)，經(jing)過對比，我(wo)(wo)們在加(jia)載(zai)渲染方面有比較大的(de)優化空間，后面我(wo)(wo)也會去了(le)解(jie)native相(xiang)關(guan)知識來繼(ji)續分析。