MIP（Mobile instant pages 移动网页加速器）

MIP（Mobile instant pages 移动网页加速器）

• mip 官网 https://www.mipengine.org/
• mip审核平台 https://www.mipengine.org/platform/mip#/extensions
• mip官方博客园http://www.cnblogs.com/mipengine/
• mip github https://github.com/mipengine

html页面做哪些事情可以达到mip加速

1. mip规范改造，符合mip标准，并且能通过mip的校验 （https://www.mipengine.org/validator/validate）

2. 在mip的环境下运行，引入mip.js

3. mip cdn 缓存系统加速

其中的一些技术

• 1.网络优化

  (new Image()).src = '//mipcache.bdstatic.com/static/xx.gif?=' +(new Date());

  创建一个网络连接，请求mip cdn上的一张gif图,DNS预取，http预链接，速度100-200ms点提升
  

• 2.生命周期优化

  优先加载可视区域图片，非可视区域图片延迟加载 
  

• 3.cdn 缓存优化

  mip页面由百度的cdn直接返回 
  

• 4.https

  mip页面是通过https打开，速度与http一样快 
  

• 5.资源处理

  外链js
  图片资源
  css资源 
  预加载／cdn缓存／图片资源优化
  

• 6.开发环境

  npm install -g mip-cli
  安装mip脚手架工具
  

• 7.安装成功

  用mip -V来检查
  

• 8.mip规范

  https://www.mipengine.org/doc/2-tech/1-mip-html.html

• 9.mip组件

  1. 内置组件是包含在 mip.js 中的组件，可直接使用，无需另外引入js脚本

  2. 个性化组件是满足于特定需求的组件，包括交互，统计等需求。需要引入对应的 js 脚本

  3. 广告组件主要满足各类广告的投放，需要引入对应的 js 脚本。阅读广告文档来确定 MIP 广告类型

• mip组件改造

  mip提供的组件不符合需求时，可以对其进行改造，通过覆盖修改其样式，添加需要的元素标签。

• mip开发

  mip提供的组件不能完成功能时，可以针对自己的需要进行组件的开发，

• mip命令

  mip
  mip init（如果已经安装mip了，是否需要更新，否则mip init无法正常初始化）
  mip add mip-demo.html (生成mip-demo文件)
  

  

  mip server （预览页面） 
  

  

  mip的一些命令
  

  

• 如何开发

  在mip-extenions 目录执行命令
  
  创建组件模版
  mip addelement  mip-yh  (mip-yh 为组件名)
  

  生成如下图的4个文件

  

  具体文件的内容

  mip-yh.js

  

  mip-yh.less

  

  package

  

  READMRE

  

  开发完成可mip server 进行组件预览
  
  提交前可以简单的校验一下组件 
  
  mip validateelement mip-yh
  
  最终提交组件
      1.github 上提交pull request
      2.mip审核平台(https://www.mipengine.org/platform/mip#/extensions)
  
  打包zip组件文件，上传，等待审核通过后
  https://c.mipcdn.com/static/v1/{组件名}/{组件名}.js
  

• 搜素生效

  生效后会有如图的闪电标
  

  

  

  闪电算法(http://ziyuan.baidu.com/wiki/1590)

  mip-cache清理缓存(http://ziyuan.baidu.com/mip/index)