使用说明

MIP(Mobile Instant Pages - 移动网页加速器),是一套应用于移动网页的开放性技术标准。通过提供 MIP-HTML 规范、MIP-JS 运行环境以及 MIP-Cache 页面缓存系统,实现移动网页加速。

MIP 主要由三部分组织成:

  • MIP-HTML:基于 HTML 中的基础标签制定了全新的规范,通过对一部分基础标签的使用限制或功能扩展,使 HTML 能够展现更加丰富的内容。
  • MIP-JS:可以保证 MIP-HTML 页面的快速渲染。
  • MIP-Cache:用于实现 MIP 页面的高速缓存,从而进一步提高页面性能。
  • 1. MIP-HTML

  • 下面是一段简单的 MIP-HTML 代码示例:

    <!DOCTYPE html>
    <html mip>
        <head>
            <meta http-equiv="Content-Type" content="text/html; 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">
            <link rel="canonical" href="https://www.example.com/your/path.html">
            <!-- noscript 标签是为了在不支持 script 的环境下快速的展现 MIP 页面,推荐使用 -->
            <noscript>
                <style mip-officialrelease>
                    body {
                        -webkit-animation: none;
                           -moz-animation: none;
                            -ms-animation: none;
                                animation: none;
                    }
                </style>
            </noscript>
        </head>
        <body>
            <h1>Hello World!</h1>
            <script src="https://c.mipcdn.com/static/v1/mip.js"></script>
        </body>
    </html>

    MIP-HTML 规范中有两类标签,一类是 HTML 常规标签,另一类是 MIP 标签。MIP 标签也被称作 MIP-HTML 组件,使用它们来替代 HTML 常规标签可以大幅提升页面性能。

    例如:<mip-img>标签,它使得图片只在需要时才进行加载,减少了页面渲染时间,节省了用户的流量。

  • 2. MIP-JS

    MIP-JS 用于管理资源的加载,并支持上述 MIP 标签的使用,从而确保页面的快速渲染,提高页面各方面的性能。

    MIP-JS 最显著的优势是能够异步加载所有外部资源,整个页面渲染过程不会被页面中的某些元素阻塞,从而实现页面渲染速度的提升。

    此外,MIP-JS 还涵盖了所有 iframe 的沙盒、在资源加载前提前计算页面元素布局、禁用缓慢 CSS 选择器等技术性能。

    3. MIP-Cache

    MIP-Cache 是一套基于代理的 CDN(Content Delivery Network) 缓存系统,可用于缓存所有被百度相关页面引用或者从百度相关服务点出的 MIP 页面。

    用户在访问 MIP 页面的时候,请求首先会发到 CDN 服务器,如果页面存在,则从 CDN 返回,如果 CDN 上不存在,则会请求第三方服务器。同时 MIP-Cache 服务器会将页面缓存到 CDN 上。在使用 MIP-Cache 时,MIP 页面所需要的所有静态文件和外部资源都会被缓存到 CDN 上(视频除外),并且页面中的资源链接会被转换成相对地址,很大程度上提升了页面渲染速度。每一个 MIP 页面都会绑定一个验证系统,在页面进行渲染时,这种验证器可以直接在浏览器控制台中输出页面的错误。并且随着代码逻辑的变化,能够展示其对页面性能以及用户体验的影响。

开发指南

按照下面的步骤,你可以快速创建一个基本的 MIP HTML 页面;通过进一步了解 MIP HTML 规范、对 MIP HTML 页面进行阶段性的验证等内容,你可以轻松开发出理想的 MIP 页面。

基本步骤包括:

  • 创建基础 MIP HTML 页面
  • 引入图片
  • 调整样式和布局
  • 预览和验证
  • 最后一步

技术规范

1. 头部使用规范

  • 起始标签使用<!doctype html>
  • html标签必须加上mip标记,即: <html mip>
  • 必须包含<head>和 <body>标签
  • 必须在head标签中包含字符集声明: <meta charset="utf-8">,字符集统一为utf-8
  • 必须在head标签中包含viewport设置标签: <meta name="viewport" content="width=device-width,minimum-scale=1">,推荐包含initial-scale=1
  • 必须在head标签中包含<link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
  • 必须在body标签中包含<script src="https://c.mipcdn.com/static/v1/mip.js"></script>
  • 必须在head标签中包含<link rel="canonical" href="http(s)://xxx">

