MIP （百度移动网页加速器）

前言：第一次用移动网页加速器，感觉好心情都被弄坏了。确实性能提高了不少，但是限制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>` 不包括以下两种场景： `src` 属性存在 `type` 必须 `text/javascript` 、`application/javascript` 或 `type` 不存在（即没有 `type` 属性） `src` 必须是 `https` 或 `//` 开头 `src` 必须是 MIP 域名，否则禁止使用如果在 `<head>` 中，必须加 `async` 属性 `src` 属性不存在`script` 父节点不能是 `template` `type` 必须是 `application/json` 或 `application/ld+json` `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使用麻烦的点在于自己写组件，写完提交审核，审核反馈不通过。时间浪费了，自己多去看看规范吧。