移动WebApp高性能解决方案——MIP
介绍
MIP（Mobile Instant Pages - 移动网页加速器），是一套应用于移动网页的开放性技术标准。通过提供 MIP-html 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统，实现移动网页加速。
Github
https://github.com/mipengine
组成部分
MIP 主要由三部分组织成：
- MIP-HTML：基于 HTML 中的基础标签制定了全新的规范，通过对一部分基础标签的使用限制或功能扩展，使 HTML 能够展现更加丰富的内容。
- MIP-JS：可以保证 MIP-HTML 页面的快速渲染。
- MIP-Cache：用于实现 MIP 页面的高速缓存，从而进一步提高页面性能。
特点和优势
使用 MIP 无需等待加载，页面内容将以更友好的方式瞬时到达用户
- 丰富灵活的内置组件
MIP 提供实用、强大的基础组件开发者可以根据需求任意选择
- 高效便捷的交互机制
提供事件驱动和数据驱动机制提供更为简单高效的组件互动方式
- 更好的整站体验
更流畅的页面切换体验天然的站点离线缓存支持
- 开放的接入技术
MIP 是一项永久的开源计划提供持续优化的解决方案
MIP 加速原理
为了去除臃肿的客户端脚本，MIP 文件不允许自定义 JavaScript 。对一些强依赖 JavaScript 的功能（如：广告、统计和交互），MIP 提供与 MIP Runtime 兼容封装好的组件来实现。
JavaScript 引用原则：
- 目前 MIP 不允许用户自定义 JavaScript ，需要用 MIP 组件的形式引进来，从而确保安全性和性能表现。
- 可以引用 <mip-iframe>组件 来引入实现部分富交互的功能，这样，即使开发时使用最影响性能的 document.write() ，也不会影响主页面的渲染。
- MIP 组件是开源的，允许开发者自定义功能组件，项目也将持续提供多样的组件，以适应不同的需求。
所有静态资源需要标明尺寸
在页面开发时，资源常常不会被设定宽高，特别是使用广告或者通过调用 document.write() 注入的时候。由于资源大小不能确定，页面经常要进行反复重新的绘制。
现在，MIP 要求将所有的资源（广告、图片、音频和视频）标明尺寸。当资源真正加载时，所有资源大小可以被立即推断出并迅速的用于计算页面布局，加载中的资源将无缝呈现，不必因为页面频繁更新布局而影响到用户的阅读体验。
不允许任何机制阻止页面渲染
开发者的任何自定义脚本，都需要用 MIP 的标题反馈给 MIP，例如 <mip-ad>、<mip-iframe> 等，这些方式不会阻塞页面的 layout 和渲染。
控制外部资源加载
MIP Runtime 会控制外部资源的按需加载来确保其高效性，从而使用户想阅读的内容尽快出现在屏幕中。
封装交互功能
MIP 提倡网页能给用户直接简单的体验，但这并不意味着 MIP 限制了页面的生动和有趣。MIP Runtime 提供了高度优化的被封装的 JavaScript ，开发者无需投入过多精力去实现复杂的交互功能。
建议使用 inline 的 css
CSS 的加载，会阻止页面的渲染，CSS 内联可以减少客户端的开销。
只允许 GPU 加速的动画
MIP 只允许用 transforms 和 opacity 来完成动画效果，当动画能在 GPU 上执行时，仅触发渲染层合并。
MIP 缓存
MIP 另一个重要的意义在于能够帮站长加速网页，MIP-Cache 将会把 MIP 网页缓存到百度 CDN 中。只要符合 MIP 标准，都可以使用 MIP 缓存。
开放且持续更新
MIP 是一个开源项目，所有的标准并非一成不变
MIP 适用场景
MIP 适用于所有需要加速的站点。
如果您的站点响应速度慢，如果您的 CDN 速度慢，如果您希望广告有更高的 ROI，那 MIP 就非常适合您的站点。MIP 最核心，也是我们一直尽力遵守的原则是：速度最快和体验最好。截至到目前，有超过 1w 个站点接入 MIP，他们使用 MIP 获得了极致的用户体验并且带来了客观的广告收入。
总结
无论您的站点是资讯类，还是电商，也就是依赖于高性能的页面渲染，那么MIP将是你的一个不错的选择！enjoy it！
