前言：第一次用移动网页加速器，感觉好心情都被弄坏了。确实性能提高了不少，但是限制js，对于一些交互实现都成问题。MIP是Mobile Instant Pages的缩写，指百度移动网页加速器， 是一套应用于移动网页的开放性技术标准。通过提供MIP-HTML规范、MIP-JS运行环境以及MIP-Cache页面缓存系统，实现移动网页加速。
1. 写一个mip页面，第一步创建 HTML 文件
创建一个标准的 HTML 文件，注意事项：
- 在
<html>标签中增加mip属性标识。 - 编码为
utf-8。 - 添加
meta-viewport，用于移动端展现。我们第一例子都是从Hello World开始
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> </body> </html>
2. 想要使用MIP，必须配置它的运行环境
在 HTML 代码前后分别添加 MIP依赖的 mip.css 和 mip.js 。
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><!-希望大家注意一下这里，推荐使用1，不要写成1.0--> <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css"> <title>Hello World</title> </head> <body> <h1>Hello World!</h1> <script src="https://c.mipcdn.com/static/v1/mip.js"></script> </body> </html>
3. 添加 MIP 内置一些标签
| 标签 | 使用范围 | 备注 |
|---|---|---|
<img> |
禁止使用 | 需替换为 <mip-img> |
<video> |
禁止使用 | 需替换为 <mip-video> |
<audio> |
禁止使用 | 需替换为 <mip-audio> |
<iframe> |
禁止使用 | 需替换为 <mip-iframe> |
<form> |
禁止使用 | 需替换为 <mip-form> |
<frame> |
禁止使用 | |
<frameset> |
禁止使用 | |
<object> |
禁止使用 | |
<param> |
禁止使用 | |
<applet> |
禁止使用 | |
<embed> |
禁止使用 | |
<script> |
限制使用 | 禁止使用 <script> 不包括以下两种场景：
|
<style> |
替换为 <style mip-custom> |
只能在 <head> 标签中使用一次 |
ps：1注意出于速度考虑，建议內联使用 CSS 样式。所有样式写在 <style mip-custom></style> 中，注意：style 标签仅允许出现一次
2替换禁用标签
一个完整的例子
<!DOCTYPE html> <html mip> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css"> <!--TODO: canonical href需要替换成原页面url--> <link rel="canonical" href="https://www.example.com/your/path.html"> <title>MIP页Demo效果</title> <!--TODO: 替换样式--> <style mip-custom> body { margin: 10px;} .red-text { color: #f00;} .middle-text { text-align: center; font-size: 20px;} hr { margin: 20px 0;} a { border: 1px solid #ddd; padding: 10px; display: block;} </style> <!-- noscript 标签是为了在不支持 script 的环境下快速的展现 MIP 页面，推荐使用 --> <noscript> <style mip-officialrelease> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none; } </style> </noscript> </head> <body> <!--自定义样式--> <p class="middle-text">增加样式</p> <p class="red-text">MIP页支持修改css样式</p> <hr> <!--跳转链接, 落地页同为MIP--> <p class="middle-text">mip 跳转链接</p> <a data-type="mip" data-title="目标页面标题" href="https://www.mipengine.org/doc/00-mip-101.html">跳转到MIP新手指南 (MIP)</a> <!--跳转链接, 落地页不是MIP--> <a target="_blank" href="https://github.com/mipengine">跳转到GitHub (非MIP)</a> <hr> <!--图片组件--> <p class="middle-text">mip-img 图片组件</p> <mip-img layout="fixed" width="200" height="130" src="https://www.mipengine.org/static/img/mip_logo_3b722d7.png" alt="MIP LOGO"></mip-img> <hr> <mip-carousel autoplay defer="3500" layout="responsive" width="600" height="400" indicator> <mip-img src="https://www.mipengine.org/static/img/sample_01.jpg"> </mip-img> <mip-img src="https://www.mipengine.org/static/img/sample_02.jpg"> </mip-img> <mip-img src="https://www.mipengine.org/static/img/sample_03.jpg"> </mip-img> </mip-carousel> <hr> <!--分享组件，外链mip-share.js--> <p class="middle-text">mip-share 分享组件</p> <mip-share title="分享：我的第一个MIP页面"></mip-share> <hr> <!--百度统计组件，外链mip-stats-baidu.js TODO: 修改token值--> <p class="middle-text">mip-stats-baidu 百度统计组件，代码可见</p> <mip-stats-baidu token="4e397f684261b9e4ff9d8"></mip-stats-baidu> <!--mip 运行环境--> <script src="https://c.mipcdn.com/static/v1/mip.js"></script> <!--分享组件 代码--> <script src="https://c.mipcdn.com/static/v1/mip-share/mip-share.js"></script> <!--百度统计组件 代码--> <script src="https://c.mipcdn.com/static/v1/mip-stats-baidu/mip-stats-baidu.js"></script> </body> </html>
以上参考文档：https://www.mipengine.org/doc/00-mip-101.html
MIP使用麻烦的点在于自己写组件，写完提交审核，审核反馈不通过。时间浪费了，自己多去看看规范吧。