百度站长平台MIP的更多相关文章

  1. 【转】百度站长平台MIP引入工具使用心得

    MIP引入主动推送流程 对于 MIP 站点改造好了,我们如何提交数据,并且 MIP 提交后,我们能得到哪些数据的反馈,在这里简单的写一篇文章,说一下. 改造 MIP,我们一般是添加了一个二级域名站点进 ...

  2. 百度站长平台HTTPS认证所遇到的坑

    坑1: 百度站长平台https认证失败,提示:请确保您网站的所有链接均支持https访问,且未使用不安全协议(如:SSL2.SSL3等协议). 解决办法: 1.  友情链接检查, 要检查所有的友情链接 ...

  3. Python 版百度站长平台链接主动推送脚本

    如果自己的网站需要被百度收录,可以在搜索结果中找到,就需要将网站的链接提交给百度.依靠百度的爬虫可能无法检索到网站所有的内容,因此可以主动将链接提交给百度. 在百度的站长平台上介绍了链接提交方法,目前 ...

  4. 百度站长工具进击site结果页面[SITE特型]

    最近在度娘上site站点是不是发现多了一个应用展示框?没错!这就是度娘新推出的site特型,仔细看一下是百度站长平台的相关功能,作为目前国内市场占有率比较高的搜索引擎,百度站长工具进击site结果页面 ...

  5. SEO -- WordPress怎设置百度站长链接自动提交

    百度站长平站更新了主动推送(实时)推送的方式,受到了广大站长的好评,但是对于使用WordPress的网站来说怎么设置自动提交呢,在这里介绍一种比较简单且有效的方法.我们可以使用 WP BaiDu Su ...

  6. 百度站长针对SEO人员关系的问题的一些解答

    自然排名是全部由机器完成还是存在人工干预? 夫唯:第一个就是说经常好不容易找到了一些新的想法,用我们这些草根的话讲找到了百度的漏洞,好不容易排名上去了,过两天就会波动.有些人就怀疑说在百度的整体算法里 ...

  7. 广州站长沙龙 MIP 问题及答案

    1. mip提交几个月时间了,生效量比较少,是什么原因? 答:提交 MIP 页面后,经过收录.校验.和生效三个步骤,才能在结果页看到闪电标. 1)提交 URL 后,spider 会去抓取收录: 2)页 ...

  8. 运维服务器手段(监控宝,Nagios,百度通告平台)

    站在"巨人"的肩膀上运维 现实问题 之前在论坛看到一个运维工程师的帖子,内容如下: "现在的一个IT工作者最头疼的就是加班,秃顶的是IT工作者最多.单身的是IT工作者最多 ...

  9. 运用百度开放平台接口根据ip地址获取位置

    使用百度开放平台接口根据ip地址获取位置 今天无意间发现在百度开放平台接口,就把一段代码拿了下来,有需要的可以试试看:http://opendata.baidu.com/api.php?query=5 ...

随机推荐

  1. 查看linux的进程到底用了多少内存

    1. 在linux下,查看一个运行中的程序, 占用了多少内存, 一般的命令有    (1). ps aux:      其中  VSZ(或VSS)列 表示,程序占用了多少虚拟内存.          ...

  2. Xcode中不用Storyboard,用纯xib创建TabBar模式视图

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 如果要开发Tab类型视图的App,在Xcode中可以使用对应的 ...

  3. How to migrate data from another Mac using Mountain Lion and earlier

    链接:http://support.apple.com/zh-cn/HT4889

  4. java同步synchronized

    java同步synchronized volatile仅仅用来保证该变量对所有线程的可见性,但不保证原子性. 看下面的这段代码: /** * * @author InJavaWeTrust * */ ...

  5. (七十一)关于UITableView退出崩溃的问题和滚动到底部的方法

    [TableView退出崩溃的问题] 最近在使用TableView时偶然发现在TableView中数据较多时,如果在滚动过程中退出TableView到上一界面,会引起程序的崩溃,经过网上查阅和思考我发 ...

  6. IOC 控制反转(Inversion of Control,英文缩写为IoC)

    在采用面向对象方法设计的软件系统中,它的底层实现都是由N个对象组成的,所有的对象通过彼此的合作,最终实现系统的业务逻辑. 在这样的齿轮组中,因为是协同工作,如果有一个齿轮出了问题,就可能会影响到整个齿 ...

  7. Sql表注释

    1 创建表的时候写注释 create table test1 ( field_name int comment '字段的注释' )comment='表的注释'; 2 修改表的注释 alter tabl ...

  8. Oracle WorkFlow(工作流)(二)

    2.4消息(Message) 消息主要是为通知服务的,可以把消息当作通知的内容和类型.消息也属于一个单据类型,通知只能和同一个单据类型里的消息相关联. 每个消息可以有一个或多个属性和自己相联系,消息的 ...

  9. Opencv2.4.9、VS2010配置及grabcut代码实例

    最近opencv库更新到了2.4.9,作为小码农的我紧跟时代的步伐,装了2.4.9这个库.以下是我的配置步骤: 1.从http://opencv.org/上下载opencv2.4.9文件,由于我用的是 ...

  10. Linux IPC实践(3) --具名FIFO

    FIFO具名/命名管道 (匿名)管道应用的一个限制就是只能在具有共同祖先(具有亲缘关系)的进程间通信. 如果我们想在不相关的进程之间交换数据,可以使用FIFO文件来做这项工作,它经常被称为命名管道;命 ...