免费下载!由 O’Reilly 出版的《NGINX 完全指南》中文版已正式上线 了解详情
写点什么

移动网页加速器(MIP):着眼于构建开放技术标准的开源项目

  • 2016-12-30
  • 本文字数:2399 字

    阅读完需:约 8 分钟

在当今互联网时代,Web 页面加速速度不仅关乎用户体验,而且还影响用户的留存率。

据数据显示:站点首屏超过 5s,平均流量下降 25%。

为了提升移动端网页性能,Facebook 率先推出 Instant Articles,增加 20% 点击,增加 30% 分享,减少 70% 放弃;

谷歌开启Accelerated Mobile Pages(AMP),并声称第三方页面速度会提升20% 到80%;百度于2015 年开始了Mobile Instant Page(MIP)。其中,AMP 和MIP 均为开源项目。

12 月 22 日,百度在北京举办了 VIP 大讲堂年终巨献,会上对百度 MIP 网页加速器进行了技术解读。会后,InfoQ 对百度搜索的主任架构师谭待先生和高级技术经理高磊先生进行了专访。

事实上,在影响移动网页体验的因素中,速度是一个关键点,但速度的价值却普遍被忽略。据谭待先生介绍,百度曾就用户行为做了一番分析,发现网站开发人员之所以没有意识到速度的重要性,有一个原因在于看不到流量、收入等与网页速度的相关性数据。

因此,提升速度,不仅是后端要做优化,前端和网络同样需要付出努力。将已经经过验证的最佳使用方法总结成文字,于普通人而言依然有一定的实现困难性;而将这些经验以框架形式作为解决方案(MIP)展现出来,则是更简单的方式。在这一背景下,百度 MIP 网页加速器应运而生。

MIP 究竟是种怎样的技术?

MIP 是在 HTML 基础上进行了规范限定,通过合理优化的 JavaScript 使用,再辅以高速缓存技术。与此对应的即为 MIP 三个组成部分:MIP HTML、MIP JS 和 MIP Cache。

作为一套技术标准,MIP 对 HTML 的标签进行了使用方法的限定。除了将 HTML 固有标签封装成 MIP 自有标签外(如 img、video、iframe 封装成 mip-img、mip-video、mip-iframe),还禁止使用了 frame、frameset、form 等标签。对于保留的标签,MIP 进行了一些资源加载与渲染的数据处理。比如,优化加载逻辑(主题和对用户特别优化的内容的优先加载,其他元素如广告再后续同步处理),延时呈现(只有当真正需要使用某个资源时才进行加载),提前计算布局(对图片、视频或漂浮元素进行事先占位)。

MIP 禁止使用某一些 HTML 原生标签,因为它们会影响资源的加载和渲染顺序,并直接影响页面的加载速度。作为替代,MIP 会通过定制化解决方案表现达到同等功效,而这些修改化使用都符合 Web Component 标准规范。

在谭待看来,虽然 JavaScript、AJAX 技术本身没有问题,但是在 MIP 中要避免直接使用。这是因为写出高效的 JavaScript 程序并不容易,加载时机和顺序难以保证。大部分开发者的使用呈现对用户体验并不友好。MIP 沉淀了一些最佳实践成果,以期用更加简便的方式提供给开发者。

但是谭待先生和高磊先生都在澄清一点:MIP 的速度并非主要来自于 CDN 和预取,据估计,在 MIP 速度的提升中,来自 MIP Cache 模块的不足 30%,而 70% 以上要归功于 MIP HTML 和 MIP JS 两个模块。

在使用 MIP 构建页面的过程中,开发者既可以采用 MIP 规范的 HTML 和已有的通用组件,也可以进行自定义组件。在 MIP 的规范中,除了定义 MIP HTML 和 MIP Cache 的应用规范,还定义了 MIP 的扩展组件规范。而针对自定义组件的开发者,其所提交的组件则会经由百度进行 code review 等审核。

据称,MIP 于 2016 年 8 月正式对外公开,截止目前已经衍生出了 110 个组件,其中 96 个为第三方站点提供的 MIP 组件。

新浪爱问技术总监李千分享了 MIP 改造经验,新浪爱问在改造前每天 PV 量约为 9 千万以上,从最开始接触到全面大批量上线 MIP 历时两个月,最终加载速度得到了很大提高,页面打开速度提升 2 倍。具体而言,体现在两点:

  1. DNS 解析耗时少:通过使用 MIP 封装的精简组件,省去体积庞大的 JS 库引用,减少静态文件、JS 缓存在百度 CDN 页面的体积。
  2. 页面渲染耗时少:使用 MIP 全组件,该组件采用懒加载技术,避免渲染阻塞问题。

据数据统计,MIP 改造后页面达到率获得了提升,网站流量增加 18%,广告部分收入提高 12%。此外,李千认为 MIP 还具有低学习成本、开发成本和维护成本的优势。

据百度透露,经过针对国内主流站点的测试表明,MIP 可以提升页面 30%-80% 的加载速度,以及 5%-30% 的 PV 访问量。

