百度MIP技术快速入门（上）

时间 2020-06-15

标签百度 mip 技术快速入门繁體版

原文原文链接

前言

「本文假定读者已经有初级的前端开发知识，包括HTML、CSS。」css

百度在一年前推出了称为 MIP（Mobile Instant Pages）的前端开发组件，主要目的是加速移动端网页的显示。MIP技术来源于谷歌推出的AMP技术，但因为众所周知的缘由，百度决定自行开发一套和AMP相似的技术，宣称和AMP规范彻底一致。html

MIP由MIP-HTML、MIP-JS、MIP-Cache组成。用人话说，前端

MIP-HTML 是MIP对HTML的规范，包括禁用<img>以防止页面repaint、a标签强制要求href属性等，具体 https://www.mipengine.org/doc... ；git

MIP-JS 要求全部JS代码须要以「MIP组件」的形式引入到页面中，禁止直接写JS。而且，在MIP全部的JS代码都是异步加载的，再加上禁用各类CSS的hack、静态资源固定大小等规范来减小页面重绘，以此提升JS的运行速度；github

MIP-Cache，简单说就是百度免费提供的CDN，全部MIP页的代码都放在百度的CDN上，并且对于网页中的静态资源，好比图片，均可以放在百度的CDN上，但因为百度对使用MIP-Cache技术的静态资源的收录时间不肯定，因此我建议只对长期不变的静态资源用缓存。shell

概览

应用MIP技术，按照百度的建议是直接开发一套MIP页面，而不建议「改造」现有移动端H5页。数组

然而改造一下现有的页面，成本显然低得多。将一个页面「MIP化」大概分为2步：浏览器

对于HTML代码，按照MIP-HTML的规范进行修改，去除或替换禁用的标签；
对于JS代码，因为大部分JS是一些显示逻辑（好比图片轮播），不涉及具体的业务，因此，开发者要在MIP组件列表（https://www.mipengine.org/doc... ）中寻找合适的MIP组件直接替换掉页面中原有的JS代码；
注：若是页面中的JS涉及必要的业务逻辑，则必须自行开发 MIP自定义组件，并提交百度审核，经过后才能用。缓存

愿意的话，还能够按照MIP-Cache的格式要求来缓存静态资源。服务器

以目前MIP技术的发展来看，MIP只适合于改造单个页面，还没法应用于整个站点，由于官方MIP组件都比较简单，只适用于相似新闻、论坛帖子页之类的结构简单、特效简单的网页，对于存在复杂的交互逻辑，或是基于React之类框架的SPA页面，不适合应用MIP技术，若是必定要用MIP的话，那须要去掉这些复杂的逻辑，只保留简单的展现，至关于从新开发一个页面了。

不过呢，百度已经在开发MIP 2.0了，MIP 2.0的亮点即「整站MIP化」，包括提供更多强大的MIP组件、更容易编写JS代码、默认用Vue开发自定义组件以及更快的运行速度等。

MIP页面开发入门

先来看看如何开发一个MIP页面。

开发MIP页，最重要的就是如何使用MIP组件。

为了方便开发，首先，请按照 MIP-CLI 的文档安装好（https://github.com/mipengine/... ），进入工做区文件夹，并新增一个页面，命令是

mip add XXX.html

使用以下命令能够验证页面是否符合MIP的要求：

mip validate XXX.html

若是须要运行这个页面，那么能够用这个命令

mip server

按 Ctrl+C 能够退出。提示一下，在浏览器中调试MIP页时，能够用开发者工具修改页面分辨率，换成手机的分辨率。

使用 MIP-CLI 新建的页面是这样的：

<!DOCTYPE html>
<html mip>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title><!-- 标题 --></title>
    <link rel="stylesheet" type="text/css" href="https://c.mipcdn.com/static/v1/mip.css">
    <link rel="canonical" href="对应的原页面地址">
    <style mip-custom>
    /* 自定义样式 */
    </style>
</head>
<body>
<!-- 正文 -->

<script src="https://c.mipcdn.com/static/v1/mip.js"></script>

</body>
</html>

