摘要：百度在一年前推出了称为的前端开发组件，主要目的是加速移动端网页的显示。不过呢，百度已经在开发了，的亮点即整站化，包括提供更多强大的组件更容易编写代码默认用开发自定义组件以及更快的运行速度等。
前言
「本文假定读者已经有初级的前端开发知识，包括HTML、CSS。」
百度在一年前推出了称为 MIP（Mobile Instant Pages）的前端开发组件，主要目的是加速移动端网页的显示。MIP技术来源于谷歌推出的AMP技术，但由于众所周知的原因，百度决定自行开发一套和AMP类似的技术，宣称和AMP规范完全一致。
MIP由MIP-HTML、MIP-JS、MIP-Cache组成。用人话说，
MIP-HTML 是MIP对HTML的规范，包括禁用以防止页面repaint、a标签强制要求href属性等，具体 https://www.mipengine.org/doc... ；
MIP-JS 要求所有JS代码需要以「MIP组件」的形式引入到页面中，禁止直接写JS。并且，在MIP所有的JS代码都是异步加载的，再加上禁用各种CSS的hack、静态资源固定大小等规范来减少页面重绘，以此提高JS的运行速度；
MIP-Cache，简单说就是百度免费提供的CDN，所有MIP页的代码都放在百度的CDN上，而且对于网页中的静态资源，比如图片，都可以放在百度的CDN上，但由于百度对使用MIP-Cache技术的静态资源的收录时间不确定，所以我建议只对长期不变的静态资源用缓存。
概览应用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 新建的页面是这样的：
<!-- 标题 -->
其中、 是必须添加的标签，前者用于告知Spider当前是个MIP页；后者告知百度当前MIP页对应的移动端H5页的地址（对应的，在H5页上需要 指明对应的MIP页地址），当然，如果没有对应的H5页，那么可以指向PC页或自己。
引入的一个CSS文件和JS文件是MIP技术的基本库文件，里面包含了MIP的核心代码和几个内置组件。
基本规范对于所有标签，替换为
https://www.mipengine.org/exa...
这是一个最简单的MIP组件，看上去和普通的HTML标签一样，非常简单，但有几点需要注意：
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，需要使用 包裹。
试用更复杂的组件MIP组件的使用方法类似于Bootstrap的JS组件的使用方法，找到文档，复制，粘贴，done……所以这里只提一个要点：MIP官方提供的组件分为内置组件、个性化组件和广告组件，其中内置组件只需要一开始自动引入的 mip.js 就能运行，而其他类型的组件均需要引入特定的脚本才能用。
因为非常简单，所以这里我就以一个很简单的个性化组件——mip-gototop为例，展示一下MIP组件的使用方法。
复制粘贴 gototop 组件的示例代码；
在 mip.js 后添加 gototop 组件需要的JS文件。
随便写一些代码把整个页面撑的长一些，以便看出回顶部组件的效果。
最后看起来是这样的：
接着可以使用上文中提到的 MIP-CLI 工具，mip server 命令运行MIP服务器，从这个本地的服务器访问刚写完的MIP页，就可以看到效果了。
以上就是绝大多数MIP组件的使用方法。
已有H5页改造成MIP页使用百度的官方MIP开发一个MIP并不难，那现有页面改造成MIP页就更简单了，就三步：
使用 MIP-CLI 验证现有页面（mip validate XXX.html），找出所有错误；
修复代码规范类的错误，比如a标签缺了href属性、存在标签等；
把用JS实现的特效换成MIP组件，主要包括回到顶部、图片轮播、广告等。
我在网上找到了这一套用AmazeUI写的H5页，简单说一下改造的过程。侵删。
先使用验证工具验证这个页面，提示有这些错误：
可以发现大多数错误都可以很快解决。
然后可以发现，页面中有三块JS实现的效果需要替换为MIP组件。分别是：
顶部的轮播图片效果，需要替换为 mip-carousel；
回到顶部按钮，需要替换为 mip-gototop；
超链接，mip页之间跳转需要用
至此也就完成了这个页面的MIP化改造。
总结本文简单介绍了MIP技术、MIP页的开发过程、现有H5的MIP化改造等基本问题，后续的文章将更深入的讨论MIP技术，包括MIP自定义组件的开发、MIP 2.0等话题。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116824.html
摘要：百度在一年前推出了称为的前端开发组件，主要目的是加速移动端网页的显示。不过呢，百度已经在开发了，的亮点即整站化，包括提供更多强大的组件更容易编写代码默认用开发自定义组件以及更快的运行速度等。 前言 「本文假定读者已经有初级的前端开发知识，包括HTML、CSS。」 百度在一年前推出了称为 MIP（Mobile Instant Pages）的前端开发组件，主要目的是加速移动端网页的显示。M...
摘要：那百度为什么不和一样用呢况且还是开源的。我想一个重要的原因是使用的需要调用官网的库，用于控制资源加载缓存等功能这个恐怕是百度不愿意采用的一个核心原因，鉴于国内的网络环境伟大的，难免不让人担心这个库那天被屏蔽了。 1.关于AMP 在移动互联网的时代，尽管网站响应式设计可以满足多屏（pc、手机、ipad等）浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accele...
摘要：很多人都问过我，咖啡你的主题模板到底怎么改的。的改造非常简单。今天就免费给大家献上改造方案。好了，直接进入正题模板文件规范自己改，不多说。原文地址这是个技术文章，各位可以转载哈。 很多人都问过我，咖啡你的MIP主题模板到底怎么改的。我就和zblog那些开发者交流了下。zblog的MIP改造非常简单。今天就免费给大家献上改造方案。好了，直接进入正题！模板文件MIP规范自己改，不多说。模板...
摘要：很多人都问过我，咖啡你的主题模板到底怎么改的。的改造非常简单。今天就免费给大家献上改造方案。好了，直接进入正题模板文件规范自己改，不多说。原文地址这是个技术文章，各位可以转载哈。 很多人都问过我，咖啡你的MIP主题模板到底怎么改的。我就和zblog那些开发者交流了下。zblog的MIP改造非常简单。今天就免费给大家献上改造方案。好了，直接进入正题！模板文件MIP规范自己改，不多说。模板...
阅读 1930·2019-08-30 15:54
阅读 3578·2019-08-29 13:07
阅读 3096·2019-08-29 12:39
阅读 1769·2019-08-26 12:13
阅读 1525·2019-08-23 18:31
阅读 2133·2019-08-23 18:05
阅读 1822·2019-08-23 18:00
阅读 1025·2019-08-23 17:15
