了解MIP（Mobile Instant Pages）

时间  2019-11-08
标签 了解 mip mobile instant pages 栏目 无线 繁體版
原文   原文链接
 
什么是mip？
mip是百度在2016年提出的移动网页加速器项目。能够简单理解为是一个规范。
 
mip能作什么？
mip能帮助站长和网站开发者快速搭建移动端页面。
 
mip怎么实现加速的？
mip不仅是CDN加速，mip从前端渲染和页面网络传输两方面进行优化，杜绝页面渲染中的阻塞问题，提高页面展示速度。
 
页面渲染耗时主要分为三类：DNS解析耗时、网络传输耗时、浏览器渲染重绘耗时。mip加速的基本原理就是减小各个步骤的耗时：
  • 为减小DNS解析，MIP-Cache将静态文件以相对路径存储在百度CDN中；
  • 为减小网络传输耗时，MIP-JS控制静态资源的按需加载，MIP-Cache系统优先从CDN读取文件；
    • MIP-JS是MIP的运行环境，包括基本类引入（AMD），内置组件加载（mip-img），外置组件管理（组件css插入）以及组件布局管理（解决布局兼容性问题）
    • MIP-JS优势：
      • 使用精简的基础类，尽可能减小网络传输时间
      • 内置优秀的组件，在不阻塞浏览器渲染的前提下提供最好的交互体验
      • 提供组件布局管理，预先为组件设定宽高，避免组件加载后的浏览器重布局
  • 为减小浏览器渲染重绘耗时，MIP-HTML对<img>、<video>等形成浏览器重绘的标签进行了封装控制。
    • img标签替换成mip-img，利用懒加载和按需加载提升页面的渲染速度
    • 自定义交互组件，如轮播、表单、分享等，依赖自身的脚本和MIP-JS就能运行，无需引入第三方库。减小页面发送的网络请求和传输时间，加快了页面的传输和渲染。
 
MIP和CDN区别？
  • MIP要求站点必须按照MIP标准进行修改或者从新制做，CDN只会站点提供节点加速服务，无需修改。
  • MIP服务器基本上是在用百度移动端的快照缓存服务器。而CDN提供的节点是没法和百度服务器想媲美的。
  • MIP地址使用是百度缓存服务器域名，能够提高必定安全性，而CDN仍是本身的域名。
  • MIP只针对移动页面进行加速，不影响PC端，而CDN则能够支持不一样用户端。
  • MIP是一项长久免费的开源计划，而大部分CDN是须要付费使用的。
 
补充：
CDN（Content Delivery Network）加速原理：简单说就是在不一样地点创建内容缓存节点，经过负载均衡技术，将用户的请求定向到最合适的缓存服务器上去获取内容。
 
MIP-Cache能够理解为一套CDN缓存系统。MIP-Cache给经过MIP规范和MIP校验的MIP页面提供静态文件（图片、外链css等）的缓存服务，在缓存静态文件的同时，HTML页面自己会被改写，引用图片的地址会被改为MIP-Cache中的图片地址。这样就能够避免从不一样域名下读取静态文件，使用同源策略减小DNS解析时间，可以加速加载速度。
 
MIP-Cache更新和校验策略：
MIP-Cache会按期从新抓取MIP页并进行校验，知足页面更新需求。
在MIP-Cache中：
  • 页面的缓存时间是最短52分钟~最长5天（具体时间由该页面用户点击量和站点自己稳定性决定）
  • 图片缓存时间为10天
  • MIP-JS组件文件的缓存时间为10分钟
  • MIP-Cache快速更新机制，MIP-Cache开放了单独清理的接口，具体参考 MIP-cache 清理，生效时间大概5min
     
注意： MIP-Cache目前限制100s只能够更新10条，若是MIP站点是https协议，那么$api应该是$api = 'http://mipcache.bdstatic.com/update-ping/c/s/';
 
移动站应该尝试百度mip的五个缘由
  1. 加速移动端页面
  2. 提高到达率和用户体验，更少的流失率
  3. 百度搜索提权，更大的用户量
    • 百度的天然结果是根据用户点击和页面质量排名的。《百度搜索Mobile Friendly标准》的页面可读性包含了：页面加载速度体验、页面结构、页面浏览体验。
  4. 开发简单，迁移成本低
  5. 已有组件兼容性好，也可个性化定制新组件
 
用百度MIP快速搭建体验友好的移动页面
一、Doctype改造：将<!DOCTYPE ****>改成<!DOCTYPE html>
 
二、<html>标签改造：<html xmlns='http://www.w3c.org/1999/xhtml'>或<html lang='en'>改成<html mip>，注意所有小写
 