其中<html mip>、 <link rel="canonical" href="">是必须添加的标签，前者用于告知Spider当前是个MIP页；后者告知百度当前MIP页对应的移动端H5页的地址（对应的，在H5页上须要<link rel="miphtml" href=""> 指明对应的MIP页地址），固然，若是没有对应的H5页，那么能够指向PC页或本身。

引入的一个CSS文件和JS文件是MIP技术的基本库文件，里面包含了MIP的核心代码和几个内置组件。

基本规范

对于全部<img>标签，替换为<mip-img>，注意<mip-img>不是自闭合标签，须要添加关闭标签。

<mip-img
    layout="responsive" 
    width="350" 
    height="263"
    src="https://www.mipengine.org/static/img/sample_01.jpg">
</mip-img>

https://www.mipengine.org/exa...

这是一个最简单的MIP组件，看上去和普通的HTML<img>标签同样，很是简单，但有几点须要注意：

1）MIP的组件大多支持多种布局，这里使用的是「responsive」，即响应式布局，适合视频、图片等固定比例但真实大小不肯定的资源；

2）「responsive」布局须要提供 width 和 height，但不须要提供单位，由于这里的宽和高仅用于肯定比例，MIP会自动给定真实大小。

还有 a标签强制要求href属性等其余要求，具体看 MIP-HTML 规范，https://www.mipengine.org/doc...。

组件布局

MIP组件支持如下几种布局（https://www.mipengine.org/doc... ），具体要看各个组件的文档。能够经过修改MIP组件标签中的layout属性修改布局方式。

这里须要注意的是，大多数组件都有默认的布局方式。

添加样式

MIP没有对CSS作特别的限制（可是会自动去掉一些性能极差的选择器），也容许使用外链的方式引入CSS文件（虽然并不建议这么作，由于这样引入的CSS文件一般很是大）。对于内联的CSS，须要使用 <style mip-custom></style> 包裹。

试用更复杂的组件

MIP组件的使用方法相似于Bootstrap的JS组件的使用方法，找到文档，复制，粘贴，done……因此这里只提一个要点：MIP官方提供的组件分为内置组件、个性化组件和广告组件，其中内置组件只须要一开始自动引入的 mip.js 就能运行，而其余类型的组件均须要引入特定的脚本才能用。

由于很是简单，因此这里我就以一个很简单的个性化组件——mip-gototop为例，展现一下MIP组件的使用方法。

复制粘贴 gototop 组件的示例代码；

<mip-fixed type="gototop">
    <mip-gototop></mip-gototop>
</mip-fixed>

在 mip.js 后添加 gototop 组件须要的JS文件。

<script src="https://c.mipcdn.com/static/v1/mip-gototop/mip-gototop.js"></script>

随便写一些代码把整个页面撑的长一些，以便看出回顶部组件的效果。

最后看起来是这样的：

接着可使用上文中提到的 MIP-CLI 工具，mip server 命令运行MIP服务器，从这个本地的服务器访问刚写完的MIP页，就能够看到效果了。

以上就是绝大多数MIP组件的使用方法。

已有H5页改形成MIP页

使用百度的官方MIP开发一个MIP并不难，那现有页面改形成MIP页就更简单了，就三步：

使用 MIP-CLI 验证现有页面（mip validate XXX.html），找出全部错误；
修复代码规范类的错误，好比a标签缺了href属性、存在<img>标签等；
把用JS实现的特效换成MIP组件，主要包括回到顶部、图片轮播、广告等。

我在网上找到了这一套用AmazeUI写的H5页，简单说一下改造的过程。侵删。

先使用验证工具验证这个页面，提示有这些错误：

能够发现大多数错误均可以很快解决。

而后能够发现，页面中有三块JS实现的效果须要替换为MIP组件。分别是：

顶部的轮播图片效果，须要替换为 mip-carousel；
回到顶部按钮，须要替换为 mip-gototop；

超连接，mip页之间跳转须要用

<a data-type="mip" data-title="连接到页面的标题" href="连接地址"></a>

至此也就完成了这个页面的MIP化改造。

总结

本文简单介绍了MIP技术、MIP页的开发过程、现有H5的MIP化改造等基本问题，后续的文章将更深刻的讨论MIP技术，包括MIP自定义组件的开发、MIP 2.0等话题。