微信小程序和PWA对比分析

微信小程序和PWA对比分析

---

微信小程序和PWA（Progressive Web App）是目前移动端以及前端受关注度较高的两项技术。小程序自去年公测以来，国内很多公司均投入到小程序的开发中，今日头条、携程、摩拜单车等小程序纷纷在第一时间发布。从实际效果来看，小程序的用户体验普遍受到了好评，并且它可以在微信上安装、卸载和离线使用。PWA则是在传统Web应用的基础上，通过完善Web应用的一些能力，比如离线使用、后台加载、添加到主屏和消息推送等，达到用户体验提升和性能优化。两者的达到的效果相似，但实现技术上略有不同。

小程序剖析（Android）

张小龙在朋友圈披露其对小程序的定义：小程序是一个不需要下载安装就可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下即可打开应用。也体现了用完即走的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。从字面上看小程序具有类似Web应用的热部署能力，在功能上又接近于原生APP。

界面分析

小程序采用Web-Native混合方案。WebView渲染基本网页内容，部分块级元素如地图、视频、底部导航栏等由Native View渲染。如图所示，在Android开发者模式中打开显示布局边界选项，可以在小程序中看到所有的Native View被框线分割，而显示主体内容是一块完整的WebView。
WebView的内容通过Chrome浏览器的Inspect功能可以查看到相应的网页元素结构,代码如下图所示。

对多个小程序Inspect后，我们发现页面结构代码基本相同，分为以下几部分，对应图上的区域：
- 基础样式库
- 业务逻辑代码
- 用户自定义样式库
- 页面Dom结构

网页运行机制

小程序是Web和Native混合方案。对于Native模块的性能我们没有疑问，这里主要分析下Web性能是如果实现优化。
通过相应的抓包过程发现，每个小程序对应一个wxapkg文件，wxapkg包含小程序配置文件和已经组装好了的page-frame.html。小程序下载后，访问相应小程序，微信会解压wxapkg文件，并结合Native View展示 page-frame.html。
作为性能上重要的优化点，这里我们主要调研一下小程序网页的部分。以今日头条小程序为例，打开微信内核的调试模式，通过Chrome浏览器进行查看。

当打开今日头条后，在Chrome浏览器调试界面出现两个WebView，其中的一个WebView进行Inspect发现是当前看到小程序的页面。另一个WebView进行Inspect发现是个空白页面。