近兩年來(Come)，連雲港小程序在(exist)微信上(superior)興起，小程序的(of)發展曆史是(yes)什麽樣子呢，我(I)們(them)來(Come)看看。

　　從技術的(of)維度看，小程序并非憑空冒出(out)來(Come)的(of)一(one)個(indivual)概念。當微信中的(of) WebView 逐漸成爲(for)移動 Web 的(of)一(one)個(indivual)重要(want)入口時(hour)，微信就有相關的(of) JS API 了(Got it)。

　　一(one)些開發者應該對下面的(of)代碼有印象：

　　代碼清單1-1 使用(use) WeixinJSBridge 預覽圖片

WeixinJSBridge.invoke('imagePreview', {

    current: 'http://inews.gtimg.com/newsapp_bt/0/1693121381/641',

    urls: [ // 所有圖片的(of)URL列表，數組格式

        'static/picture/10485731_980x1200_0.jpg',

        'static/picture/10485726_980x1200_0.jpg',

        'static/picture/10485729_980x1200_0.jpg'

    ]

}, function(res) {

    console.log(res.err_msg)

})

　　這(this)是(yes)一(one)個(indivual)調用(use)微信原生(born)組件浏覽圖片的(of)JS API，相比于(At)額外引入一(one)個(indivual)JS圖片預覽組件庫，這(this)種調用(use)方式顯得非常簡潔和(and)高效。

　　實際上(superior)，微信官方是(yes)沒有對外暴露過如此調用(use)的(of)，此類 API 最初是(yes)提供給騰訊内部一(one)些業務使用(use)，很多外部開發者發現了(Got it)之後，依葫蘆畫瓢地(land)使用(use)了(Got it)，逐漸成爲(for)微信中網頁的(of)事實标準。

　　 2015年初，微信發布了(Got it)一(one)整套網頁開發工具包，稱之爲(for) JS-SDK，開放了(Got it)拍攝、錄音、語音識别、二維碼、地(land)圖、支付、分享、卡券等幾十個(indivual)API。給所有的(of) Web 開發者打開了(Got it)一(one)扇全新的(of)窗戶，讓所有開發者都可以(by)使用(use)到(arrive)微信的(of)原生(born)能力，去完成一(one)些之前做不(No)到(arrive)或者難以(by)做到(arrive)的(of)事情了(Got it)。

　　同樣是(yes)調用(use)原生(born)的(of)浏覽圖片，調用(use)方式如代碼清單1-2所示。

　　代碼清單1-2 使用(use) JS-SDK 調用(use)圖片預覽組件

wx.previewImage({

  current: 'static/picture/10485726_980x1200_0.jpg',

  urls: [ // 所有圖片的(of)URL列表，數組格式

    'static/picture/10485731_980x1200_0.jpg',

    'static/picture/10485726_980x1200_0.jpg',

    'static/picture/10485729_980x1200_0.jpg'

  ],

  success: function(res) {

    console.log(res)

  }

})

　　JS-SDK是(yes)對之前的(of) WeixinJSBrige 的(of)一(one)個(indivual)包裝，以(by)及新能力的(of)釋放，并且由對内開放轉爲(for)了(Got it)對所有開發者開放，在(exist)很短的(of)時(hour)間内獲得了(Got it)極大(big)的(of)關注。從數據監控來(Come)看，絕大(big)部分在(exist)微信内傳播的(of)移動網頁都使用(use)到(arrive)了(Got it)相關的(of)接口。

　　JS-SDK 解決了(Got it)移動網頁能力不(No)足的(of)問題，通過暴露微信的(of)接口使得 Web 開發者能夠擁有更多的(of)能力，然而在(exist)更多的(of)能力之外，JS-SDK 的(of)模式并沒有解決使用(use)移動網頁遇到(arrive)的(of)體驗不(No)良的(of)問題。

　　​ 用(use)戶在(exist)訪問網頁的(of)時(hour)候，在(exist)浏覽器開始顯示之前都會有一(one)個(indivual)的(of)白屏過程，在(exist)移動端，受限于(At)設備性能和(and)網絡速度，白屏會更加明顯。我(I)們(them)團隊把很多技術精力放置在(exist)如何幫助平台上(superior)的(of)Web開發者解決這(this)個(indivual)問題。因此我(I)們(them)設計了(Got it)一(one)個(indivual) JS-SDK 的(of)增強版本，其中有一(one)個(indivual)重要(want)的(of)功能，稱之爲(for)“微信 Web 資源離線存儲”。

　　 以(by)下文字引用(use)自内部的(of)文檔（沒有最終對外開放）：

　　微信 Web 資源離線存儲是(yes)面向 Web 開發者提供的(of)基于(At)微信内的(of) Web 加速方案。

　　通過使用(use)微信離線存儲，Web 開發者可借助微信提供的(of)資源存儲能力，直接從微信本地(land)加載 Web 資源而不(No)需要(want)再從服務端拉取，從而減少網頁加載時(hour)間，爲(for)微信用(use)戶提供更優質的(of)網頁浏覽體驗。每個(indivual)公衆号下所有 Web App 累計最多可緩存 5M 的(of)資源。

　　這(this)個(indivual)設計有點類似 HTML5 的(of) Application Cache，但在(exist)設計上(superior)規避了(Got it)一(one)些 Application Cache的(of)不(No)足。

　　在(exist)内部測試中，我(I)們(them)發現 離線存儲 能夠解決了(Got it)一(one)些問題，但是(yes)對于(At)一(one)些複雜的(of)頁面依然會有白屏的(of)問題，例如頁面加載了(Got it)大(big)量的(of) CSS 或者是(yes) JavaScript 文件，這(this)些文件的(of)執行時(hour)間占用(use)了(Got it)大(big)量的(of) UI 線程，這(this)種時(hour)候，即使通過離線存儲快速的(of)加載資源，但是(yes)依舊會有頁面的(of)白屏現象，同時(hour)這(this)樣分文件的(of) Cache 在(exist)處理代碼文件更新的(of)時(hour)候操作(do)較爲(for)繁雜，對開發者的(of)要(want)求較高。