前言：第一次用移动网页加速器，感觉好心情都被弄坏了。确实性能提高了不少，但是限制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使用麻烦的点在于自己写组件，写完提交审核，审核反馈不通过。时间浪费了，自己多去看看规范吧。

MIP （百度移动网页加速器）的更多相关文章

  1. MIP 移动网页加速器视频教程全新发布

    MIP (Mobile Instant Pages - 移动网页加速器) 是百度推出的开源项目,用于移动端页面加速.MIP 技术通过优化浏览器资源加载,前端代码执行及 CDN 缓存加速来加速页面,打造 ...

  2. WordPress插件--WP BaiDu Submit结构化数据插件又快又全的向百度提交网页

    一.WP BaiDu Submit 简介 WP BaiDu Submit帮助具有百度站长平台链接提交权限的用户自动提交最新文章,以保证新链接可以及时被百度收录. 安装WP BaiDu Submit后, ...

  3. 调用百度、高德地图App，百度地图网页版，App定位

    https://www.jianshu.com/p/296a3995adc2 https://blog.csdn.net/qq_26598821/article/details/51087785 ht ...

  4. 新手教程：不写JS，在MIP页中实现异步加载数据

    从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...

  5. 百度MIP移动页面加速——不只是CDN

    MIP是用CDN做加速的么?准确答案是:是,但不只是. MIP全称Mobile Instant Pages,移动网页加速器,是百度提出的页面加速解决方案.MIP从前端渲染和页面网络传输两方面进行优化, ...

  6. 移动站应该尝试百度MIP的五个原因

    MIP是什么?MIP是百度在2016年提出的移动网页加速器项目. MIP能做什么?MIP能帮助站长和网站开发者快速搭建移动端页面. MIP怎么加速?MIP从前端渲染和页面网络传输两方面进行优化,杜绝页 ...

  7. 百度将与W3C中国召开MIP技术研讨会

    百度计划与W3C中国共同组织国内W3C会员,于8月30日召开MIP 技术研讨会,讨论 MIP 等技术相关的应用标准,以期推进 MIP/AMP 在W3C中国的标准化进程. MIP (Mobile Ins ...

  8. 百度站长平台MIP

    使用说明 MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准.通过提供 MIP-HTML 规范.MIP-JS 运行环境以及 MIP-Cache ...

  9. 【转】W3C中国与百度联合组织移动网页加速技术研讨会

    2017 年 8 月 30 日,W3C 会员百度在北京中关村软件园国际会议中心主办了 "移动网页加速技术研讨会",W3C 中国以及腾讯.阿里巴巴及 UC.搜狗.小米.傲游.中国移动 ...

随机推荐

  1. angularjs1.6.4中使用ng-table出现data.slice is not a function的问题

    这个问题困扰了我2个小时. 项目中angularjs的版本从1.4.8升级到1.6.4,升级完成之后,发现ng-table不能用了.主要报错信息是ng-table中data.slice is not ...

  2. R+先知︱Facebook大规模时序预测『真』神器——Prophet（遍地代码图）

    经统专业看到预测的packages都是很眼馋的.除了之前的forecast包,现在这个prophet功能也很强大.本packages是由机器之心报道之后,抽空在周末试玩几小时.一些基本介绍可见机器之心 ...

  3. R语言︱机器学习模型评估方案（以随机森林算法为例）

    笔者寄语:本文中大多内容来自<数据挖掘之道>,本文为读书笔记.在刚刚接触机器学习的时候,觉得在监督学习之后,做一个混淆矩阵就已经足够,但是完整的机器学习解决方案并不会如此草率.需要完整的评 ...

  4. bootrom脚本的创建

    bootrom脚本的创建     以下以压缩版bootrom 为例,基于Powerpc 平台,详细介绍压缩版bootrom 的生成过程及执行流程,从而使读者对bootrom有一个彻底的了解.这对于Vx ...

  5. VxWorks 操作系统内存布局

    在VxWorks操作系统过程中可能使用到的BootRom和VxWorks内核映像本身都可以存在两种方式:压缩的和非压缩的. 1．非压缩形式 如果没有进行压缩,则只有一次重定位,即从ROM到RAM只存在 ...

  6. form表单中的input有哪些类型

    form表单中的input有哪些类型 1.button <input type="button"/> 2.checkbox <input type="c ...

  7. C#抽象类应用实例

    abstract修饰符可以和类.方法.属性.索引器及事件一起使用,在类声明中使用abstract修饰符以表明这个类只能是其他类的基类. 抽象类的特性 (1)抽象类不能被实例化 (2)抽象类可以包含抽象 ...

  8. 最新的 iOS 申请证书与发布流程

    申请流程. 1. 申请钥匙串文件 进入  (Launchpad),找到   (我的是在其他里面找到的),运行后再左上角 存储在桌面就好了,然后就完成退出钥匙串工具就可以了. 2.申请开发证书,发布证书 ...

  9. 【BZOJ1855】股票交易（动态规划，单调队列）

    [BZOJ1855]股票交易(动态规划,单调队列) 题面 BZOJ 题解 很显然,状态之和天数以及当天剩余的股票数有关 设\(f[i][j]\)表示第\(i\)天进行了交易,剩余股票数为\(j\)的最 ...

  10. angular中label包含input点击事件的问题

    问题:当点击input时,input不能勾选,单label内的其他区域点击均可控制input勾选. 分析:点击input时,$event.target.tagName   //INPUT, 点击img ...