首先我们来看定义:

谷歌AMP(Accelerated Mobile Pages,加速移动页面)是Google推出的一种为静态内容构建 web 页面,提供可靠和快速的渲染,加快页面加载的时间,特别是在移动 Web 端查看内容的时间。

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

看起来两者的定义很相似,一个叫加速移动页面,一个叫移动网页加速器,实现目的也是相同的——优化移动网页。WTF,不会是一个东西吧。当然不是一个东西,但是不过只是老坛酸菜面和康师傅牛肉面的不同而已。两者都是方便面,主要原材料相同,配方有点不同,制作的方式有点差别,最重要的是代言人不同。

移动网页加速最早是谷歌提出来的,通过制定开源标准,制定页面规范,优化渲染速度来提高用户体验,并且谷歌会搜索引擎中,对符合AMP标准页面增加权重。百度坚持谷歌有我也要有的原则,充分借鉴了AMP,也提出了自己的网页加速开源标准,于是MIP诞生了。

百度MIP无论是目的(在搜索结果中返回极快速移动页面),还是原理(简化HTML、CSS、禁用大部分JS、资源控制、缓存等,还是推出步骤(先新闻,再一般页面),还有原页面与MIP页面的互相引用方法(加标签),都和Google AMP一样,连官网的页面布局、菜单安排、技术说明里的内容,几乎都是一样的。就连在对应搜索引擎上展示的标识几乎也是一模一样的:

这里不得不佩服国人的借鉴能力。

页面优化原理

AMP和MIP都是本质上都是通过优化页面渲染或者延迟加载,减少阻塞的原理来实现页面的加速。就像我们企业内部的一些规范一样,我们可能也有一套标准来提高我们的代码质量和页面性能。只不过这两个能够给我们带来SEO的优化。下面,我们就一MIP为例,了解一下她加速的原理。

MIP主要由三部分组织成:

MIP HTML

MIP JS

MIP Cache

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

下面将介绍MIP页面的加速原理:

经过精心设计的javascript

MIP不允许用户自定义JavaScript,需要用MIP 组件的形式引进来,从而确保安全性和性能表现

所有静态资源需要标明尺寸

MIP要求将所有的资源(广告、图片、音频和视频)标明尺寸。当资源真正加载时,所有资源大小可以被立即推断出并迅速的用于计算页面布局,加载中的资源将无缝呈现,不必因为页面频繁更新布局而影响到用户的阅读体验。

不允许任何机制阻止页面渲染

开发者的任何自定义脚本,都需要用MIP的tag反馈给MIP,例如mip-ad、mip-iframe等,这些方式不会阻塞页面的layout和渲染。

控制外部资源加载

MIP runtime会控制外部资源的额加载来确保其高效性,从而使用户想阅读的内容尽快出现在屏幕中。

封装交互功能

MIP提倡网页能给用户直接简单的体验,但这并不意味着MIP限制了页面的生动和有趣。MIP runtime提供了高度优化的被封装的JavaScript,开发者无需投入过多精力去实现复杂的交互功能。

建议使用inline的css

css的加载,会阻止页面的渲染,css内联可以减少客户端的开销。

只允许GPU加速的动画

MIP只允许用transforms和opacity来完成动画效果,当动画能在GPU上执行时,仅触发渲染层合并。

MIP 缓存

MIP另一个重要的意义在于能够帮站长加速网页,百度将会把MIP网页缓存到百度CDN中。只要符合MIP标准,都可以使用MIP缓存。

这些都是我们在优化web项目中经常用到的手段而已,只不过现在百度通过开源标准,并且给予SEO的甜头,给予统一规范。

谷歌AMP和百度MIP的看法

AMP和MIP提供的移动网页优化方案在一定程度上能够提高用户的体验。同时与seo的结合,也提高了很多开发者加入的兴趣。但是,由于比较封闭的环境,这套标准无法应用于大型的项目,只能应用于比较简单的页面展示,当然,这个与他们的初衷是一致的。

AMP和MIP是两套不同的标准,为了支持谷歌和百度两套搜索引擎的优化,必须写两套页面,这会增加开发者的开发成本。

在未来,我个人认为,两家的标准会趋向统一,百度估计会支持AMP标准,毕竟谷歌是站在全球的角度上的,百度只在中国的用户比较多。

谷歌AMP和百度MIP是什么鬼?的更多相关文章

  1. 给你的网站添加谷歌AMP、百度MIP、神马MIP链接自动提交功能

    我们在做网站的时候,经常会听到别人说SEO优化,网站优化等等.但是我们经常听的云里雾里的,但是经过我们运营一段时间之后,我们慢慢的就会熟悉了,知道什么是SEO.SEO中文译名为搜索引擎优化,既然是叫搜 ...

  2. 百度MIP页规范详解 —— canonical标签

    百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...

  3. 经典面试题(二)附答案 算法+数据结构+代码 微软Microsoft、谷歌Google、百度、腾讯

    1.正整数序列Q中的每个元素都至少能被正整数a和b中的一个整除,现给定a和b,需要计算出Q中的前几项, 例如,当a=3,b=5,N=6时,序列为3,5,6,9,10,12 (1).设计一个函数void ...

  4. Windows Store Javascript项目使用高德地图、谷歌地图、百度地图API

    原文 Windows Store Javascript项目使用高德地图.谷歌地图.百度地图API 在Win8 Store 项目中可以使用的地图主要有微软的Bing Map,目前高德地图sdk也支持Wi ...

  5. Android 通过调用系统,如接口 谷歌语音、百度语音、科大讯飞语音等语音识别方法对话框

    现在app在发展过程中会集成一些语音识别功能,不具有其自己的显影剂一般正在开发的语音识别引擎,所以在大多数情况下,它是选择一个成熟的语音识别引擎SDK集成到他们的app在. 平时,这种整合被分成两个, ...

  6. js实现谷歌坐标转百度坐标

    js实现谷歌坐标转百度坐标 谷歌坐标转百度坐标 实现算法如下(以js为例,其他语言调整就行): //$lat 维度:$lng 经度  function GCJTobaidu($lat, $lng){ ...

  7. 1145.cn 百度MIP适配实例

    MIP,全称Mobile Instant Pages(移动端即时页面),是百度推出的一套移动端网页开放技术标准.网站移动端页面统计MIP改造,能实现页面缓存,从而达到移动网页加速效果. 百度官方已经明 ...

  8. 利用PHP str_replace()函数替换符合百度MIP内容标准

    了解过百度MIP的同学都知道(什么?你不知道什么是百度MIP?就是移动网页加速器鸭

  9. 百度MIP技术快速入门(上)

    前言 「本文假定读者已经有初级的前端开发知识,包括HTML.CSS.」 百度在一年前推出了称为 MIP(Mobile Instant Pages)的前端开发组件,主要目的是加速移动端网页的显示.MIP ...

随机推荐

  1. Monkey基本使用

    什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点 顾名思义,Mon ...

  2. springboot 前后端分离开发 从零到整(一、环境的搭建)

    第一次写文章,有什么错误地方请大家指正,也请大家见谅. 这次为大家分享我做毕业设计的一个过程,之前没有接触过springboot,一直做的都是Javaweb和前端,做了几个前后端分离的项目.现在听说s ...

  3. http和https的加密方式

    BS盛行的今天有点网络只是很必要啊,首先需要个网络抓包工具wireshark, http:http通过三次握手来通信,握手过程看图1 https:https = http + ssl(secure s ...

  4. Daily Scrum - 12/01

    Meeting Minutes 今天重阳去和UI设计团队的人去讨论UI方面的事宜了,剩下的人主要还是在讨论文件输入输出的事.目前总算是能实现文件存取了,尽量在明天前把文件的格式内容都弄好. Burnd ...

  5. Windows 7 上面 redis 启动报错的处理

    Windows 7或者是 win10 上面 安装redis 的windows 3.2.100 的版本 启动报错: Creating Server TCP listening socket *:: li ...

  6. [知乎]BAT占线

    黑色自有,蓝色全资收够,红色入股. https://www.zhihu.com/question/304396738/answer/547766603

  7. BeanFactory 简介以及它 和FactoryBean的区别(阿里面试)

    BeanFacotry是spring中比较原始的Factory.如XMLBeanFactory就是一种典型的BeanFactory.原始的BeanFactory无法支持spring的许多插件,如AOP ...

  8. angular浏览器滚动条滚动到指定element 触发事件

    angular.module('app').directive('ScrollTrigger', () => { return { restrict: "A", link:f ...

  9. 在vue中使用weixin-js-sdk自定义微信分享效果

    在做微信分享的时候,产品要求分享效果要有文字和图片,使用weixin-js-sdk解决了, 原始的分享效果: 使用微信JS-SDK的分享效果: 首先需要引入weixin-js-sdk npm inst ...

  10. Vue实现对数组、对象的深拷贝、复制

    当组件间传递对象时,由于此对象的引用类型指向的都是一个地址(除了基本类型跟null,对象之间的赋值,只是将地址指向同一个,而不是真正意义上的拷贝),如下 数组: ,,]; var b = a; b.p ...