移动Web体验月报：MIP 核心代码升级，增加基于 Vue 开发能力

为推进Web技术的发展，Brilliant Open Web 团队特推出每月一期的月报，该月报将整理较流行的移动Web加速技术，并跟进各项技术的进展和发展方向，以期帮助开发者了解或选用相关的技术，把握技术发展趋势。欢迎关注【OpenWeb开发者】公众号并回复“加群”，一起探讨相关技术。

作者 | Brilliant Open Web 团队

编辑 | Daisy

升级与重要进展

升级与重要进展

历时2个月，MIP团队完成了核心代码重构与核心功能升级，MIP新版本核心代码（V2）在实现向下完全兼容当前代码（V1）的同时，也提供了新的能力，其中重要的几项是：

基于 Vue 的新组件开发方式，使组件开发更加便捷高效。

新增多页数据共享机制，提供整站沉浸式体验。

提供沙盒机制，屏蔽与限制组件里高能耗、不安全的API调用。

基于 Vue 的开发方式

Vue 本身就是一个非常完善的组件化方案，完全满足 MIP 的诉求的。我们选择Vue开发组件还有其他的一些原因：

组件需要支持数据驱动，双向绑定，slot 机制，模版语法等；

Vue 社区和生态已经非常成熟，MIP 可以使用 Vue 一摸一样的方式开发组件，开发者介入成本低；

Vue 组件也有自己完善生命周期；

很多 Vue 的组件可以直接拿到 MIP 中使用。

在 Vue 的使用方面，MIP 支持在 MIP-HTML 文档中使用 customElement 标签，customElement 标签和常规的 HTML 标签在用法上完全保持一致，下面是一个简单的 customElement 标签 mip-hello-world 在 MIP-HTML 文档中的用法。

注册 MIP 组件的方法如下：

当页面开始渲染的时候，会将 mip-hello-world 渲染为如下 HTML 片段：

多页数据共享机制

熟悉 MIP 的开发者都了解，MIP 是以页面 (Page) 为单位来运行的。开发者通过改造/提交一个个页面，继而被百度收录并展示。

但以页面为单位带来一个问题：当一个 MIP 页面中存在往其他页面跳转的链接时，浏览器会使用加载页面的默认行为来加载新页面。新版本的 MIP 为了解决这个问题，引入了 Page 模块。它的作用是把多个页面以一定的形式组织起来，让它们互相切换时拥有和单页应用一样的切换效果，而不是浏览器默认的切换效果。

Page 模块实现方案核心主要有以下几点：

MIP Page 借助 iframe 实现了页面之间的互相隔离

通过 iframe 和外界的通讯来实现页面之间的通讯和传递数据

为了加载性能考虑，第一个页面维持原状，不放入 iframe 之中。

在页面结构上，除了首个页面的 DOM 全部保留之外，后续页面均以 iframe 的形式存在。因为 DOM 结构的原因，首个页面等价于外部页面或者外部，后续页面等价于内部页面或者内部，这里的“内外”指的就是代码执行于 iframe 的内部或者外部。

沙盒机制

MIP 允许开发者通过提交 MIP 组件和写 等方式去写 等方式去写 JS ，但是从性能和代码维护的层面考虑，部分 API 是不应该使用的，比如 alert、confirm 等等，因此我们提供了沙盒机制，去屏蔽和限制这类 API/属性的使用。

会被沙盒注入的对象为全部白名单以外的原生对象和全部作用域链上未定义的变量。我们通过白名单的机制对原生对象进行限制，即开发者只能使用白名单上的对象，如果调用白名单以外的，会拿不到对象。在具体实现上，我们使用 MIP 编译工具 mip-cli 在组件调试和编译上线的时候调用 mip-sandbox 工具，将白名单之外的对象代码注入 MIP.sandbox 前缀，比如 window 将会编译得到 MIP.sandbox.window，然后通过控制对 MIP.sandbox 上属性或方法的定义，从而实现沙盒的白名单机制。