谭待和高磊还分享了百度 MIP 项目研发背后的故事。他们指出,MIP 于 2015 年夏天开始调研,2015 年 10 月出品并最早应用于一个百度自有的产品。之后,在 2016 年年中开始讨论对外产品的技术方案,并于 2016 年年终进行了大范围 Web 尝试。百度称截至目前,已经有超过 2800 个站点、9.1 亿个移动一面参与 MIP 化改造。

目前 MIP 团队有 50 人,其中 20 人为前端研发人员。百度称该项目将会一直以开源项目形式发展下去。百度坦诚希望原来越多的人使用 MIP 开源项目,并参与核心代码的提交。

百度称一直保持与 Google AMP 团队的交流,因为 MIP 和 AMP 同为开源项目,不仅具有相同的技术思路,而且在协议层面和规范层面也非常相似。基于共同的出发点,双方将来会继续深化合作,使得开发者只需开发一次,在 AMP 和 MIP 两种环境中便可同时使用。此外,百度预计于明年和 Google 共同落地 Progessive Web APP(PWA),在 MIP 提升阅读浏览体验的基础上,继续优化动态的互动呈现。

百度承诺,MIP 会始终遵守 W3C 规范 ;百度的愿景是支持完全开放、生效于所有平台的 Web 加速项目,从而促进 Web 环境发展。

作为搜索引擎巨头,百度需要考虑用户体验和站长利益双方面因素。谭待坦言,在 MIP 项目中也遇到一些技术坑,如组件兼容性的问题,而国内网站页面需要支持不同格式的广告播放,为此,百度需要和不同的广告联盟讨论。

此外,谭待称采用 MIP 的网页内容会在搜索引擎排序中进行优待处理。除了搜索算法的持续迭代,搜索系统本身也会发生变化,其中 Spider 3.0 就参与到 URL 发现、收录和索引——在提交 MIP 之后,由 Spider 进行抓取,进入统一内容池处理。百度称目前每天每天有数亿个 MIP 页面从百度点出。

百度称希望进行生态赋能,通过技术和机制让 web 生态的生产、运营和变现等环节都更有效率。

2016-12-30 05:071640
用户头像

发布了 58 篇内容, 共 41.0 次阅读, 收获喜欢 31 次。

关注

评论

发布
暂无评论
发现更多内容

零信任时代企业如何提升访问权限的安全?

FinClip

免杀实战之面向PHP的WebShell免杀

网络安全学海

网络安全 安全 信息安全 渗透测试 WEB安全

Spring Boot「05」Annotations 02

Samson

Java Spring Boot 学习笔记 技术笔记 10月月更

【kafka问题】记一次kafka消费者未接收到消息问题

石臻臻的杂货铺

Kafk 10月月更

10分钟了解sql注入--报错注入(二)

贤鱼很忙

sql 网络安全 10月月更

技术分享必备de终端录制神器

小鑫同学

前端 Node 10月月更

37手游基于云平台的大数据建设实践

Apache Flink

大数据 flink 实时计算

Flash软件应用项目(二)

张立梵

设计师 Flash 10月月更

基于 Impala 的高性能数仓实践之物化视图服务

网易数帆

大数据 impala 企业号十月 PK 榜 物化视图 Calcite

电商秒杀系统设计

张立奎

15分钟了解sql注入(一) union注入

贤鱼很忙

网络安全 Web SQL注入 10月月更

上手JavaScript基准测试

小鑫同学

前端 Node 10月月更

容器云PaaS平台建设中应关注的重点和难点

穿过生命散发芬芳

10月月更 容器云PaaS

从一个工程师成长看自动化运维的过程

阿泽🧸

自动化运维 10月月更

转转推荐场景EE题解决思路

转转技术团队

深度学习 推荐系统

Web3.0杂谈-#005(52/100)

hackstoic

元宇宙 Web3.0

Vue 全部生命周期组件整理

默默的成长

Vue 前端 10月月更

Vue 状态过度

默默的成长

前端 Vue 3 10月月更

煤矿上的女孩

脑极体

Vue组件入门(四)组件注册

Augus

Vue 3 10月月更

【分享】前端线上紧急排查工具

小鑫同学

前端 Node 10月月更

Vue 组件通信六种方法

默默的成长

Vue 前端 10月月更

京东大佬最新出品《分布式缓存原理到实战剖析手册》,限时开源!

了不起的程序猿

Java 程序员 分布式 架构师 分布式事物

活跃开发者数量仅次于以太坊,波卡凭什么?

One Block Community

区块链 开发者 波卡生态

35分钟了解sql注入-盲注(三)

贤鱼很忙

sql 网络安全 10月月更

IaC示例:Terraform & Ansible自动化创建K3S集群

mengzyou

DevOps ansible IaC Terraform

算法评测在本地生活地图技术领域的探索和实践

阿里技术

算法 可解释

【一Go到底】第十三天---循环控制

指剑

Go golang 10月月更

FinClip | 2022 年 9月产品更新放送

FinClip

Python进阶(十六)正则表达式

No Silver Bullet

Python 正则表达式 10月月更

Python进阶(十八)Python3爬虫小试牛刀之爬取CSDN博客个人信息

No Silver Bullet

Python 数据分析 10月月更

移动网页加速器(MIP):着眼于构建开放技术标准的开源项目_移动_木环_InfoQ精选文章