Android 程序員眼中的小程序

我就是不愛在1月9日寫這篇文章，哼

話是這么說，可我還是蹭了一次熱點，所以身體還是很誠實的。

眾所周知，在1月9日這天，微信發布了小程序，我所在的各種群里面一片哀嚎，一群苦逼的 Android 工程師說完蛋了，App 要死了，要失業了。我這種特別不喜歡隨波逐流的人，又不屑地“呵呵”了下。當然嘲諷的目標并不是小程序，而是這幫 Android 工程師。

這里面很多人愛跟著大佬講趨勢，講行業發展，講大方向，講財務自由，講來講去發現錢包里還沒有幾毛錢，要明白這是不符合“階級屬性”的一個話題。并不是指講這些不對，而是凡事的度過了，就不對了。

試問自己，你們的可替代性到底有多少？公司沒了你之后，是不是就會麻煩？你是不是一個受雇主歡迎的程序員？如果你三者都回答否，那你該好好反思反思自己的 學習能力 。讀了大學這么多年，工作了這么多年，這一點你還是差了別人好遠，并且會因為它，差距越來越大。

話題扯遠了，我這篇文章的目的就是把這幫 Android 程序員拉出來批判一番的，然后來看看小程序。

構成

一直以來，小程序的 SDK 好早前就發布了，看這架勢，我就想到了 react.js ，又因為 React Native 的火熱，然后提到了小程序良好的體驗，我在沒有仔細探究的情況下，就篤定小程序是用 類 RN 的方式去實現效果的，結果被狠狠打了臉。

首先，第一次打開小程序的時候，提示要下載 X5 WebView內核
用 uiautomatorviewer 在 root 后的手機上查看小程序，我們可以看到右邊View的結構，顯然是 WebView ，但是，類名是可以改的呀，我就懷疑騰訊是不是為了蠱惑人心，故意使用 WebView 的名字（人家真的會這么無聊么）

好了，這里假設是 WebView ，又使用 X5 的內核，從 http://x5.tencent.com/ 上的文檔可知，可以在微信內打開 X5 Debug 相關的選項，其實也蠻簡單，訪問

http://debugx5.qq.com 在信息里面啟動 Chrome Inspector 選項即可。（SegmentFault for Android 就是使用的該內核）

然后，打開小程序后，我們連到電腦上，再用 Chrome 打開 chrome://inspect 這個頁面，就可以看到如下的樣子

看到 untitled 和 about:blank 聯想到的一個情況是它使用了 Server Render 的方式渲染的頁面，就是在Android客戶端渲染出來的HTML，并不是在WebView中才去填充數據（因為我就是這么干的= =）。

然后點擊 inspect ，我們可以看到了標準的 Chrome Dev Tools 懂前端的同學這會一定興奮了。

啊，好多的 wx-xxx 組件，按照習慣，我們一般稱之為 Virtual DOM ，右邊還有樣式，我本來想切換到 Network Tab 上，看看加載過什么資源，嘗試使用 location.reload() 和 Command + R 都不能讓小程序重新渲染，那么可知微信可能屏蔽了這么一個reload的方法（如果你們發現了如何重新載入的方式，記得告訴我）。

后來我在滑動列表加載更多的時候，也沒有發現 Network 里面有什么數據產生，這證明了數據流并不是在WebView里面進行的

為了更清楚了解一些情況，我導出了UA

Mozilla/5.0 (Linux; Android 7.1.1; Nexus 5X Build/NMF26Q) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.9 TBS/036906 Safari/537.36 MicroMessenger/6.5.3.980 NetType/WIFI Language/zh_CN

這里你可以知道它用的是 MQQBrowser 和 TBS 兩個相關的模塊。

好了，初步分析就到這里，這里打臉已經打的夠狠了。

性能優化

我和朋友們都好奇騰訊是如何把Webview體驗優化到如此流暢的，那么猜測有以下幾點：

1. 在 Webview 層進行優化，刪除了為了通用性而增加的代碼。（內核層面）

2. 使用 Virtual DOM 的方式，使得渲染出來的元素每一個都很match這個 WebView ，避免用戶自定義之后，渲染其他影響性能的DOM（DOM層面）。

3. 只提供了限制級的腳本調用（js層面）。

小程序這么做有什么好處呢？

1. 顯而易見，建立在成熟的 Web 基礎上，可用性和成熟度就比 RN 或者 weex 高很多，基本不需要過多的實踐，就能推廣開來，開發成本低。

2. 小程序下載包的方式很自然，只用把靜態文件下來即可，輕松實現即插即用，用完即走，不需要注冊 Activity，不需要 hack。

3. 同時數據走Native，避免了前端的跨域問題，同時又變的可控制。

4. 使用原先 js-sdk 的方案，提供 SDK 的方案也很成熟。

即便是如此，還是測試了很久，但我相信這絕對不只是技術上的測試了。當然產品方面的東西我并不是很懂，不敢做其他的猜測了。

結尾

再講講開頭的那些程序員吧，他們有的人每天都在擔心 Winter is coming ，每天都擔心自己的飯碗問題。他們總會有大把大把的時間擔心自己，可總是不能翻開書，打開 Google 看一看新世界。

他們一直說，Android/iOS 沒有前景。其實，當他們被逼著好不容易學會了小程序之后，會發現 程序員，也是一門沒有前景的行業 ，因為，他們就只站了那么高，已經沒想著往上爬了。

致此，勉勵各位不忘自我學習自我奮斗的朋友們，今天負能量有點多，希望友善度不要下降太多，只要你愛學習，我們還是好朋友。

當然，在最后：

 

來自：https://geminiwen.xyz/2017/01/10/mini-program/