移动Web加速技术月报第2期

作者 | Brilliant Open Web 团队breezet、shdong
编辑 | 尾尾

为推进Web技术的发展，Brilliant Open Web团队特推出每月一期的《移动Web加速技术月报》，该月报将整理较流行的移动Web加速技术，并跟进各项技术的进展和发展方向，以期帮助开发者了解或选用相关的技术，把握技术发展趋势。欢迎关注【OpenWeb开发者】公众号并回复“加群”，一起探讨相关技术。

一、内容回顾

在上一期的月报中，我们梳理了移动Web加速技术的方向，并介绍了页面云加速相关的技术——页面云加速的主要核心其实就是使用云端缓存或代理的方案，让用户能通过更快的网络获取加载页面。主要的核心技术点有两部分：基于CDN的页面Cache或代理、基于端（Web容器或移动浏览器）与云端交互的协议机制。

本期，我们将聚焦到Web页面的预取和预渲染相关的技术上。

二、相关技术介绍：Web页面的预取和预渲染

页面快速加载是提升移动Web体验的一个非常重要因素。页面本身的渲染性能是很重要，但页面还有一些关于浏览器渲染性能以外的性能体验瓶颈。

当网站已经按照一些标准（类似AMP/MIP，或者简单的静态化基础HTML页面）进行构建之后，页面的渲染性能会被极大改善，如果希望页面能达到瞬时展现的体验，还依赖类似搜索结果页本身的内容分发平台提供更强大的预取和预渲染能力。

1. 浏览器预渲染/预取 API 的一些问题

移动浏览器下，点击搜索结果页所展示的某一结果，页面被渲染前有如下环节需要执行：域名解析、建立连接、发起请求、处理请求、网络传输、页面渲染、资源加载。

对于移动互联网用户来说，这些环节太多，会耗费很多的时间，经过百度的实际测试，百度搜索结果中的站点平均首屏时间在3.5s左右。

类似AMP和MIP这类标准已经提供了CDN的缓存和渲染过程的优化，但是对于加载策略，预渲染控制，容器都还没有标准或者基于trick的实现，并没有办法达到瞬时打开的体验。

主要问题体现如下：

（1）预渲染策略

加载策略一方面考虑的是什么时候加载页面和资源，加载多少，从哪里加载以及加载的优先级。这一块更多的是业务应用上的考虑，不需要提供标准或浏览器的API。

另一方面考虑的是哪些页面适合被prefetch/prerender，以及prefetch/prerender对服务的HTTP请求的统计影响。而这一方面是需要有通用的标准（页面是否适合被prefetch/prerender）的，关于统计上的影响，也需要从浏览器发出的HTTP请求上考虑设计新的Policy（Policy Header）供服务端识别。

（2）对预取/预渲染的过程控制

link prefetch/prerender另一方面的问题是缺乏反馈机制，以及对过程的控制。百度对页面是否进行了prefetch/prerender会有一些产品策略上的需求（提供瞬时展现交互体验）和过程跟踪上的需求（帮助决策用户是否当前环境是否适合prefetch/prerender）。

上述两个问题都是目前link prefetch/prerender暂未提供的能力。

2. 技术展望

目前在百度搜索中，部分页面的预取/预渲染能力是通过JS资源请求 API的方式来满足的，从效果实现来看，能解决上述描述的大部分问题。

但类似更顺滑、更有效的预取/预渲染效果，我们希望能让更多的人享受到。所以从长期来看，推进预取/预渲染在浏览器标准实现上的能力增强，是一种更合理的方式。

三、主要技术进展

本月报将收录移动Web加速技术的主要进展，欢迎读者一起完善，投稿邮箱：openweb@baidu.com。

1. MIP本月进展

MIP的官方网站是：www.mipengine.org/ ，GitHub地址是：github.com/mipengine

MIP新增功能

（1）MIP bind双向绑定机制和组件上线，提供双向绑定的特性；能够允许页面实现数据驱动功能，开发者可以在任意场景修改数据，并驱动页面元素变动。

（2）支持头部async加载JavaScript脚本，脚本可以和页面DOM加载同步进行，减少了脚本加载时间的等待，加快了整个页面的渲染和展现速度。

（3）组件升级：mip-stats-baidu统计组件修复事件追踪、点出率等BUG；mip-form升级，去掉mip-form中的password和file限制。

MIP校验升级

（1）mip-vd-baidu组件校验升级，解决校验不一致的问题。

（2）script标签加载脚本校验，在head加载的JavaScript必须增加async属性。

2. AMP本月进展

AMP（Accelerated Mobile Pages）是谷歌提供的网页加速技术，其官方网站是：developers.google.com/amp/。

（1）amp-position-observer动画组件，使用这个组件来创建一系列的动画功能，如视差效果，微妙的缩放。

（2）amp-sidebar支持响应式设计。

（3）amp-analytics组件支持mip-video组件的数据统计。

（4）流式广告支持，能够在不知道广告尺寸的情况下加载广告。

（5）amp bind和amp list组件升级，以增强对新数据的支持。

（6）ampstart模板库上线，通过ampstart可以使用现成的AMP使用和分享AMP模板，模板，快速创建AMP页面，而不需要从头构建页面元素。

（7）AMP 项目启动两周年公布相关数据：AMP页面已达40亿个，AMP站点已达2500W个。

四、总结

移动Web加速的下一个方向应该是探索页面加速上的标准策略分级，并影响内容分发平台、搜索引擎等流量入口使用标准的页面性能分级来进行更广泛层面的引导，提升真实用户接触到的互联网站点的页面体验。

Brilliant Open Web

BOW（Brilliant Open Web）团队，是一个专门的Web技术建设小组，致力于推动 Open Web 技术的发展，让Web重新成为开发者的首选。

BOW 关注前端，关注Web；剖析技术、分享实践；谈谈学习，也聊聊管理。

关注 OpenWeb开发者，回复“加群”，让我们一起推动 OpenWeb技术的发展！