Android 程序员眼中的小程序

   <p>我就是不爱在1月9日写这篇文章，哼</p>    <p>话是这么说，可我还是蹭了一次热点，所以身体还是很诚实的。</p>    <p>众所周知，在1月9日这天，微信发布了小程序，我所在的各种群里面一片哀嚎，一群苦逼的 Android 工程师说完蛋了，App 要死了，要失业了。我这种特别不喜欢随波逐流的人，又不屑地“呵呵”了下。当然嘲讽的目标并不是小程序，而是这帮 Android 工程师。</p>    <p>这里面很多人爱跟着大佬讲趋势，讲行业发展，讲大方向，讲财务自由，讲来讲去发现钱包里还没有几毛钱，要明白这是不符合“阶级属性”的一个话题。并不是指讲这些不对，而是凡事的度过了，就不对了。</p>    <p>试问自己，你们的可替代性到底有多少？公司没了你之后，是不是就会麻烦？你是不是一个受雇主欢迎的程序员？如果你三者都回答否，那你该好好反思反思自己的 <strong>学习能力</strong> 。读了大学这么多年，工作了这么多年，这一点你还是差了别人好远，并且会因为它，差距越来越大。</p>    <p>话题扯远了，我这篇文章的目的就是把这帮 Android 程序员拉出来批判一番的，然后来看看小程序。</p>    <h2>构成</h2>    <p>一直以来，小程序的 SDK 好早前就发布了，看这架势，我就想到了 react.js ，又因为 React Native 的火热，然后提到了小程序良好的体验，我在没有仔细探究的情况下，就笃定小程序是用 <strong>类 RN</strong> 的方式去实现效果的，结果被狠狠打了脸。</p>    <p>首先，第一次打开小程序的时候，提示要下载 X5 WebView内核<br> 用 uiautomatorviewer 在 root 后的手机上查看小程序，我们可以看到右边View的结构，显然是 WebView ，但是，类名是可以改的呀，我就怀疑腾讯是不是为了蛊惑人心，故意使用 WebView 的名字（人家真的会这么无聊么）</p>    <p><img src="https://simg.open-open.com/show/859e89c5553250065658eac0cb252a42.jpg"></p>    <p>好了，这里假设是 WebView ，又使用 X5 的内核，从 <a href="/misc/goto?guid=4959734149731471795" rel="nofollow,noindex">http://x5.tencent.com/</a> 上的文档可知，可以在微信内打开 X5 Debug 相关的选项，其实也蛮简单，访问</p>    <p><a href="/misc/goto?guid=4959734149833323913" rel="nofollow,noindex">http://debugx5.qq.com</a> 在信息里面启动 Chrome Inspector 选项即可。（SegmentFault for Android 就是使用的该内核）</p>    <p>然后，打开小程序后，我们连到电脑上，再用 Chrome 打开 chrome://inspect 这个页面，就可以看到如下的样子</p>    <p><img src="https://simg.open-open.com/show/b342146cd2ed3b94db70a11e8e855118.jpg"></p>    <p>看到 untitled 和 about:blank 联想到的一个情况是它使用了 Server Render 的方式渲染的页面，就是在Android客户端渲染出来的HTML，并不是在WebView中才去填充数据（因为我就是这么干的= =）。</p>    <p>然后点击 inspect ，我们可以看到了标准的 Chrome Dev Tools 懂前端的同学这会一定兴奋了。</p>    <p><img src="https://simg.open-open.com/show/5293da2e039b67b9c633f2d3efc1c996.jpg"></p>    <p>啊，好多的 wx-xxx 组件，按照习惯，我们一般称之为 Virtual DOM ，右边还有样式，我本来想切换到 Network Tab 上，看看加载过什么资源，尝试使用 location.reload() 和 Command + R 都不能让小程序重新渲染，那么可知微信可能屏蔽了这么一个reload的方法（如果你们发现了如何重新载入的方式，记得告诉我）。</p>    <p>后来我在滑动列表加载更多的时候，也没有发现 Network 里面有什么数据产生，这证明了数据流并不是在WebView里面进行的</p>    <p>为了更清楚了解一些情况，我导出了UA</p>    <p><img src="https://simg.open-open.com/show/dbb49f15ac2a85d7d4b421c03dfd5f97.jpg"></p>    <p>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</p>    <p>这里你可以知道它用的是 MQQBrowser 和 TBS 两个相关的模块。</p>    <p>好了，初步分析就到这里，这里打脸已经打的够狠了。</p>    <h2>性能优化</h2>    <p>我和朋友们都好奇腾讯是如何把Webview体验优化到如此流畅的，那么猜测有以下几点：</p>    <ol>     <li> <p>在 Webview 层进行优化，删除了为了通用性而增加的代码。（内核层面）</p> </li>     <li> <p>使用 Virtual DOM 的方式，使得渲染出来的元素每一个都很match这个 WebView ，避免用户自定义之后，渲染其他影响性能的DOM（DOM层面）。</p> </li>     <li> <p>只提供了限制级的脚本调用（js层面）。</p> </li>    </ol>    <p>小程序这么做有什么好处呢？</p>    <ol>     <li> <p>显而易见，建立在成熟的 Web 基础上，可用性和成熟度就比 RN 或者 weex 高很多，基本不需要过多的实践，就能推广开来，开发成本低。</p> </li>     <li> <p>小程序下载包的方式很自然，只用把静态文件下来即可，轻松实现即插即用，用完即走，不需要注册 Activity，不需要 hack。</p> </li>     <li> <p>同时数据走Native，避免了前端的跨域问题，同时又变的可控制。</p> </li>     <li> <p>使用原先 js-sdk 的方案，提供 SDK 的方案也很成熟。</p> </li>    </ol>    <p>即便是如此，还是测试了很久，但我相信这绝对不只是技术上的测试了。当然产品方面的东西我并不是很懂，不敢做其他的猜测了。</p>    <h2>结尾</h2>    <p>再讲讲开头的那些程序员吧，他们有的人每天都在担心 Winter is coming ，每天都担心自己的饭碗问题。他们总会有大把大把的时间担心自己，可总是不能翻开书，打开 Google 看一看新世界。</p>    <p>他们一直说，Android/iOS 没有前景。其实，当他们被逼着好不容易学会了小程序之后，会发现 <strong>程序员，也是一门没有前景的行业</strong> ，因为，他们就只站了那么高，已经没想着往上爬了。</p>    <p>致此，勉励各位不忘自我学习自我奋斗的朋友们，今天负能量有点多，希望友善度不要下降太多，只要你爱学习，我们还是好朋友。</p>    <p>当然，在最后：</p>    <p><img src="https://simg.open-open.com/show/9d53d57c7c02887db32d91e134ffbdba.jpg"></p>    <p>  </p>   <p>来自：https://geminiwen.xyz/2017/01/10/mini-program/</p>    <p></p>    <p> </p>