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

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

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

1、内容回顾

在上一期的月报中，咱们为你们介绍了Web页面中如何使用预取和预渲染来进行页面加速，同时也指出了目前浏览器提供的预取和预渲染方法所存在的问题以及改进优化的思路。

本期，咱们将再次聚焦到一期讨论的浏览器缓存、页面云端缓存等技术上，详细展开讨论各类页面缓存技术能达到的效果以及所存在的一些问题。

2、相关技术介绍：云端页面缓存策略漫谈

近几年，不管是内容分发平台仍是浏览器厂商都会经过云端的页面CDN Cache服务，为用户访问Web页面提供更快的页面访问。

经过更优质的CDN Cache，内容分发平台或浏览器厂商经过中间代理的方式，让用户享受了更优质的页面速度浏览体验。因为各公司提供的页面缓存服务在对缓存的处理策略上不尽相同，也致使站点在提供Web服务时，不清楚应该如何配置才能被正确缓存而且对本身业务无其余负面影响。

本章节会详细讲述其中存在的问题，综合百度在此方面的处理方案给出建议的通用标准实现。

1. 概述

内容分发平台或浏览器对Web页面进行服务端的缓存，主要的目的是由于不少的站点服务自己并无提供较好的网络环境和服务快速响应，经过将此类站点的页面缓存在CDN Cache等网络中（页面代理缓存），能够是用户访问此类站点时享受到极快的页面加载。

可是，目前云端缓存的规范是不明确，具体表现为业界已经默认的规范不属于任何组织（如x-forward-for），部分规范是浏览器提供商（chrome，Firefox）等提出的，并未彻底推动到标准中(如标识预加载的x-moz)，从而致使页面开发者在本身的页面可能被缓存的状况下，没法正确的保障本身被缓存页面的用户体验以及功能。

本文将从如下几个方面在总结内容分发平台或浏览器在代理缓存服务策略上的问题和解决方案：

1. Web site option for proxy cache server（web站点针对云端缓存的配置）
2. Web site access info collection when page cached by proxy server（web站点针对云端缓存的统计方法）

2. Web site option for proxy cache server（Web站点针对云端缓存的配置）

本小节主要讲述页面站点在被浏览器或内容分发平台的代理服务缓存时所面临的问题，并给出对开发者更友好的缓存服务解决方案建议。

存在的问题

下图是一个用户访问站点时的请求所通过的缓存相关的路径。

浏览器部分云加速服务，对页面的修改以及缓存对开发者过于透明不可控，包括可是不限于：

• 没有明确的配置协议，让控制哪些页面能够被缓存，哪些页面不能被缓存；
• 页面缓存失效的时间配置，是否沿用HTTP Header中的Cache-Control头，没有明确规范，而各种代理缓存服务对此的处理也不一致；

解决方案建议

代理缓存服务自己会在页面访问时抓取对应的页面，所以可遵循如下缓存策略：

• 使用robots.txt文件中新增字段描述站点url pattern粒度的是否容许被缓存；
• robots.txt文件自己可缓存时间用Cache-Control来控制；
• 缓存时间统一用Cache-Control头来控制缓存超时，用stale-while-revalidate头来控制平滑更新；
• 对于站点主动配置的缓存系统来讲，robots.txt里边的禁止相关的内容，效果等同于Cache-Control: no-cache
• 代理缓存服务请求站点时，处理主要流程以下：

  

用例说明

百度搜索结果页中的一个网站开发者，本身站点的/home/news/data 路径下的全部页面都是高时效性的页面，不但愿被任何加速服务缓存。为了达到这个目的，站长应该在本身站点的robots.txt文件中加入以下内容：

Cache:*
HttpsCacheDisallow:/home/news/data/
HttpCacheDisallow:/home/news/data/
# 对于全部的Cache来讲，https和http的在/home/news/data/路径下的全部内容不容许被缓存
# 若是但愿各层加速能平滑更新，那么能够在Cache-Control头里面写入以下内容：max-age=864000, stale-while-revalidate=1728000
# 代表：在86400s内本地缓存有效。在172800s内返回旧缓存的同时，异步发起更新。当时间超过172800s时，缓存失效，从新抓取。
复制代码

全部遵循了缓存规范的服务解析站点的robots.txt文件后，不缓存/home/news/data路径下的全部内容。知足了开发者的需求。

固然，做为站长，不能滥用此规范，由于不缓存的页面每每意味着更慢的加载速度。

在这种场景下，处在HttpsCacheDisallow或者HttpCacheDisallow所配置的Path中的页面所返回的Cache-Control等header将会仅仅被用来控制浏览器端的缓存。

相应的，对于浏览器自带的云加速服务器来讲，方便在浏览器上作热门站点的robots.txt文件，来判断那些页面能够直接不经过本身的云加速服务，而是直接访问源站。

3. Web site access info collection when page cached by proxy server

代理缓存服务进行页面缓存时，也会给站长带来数据统计上的困扰。本小节试图从数据统计的方面，提供缓存服务在统计上的一些解决方案。

存在的问题

• 部分页面强依赖请求的Client IP来作一些策略
• 部分站长须要实时知道本身站点的pv特征
• 缓存后，这些信息尚无明确规范回传给站长
• 目前，只有FireFox提出了基于x-forward-for的规范，可是这个规范不属于任何组织

解决方案建议

• 代理缓存服务回传回源等数据的时候都加上x-forward-for头来指名真实的用户IP信息
• HTML中新增用于日志回传的标签，用于告知浏览器须要将当前的x-forwad-for发送至对应地址，例如<meta x-forwad-for='true' sendTo='domain/path'>

3、主要技术进展

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

Mip：

1. mip-map地图组件上线，支持百度地图的定位、地图控件加载、坐标弹窗定制等功能；
2. mip-stats-cnzz 功能升级，可以将页面的 cnzz 统计请求发送到自定义的 cnzz 服务器节点，修复固定节点的服务不稳定性问题；
3. mip-showmore 功能升级，可以定制展开状态下的精美的按钮样式，让 showmore 的样式更加贴合开发者的自身需求；
4. mip-sidebar 升级，弹出时增长平滑的动画效果，让弹出的效果更加优美；
5. mip-bind：进行功能完善和升级，在官网上产出详细的使用说明文档和示例，帮助开发者更轻松使用此功能，同时协助部分电商站点完成 MIP 页面的该功能的添加；
6. mip-form：去除 password，file等功能限制；
7. 网盟广告加载速度优化实验，将投放脚本、广告位配置提早至 layout 以前加载；
8. 官网文档开源，开放文档，作到开源共建。

AMP: 一、 amp-story 默认静音，添加渐变效果，修复部分兼容性问题，提高组件使用体验 二、 AdSense / Doubleclick 快速取回 unlayoutCallback 实验 三、AMP 元素增长API，实现元素的调度时间传递给元素自己 四、 amp-analytics 增长新的分析服务商：Alexa Internet，增长参数this.isInabox_，支持基本批处理功能

4、总结

百度在W3C 2017 TPAC会议上针对页面云端缓存策略的议题与全球各大互联网公司有过深刻的交流和讨论，也收到了你们的积极响应和回复。

云端缓存策略是一项重大的技术创新，但技术野蛮生长的同时也对开发者形成了巨大的困扰，随着你们对此项技术的普遍深刻应用，云端缓存策略必然须要统一的标准和规范，开发者经过统一的规范和标准，来配置本身的页面的云端缓存策略，来提供更可靠的体验和功能。

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