三、Head部分改造：
  • <head>标签必须彻底小写
  • 页面的编码必须是utf-8，修改声明为<meta charset="utf-8">
  • 页面中加入<meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>
  • 页面中加入MIP专用样式文件<link rel='stylesheet' type='text/css' href='https://mipcache.dbstatic.com/static/v1/mip.css'>
  • 告诉搜索引擎改页面对应的标准html页面地址，若是存在则标识<link rel='canonical' href='http://www.baidu.com'>其中href值修改成与当前mip页面相对应的标准页面（移动页）url地址。若是只有mip页面没有对应的标准页面就将href修改成当前mip页面地址就好了。
 
四、body内改造：
  • 首先body标签必须小写；
  • 将img、style、frame、form、input、textarea、select、option标签替换成对应的mip组件标签；
  • 引用MIP-JS运行环境：<script src='https://mipcache.dbstatic.com/static/v1/mip.js'></script>放在页面的尾部。
 
五、使用MIP Cache注意事项
  • 通常cache图片、脚本、样式，作完上述4步后，修改资源地址为相对地址或合法绝对地址（以校验工具为准）；
  • cache的内容须要更新要经过MIP数据提交中的更新数据接口，把更新的url连接推送过去，等待百度更新。
 
六、其余组件使用
官方文档包含了目前支持的全部组件，以百度统计为例：
查找原有百度统计工具查看统计js代码（全局查找关键字var_hmt关键字）获取token（hm.js？以后的编码），在页面底部，全部script前放入代码：
<mip-stats-baidu token="22090d4a309827eb62bc1335b2b28f11（网站统计token值）"></mip-stats-baidu>
最后去除原来的百度统计代码。
 
canonical标签
百度MIP规范要求必须添加标签canonical，否则MIP校验工具会报错。
 
一、canonical标签有什么用？
canonical标签用于关联原页面和MIP页面，保证MIP页面继承原页面的权重，在爬虫抓取MIP页后，会根据canonical标签获得对应的MIP页面和原页面的关系，在移动搜索时优先展示MIP页面。
canonical标签不写或者写错都会致使MIP页面不能和原页面产生联系，致使权重丢失，MIP页面不展现。
 
二、原页面指什么页面？
原页面是相对于MIP页面来说的，若是在m.a.com/1.html的基础上，mip改造后获得mip.a.com/1.html，那么m.a.com/1.html就是mip.a.com/1.html的原页面。
 
三、标签的正确写法
canonical标签添加在MIP页面的<head>标签中，href指向原页面地址。
在mip.a.com/1.html页面（MIP页面）：
<link rel='canonical' href='http://m.a.com/1.html'>
 
补充：
href指向原则：href指向百度移动搜索导流最多的页面。
不一样状况下href指向：
  • 若是一样的内容既存在对应的pc页面，也存在移动页面，那么href指向百度移动搜索流量大的页面。
  • 若是是动态页面，原页面已经存在canonical标签，则href指向与原页面指向一致。
  • 若是原页面有多个版式，href指向流量最大的页面。
  • 若是没有对应的原页面url（如新建的mip站），或者直接在当前url进行MIP改造并直接生效 ，则href指向mip页面自己。
 
使用规则：
  • <link rel="miphtml">在H5页使用，指向对应内容的MIP页，方便搜索引擎发现对应的MIP页。
  • <link rel="canonical">在 MIP 页中使用, 指向内容对应的 H5 页面。
  • 若没有 H5 页，则指向内容对应的 PC 页。
  • 若直接在原连接修改 MIP，则canonical指向当前 URL。
 
注意事项：
  • MIP页面与原始页面的主体内容应该大体相同。若是内容相差较大，被搜索引擎断定主体内容不一致的话，会认为canonical标签无效。
  • 原页面与MIP页面的url的对应关系应该尽可能简单、直接。原网页出现的文档名或者文档id，在MIP页面命名时候也要出现。简单直接的对应关系有利于搜索引擎分析mip页面与原页面的关系，加快MIP页面被收录和展示的速度。
     如原页面url为：https://m.baidu.com/123.html
          
 
MIP广告
目前，百度网盟广告以及百度全网推荐已经接入MIP。使用mip-ad广告组件，可以在内容秒开的基础上，同时加载广告内容。避免页面展示初期因广告加载慢致使广告位空白的问题，提高广告的曝光率。
 
版本升级
只须要替换线上引用的MIP文件为v1版本，就能够完成升级。升级带来的好处就是减小将来的开发和维护版本。
 
