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

做者 | Brilliant Open Web 团队breezet、JennyL
编辑 | 尾尾

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

1、前言

移动设备已经成为当下使用频率最高的电子设备，而移动Web依然是移动设备中使用频率最高的应用场景。

站点页面性能提高可使得用户浏览站点时的体验获得良好改善，做为其中一条技术分支，移动Web加速技术的方法和技术方案在近几年获得了不断发展。不管是内容分发平台、浏览器提供商、网络提供商仍是Web站点，都在经过各类各样的移动Web加速技术为用户提供更良好的页面浏览体验。

2、移动Web加速技术有哪些方向？

开始的前言内容中咱们已经提到，参与移动Web生态的几个重要角色分别是内容分发平台、浏览器提供商和网络提供商以及Web站点。每一个角色都在本身所擅长的领域经过技术创新来给用户提供更快速的移动Web体验。所以，移动Web加速的几个技术方向也和几个重要参与者的角色职能密不可分。

几个重要的技术方向分别是：

1. 页面加载与缓存

移动Web加速的其中一个重要技术方向是针对页面加载和缓存相关的加速技术。

在此方向中，页面分发端、浏览器和移动网络是主要的影响因素，页面加载相关的技术解决方案，也是从这三个影响因素为出发点，来进行技术设计和实现的。

页面加载加速主要聚焦在页面云加速（CDN Cache）以及移动端加速、页面预取/预渲染等相关技术点。

2. 页面构建

移动Web加速的另外一个核心技术方向是经过明确页面的正确构建方法，来提高页面在渲染和浏览时的用户体验。

移动页面的渲染对用户体验的影响是很是巨大的，直接关系到用户在打开页面时可否很快的看到首先想要浏览的内容（首屏渲染）。

影响首屏渲染的因素很是多，经过正确的页面构建方法，能够进一步提高站点页面的首屏渲染性能而且不伤害用户的浏览体验。

3、相关技术介绍

在每期的网页加速技术月报中，咱们都会为你们介绍相关的加速技术知识点。本期先为你们介绍页面云加速相关的技术知识。

页面云加速的主要核心其实就是使用云端缓存或代理的方案，让用户能经过更快的网络获取加载页面。主要的核心技术点有两部分：基于CDN的页面Cache或代理、基于端（Web容器或移动浏览器）与云端交互的协议机制。

1.基于CDN的页面Cache或代理

此技术其实在近几年已经很是成熟，不管是各类云服务解决方案仍是CDN服务提供商都已经有很是成熟的技术能力。此项技术的思路是从Web服务提供者角度来提供更好的网络环境来进行移动Web加速。在此就不作更多的介绍。

2.基于端与云端交互的协议机制

最近两年开始兴起的新的云端加速技术方案，该技术在云端的Cache机制（主要是CDN）的基础上，使用端来代理用户页面加载行为，调用云端的Cache页面返回给端使用。此项技术的思路与前者不一样的是它想解决用户在该端上（Web容器或移动浏览器）的全部移动Web站点的访问加速，而不是某一个站点或已经提供了CDN访问的站点。主要做用是能够提高用户在该端上的Web浏览体验，让用户体验优于其余竞品。

主要技术 有：Google AMP Cache、Baidu MIP Cache、UC浏览器云加速、QQ浏览器云加速等。

主要技术进展

1.AMP本月进度

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

（1） AdWords 支持AMP化广告落地页：AdWords是广告提供商，使用AMP落地页可以快速加载，提升广告转化率。AMP的表单，内容实时更新和统计支持，使AMP适用于广告落地页。（相关连接：amphtml.wordpress.com/2017/09/07/…

（2）CONDÉ NAST是如何使用AMP的：
CONDÉ NAST拥有多个新闻业务，选择AMP不是由于原来页面慢，而是相信Google的服务和CDN； NAST公司将AMP和CMS结合使用，自动将新闻生成为AMP页面。（相关连接：amphtml.wordpress.com/2017/09/08/…

（3） AMP技术团队将要进行全球巡回推广：包括新加坡、悉尼、伦敦、北京、上海等地，感兴趣的读者能够关注。（相关连接：amphtml.wordpress.com/2017/09/19/…

2.MIP本月进度

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

MIP新增功能

（1）增长储存功能，使用localStorage和fetch实现。储存功能可用于代替cookie保存用户设置，登陆状态，携带信息，与服务器进行数据通讯。

（2）MIP-Cache连接全量上线二级域名，详细说明及影响见《MIP-Cache域名升级》。

MIP升级功能

（1） mip-video 视频组件升级。支持source多视频源播放。

（2）mip-showmore 折叠组件交互升级。支持展开后再也不显示收起按钮(www.mipengine.org/examples/mi…

（3）mip.js 升级。修复a连接在mip-iframe中不能跳出的问题。

校验规则更新

在9月初，MIP更新了少许校验规则，对90%以上的MIP页无影响，保证MIP校验的严谨性。更新后的规则为：

（1） 对 head 中 base 标签增长了限制，避免cache改写后连接指向有问题。

（2）强制要求页面引用https 的 mip.js，避免脚本被不法劫持。

（3）认定src=" "（引号之间只有空格）状况等同于src=""，视内容为空。

（4）升级template src校验，支持文档中src={{url}}的写法。

进行中

1. mip-bind 组件支持数据双向绑定。页面异步更新，可用于电商等复交互页面。
2. MIP-Cache 支持返回webp图片。使用压缩率更高的图片，减小图片大小。

4、总结

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

欢迎各位读者补充各项移动Web加速技术及其最新进展，能够发送邮件到 openweb@baidu.com，也能够关注【OpenWeb开发者】公众号并回复“加群”，一块儿来探讨相关技术，与咱们携手推动Web技术的发展！