MIP-CLI
一、MIP-CLI工具安装与环境部署
   MIP-CLI：mip开发工具，用于MIP页面和组件的开发和校验。
  • 确保安装了node（v>=4.x）和git，而后输入npm install -g mip-cli，安装好后输入mip -v查看mip版本号。
  • 安装mip-extension-optimizer，它是mip组件编译工具，用于将mip-extension中的特定组件源码编译成js文件。输入npm i -g mip-extension-optimizer
  • 建立开发文件结构
     打开https://github.com/Missup/mip-extensions，fork一份mip-extensions项目代码，进入本身的mip-extensions项目页面，克隆到本地文件夹（本身新建一个目录mip-project），建议目录结构以下：
     
     其中html文件夹用来存放咱们后续开发的mip页面。
 
二、MIP-CLI工具调试MIP网页
  • 初始化mip配置，在html目录下输入mip init将建立mip.config文件。
  • 新建一个mip页面，在html目录下输入mip add index.html将新建一个index.html文件，这个页面就是一个基础的MIP页面。固然，在新建页面的时候能够同时载入mip组件js脚本，如mip add index.html mip-share
  • 编写mip页面代码，注意符合mip网页规范，mip校验规则地址：https://www.mipengine.org/doc/2-tech/2-validate-mip.html
  • 校验MIP网页：mip validate index.html，线上校验器地址：https://www.mipengine.org/validator/validate
  • 调试MIP网页：在html项目目录输入mip server，访问http://127.0.0.1:8000进入调试页面
    • mip server默认监听8000和35730端口，若是端口冲突可在mip.config中修改启动端口，也可使用mip server -f命令强制关闭当前占用端口的node进程（windows下无效）。
 
三、MIP-CLI工具调试组件
  • 在mip-extensions仓库中建立新的组件
    • 在mip-extensions目录中建立组件：mip addelement mip-alert
    • 开发组件mip-alert.js用于定义组件，mip-alert.less用于定义组件样式，README.md用于说明组件用法，package.json用于记录组件版本及开发者信息
  • 预览调试组件
    • 在mip-extensions目录下启动mip server来预览组件，预览页面访问的是README.md文件中的示例。若是代码已经提交到mip-extensions-platform中，须要将组件文件夹复制到mip-extension中预览
    • 打开调试网页http://127.0.0.1:8000/会列出当前仓库中的组件，点击进入mip-alert组件预览
      • 若是页面不能预览，将mip-extensions文件夹下的mip.config文件删除
      • 预览mip-extension-platform中的组件，须要将组件文件夹复制到mip-extension仓库中，在mip-extension文件夹内使用mip server预览
  • 在MIP页引用本身编写的MIP组件
    • 修改mip.config：进入mip-project/html文件夹下，修改mip.config文件的字段extensionsDir为../mip-extensions
    • 在html目录下建立mip-alert.html文件，并添加mip-alert组件：mip add mip-alert.html mip-alert；在body中引入<mip-alert alert-text='我是alert内容'>点击触发alert</mip-alert>
    • 在html目录下启动mip server：访问http://127.0.0.1:8000进入mip-alert.html页面
    • 组件提交到github仓库时须要进行校验：mip validateelement mip-demo，经过校验后提交到仓库，等待审核。
 
四、MIP组件平台使用说明，平台地址： https://www.mipengine.org/platform/
  • 使用百度帐号登陆组件平台；
  • mip组件编写和测试，而后从组件平台上传组件，须要改下README.md中所需脚本的地址为https://mipcache.bdstatic.com/extensions/platform/v1/mip-__/mip-__.js，注意地址须要包含‘platform’，eg：
  • 点击上传组件按钮，上传MIP组件zip压缩包。组件经过校验后能够提交审核。
  • 组件审核会在一个工做日内，提交审核后组件会被锁定，不能再上传或者修改。只有等待管理员经过审核或者打回后才能继续修改。
  • 组件上线后在本地能够引入上线后的组件进行验证。
  • 若是修改已经上线的组件，在修改代码后，还须要修改package.json文件中的版本号，而后再次提交便可。
 
MIP和AMP的关系
  • AMP是一个开源性项目，MIP是这个开源项目的参与者
  • MIP维持AMP的目标，MIP在中国国内有一些特殊状况的考虑，因此作了单独的实现。
  • 一个站长开发了MIP如何迁移到AMP？目前MIP某些组件没法实现百分百功能转换。
  • MIP-Cache已经对部分AMP页面作了支持。
  • 百度同时支持AMP和MIP的索引和打开
 
有了AMP，为何还要作MIP？
AMP在中国的落地不是很理想，amp.js在中国不能访问，AMP缓存在中国没有服务，AMP不容许网页弹层，不符合咱们的使用习惯。
 
关于流量和计费问题：
  • 开发MIP后，搜索流量是导流到MIP仍是原页面？
    • 导流到MIP页面，须要在MIP页面中作好和原页面的对应关系
  • MIP移动网页加速器作了以后是只针对移动百度展现仍是说对咱们其余的正经常使用户同样显示？
    • MIP页面是能够独立运行的，能够在浏览器中经过url直接访问，不依赖百度结果页。因为MIP页速度较快，体验更优，会在百度移动结果页有更高的权重。
  • 搜索结果打开的是百度域名，用户分享是否也是百度连接？使用百度域名是否不利于网站的品牌传播同时也会影响流量统计，如何解决？
    • 若是用户经过组件分享，分享的标题、图片和内容都是原页面的内容，具体分享内容能够在使用组件时定义。不会影响流量和品牌传播。若是用户直接从浏览器复制连接分享，那么被分享的页面是MIP Shell连接（MIP页面连接），url中能看出原页面的URL。统计代码再页面加载完成后都会生效，不会受到分享影响。
  • 搜索结果打开的是百度域名，是否影响广告计费？
    • 从搜索结果点出的MIP页面，页面上的任何内容（包括但不限于广告、在线咨询、统计等组件）均视为在原站点上投放和使用。
 
什么网站适合加入MIP？
MIP已经能够完美支持资讯、图片、企业、小说、论坛等信息流类型的网站。复杂页面暂不建议MIP改造。
网站加载速度慢，打开速度时间长；用户体验差，跳出率较高的网站建议MIP改造。
 
常见问题汇总：
一、MIP对什么样的内容有较好的效果？
内容浏览类的站点支持比较全面
 
二、MIP页面发生错误会怎么样?
MIP有回退机制，访问出问题后会直接回到原来的h5页面，不会影响权重。
 
三、代码适配站点如何使用MIP？
若是后端根据UA判断是否为移动端页面，并返回页面，那么将返回的页面MIP化便可。若是是前端判断浏览器宽度或UA，再请求后端返回相应的页面，则须要改变这套流程，使用后端判断，或者直接改成响应式页面。
 
四、是否必须是HTTPS？
MIP改造自己不须要支持HTTPS，可是若是页面须要与服务端进行交互，好比发送统计，提交表单，获取数据，须要支持HTTPS。
 
五、gbk编码的网站如何使用MIP？
只能更改为utf-8。
 
六、对于自适应站点，MIP对页面的改造怎么弄？
若是自使用站点是css的Media Query实现的，那么不须要作什么特殊改造；
若是是经过js计算实现的，则须要去除原有JS逻辑，改引用mip-js的方式实现。若是组件不在mip-js组件列表，须要反馈给mip，而后等待它们实现。。。。
 
七、MIP规范中写道不能用link标签引入样式，是否是样式都要写到HTML页面里，而且只能出现一次style标签？
MIP规范不建议外链样式表，是为了节省网络加载时间，加速MIP页面。开发时，样式表能够做为单独的文件维护，上线前经过一次编译(fis3,grunt,gulp)实现文件内联，将css做为style标签插入html，达到MIP要求。
 
八、MIP框架是否能够和react等框架结合使用？
MIP与其余框架（除zepto和jquery）及其组件不能结合使用。
 
九、MIP页是否支持自定义cookie？实现登陆、统计、广告等功能。
cookie可使用<mip-access>组件实现，使用方法详见http://www.cnblogs.com/mipengine/p/mip-access.html
 
十、与服务端异步交互请求如何发出？
与服务端的交互请求须要自行封装组件，在组件中能够用fetch自行实现。
// get
fetch(location.href).then(function (res) {
    return res.text();
}).then(function (text) {
    fetchElement.innerHTML = 'fetch: ' + (text.search('mip-test') !== -1);
});
 
// jsonp
var fetchJsonp = require('fetch-jsonp');
fetchJsonp('xxx', {
    jsonpCallback: 'cb'
}).then(function (res) {
    return res.json();
}).then(function (data) {
    console.log(data);
});
 
十一、MIP化后对其余搜索引擎抓取收录以及SEO的影响？
在原页面MIP化后，不会影响其余搜索引擎的抓取记录，也不会影响页面权重。新增MIP页面能够经过robots.txt文件禁用其余搜索引擎的抓取，从而保证原页面权重。MIP相关内容能够这么写（假设目录是/mip/）：
// 这段代码意思多是容许百度引擎抓取全部文件
User-agent: Baiduspider
（这里不用写关于mip的内容）
 
// 下面这段意思是禁止谷歌引擎抓取mip目录下的文件
User-agent: Googlebot
Disallow: /mip/

 

MIP页面效果精选

连接中带有闪电标的页面都使用了MIP技术，能够做为开发参考。 
请使用手机或移动端模拟器查看页面效果。

 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程