为推进web技术的发展,Brilliant Open Web 团队特推出每月一期的《移动Web加速技术月报》,该月报将整理较流行的移动Web加速技术,并跟进各项技术的进展和发展方向,以期帮助开发者了解或选用相关的技术,把握技术发展趋势。欢迎关注【OpenWeb开发者】公众号并回复“加群”,一起探讨相关技术。
作者 | Brilliant Open Web 团队breezet、chengang、shdong 编辑 | 尾尾
在上一期的月报中,我们为大家介绍了Web页面中如何使用预取和预渲染来进行页面加速,同时也指出了目前浏览器提供的预取和预渲染方法所存在的问题以及改进优化的思路。
本期,我们将再次聚焦到一期讨论的浏览器缓存、页面云端缓存等技术上,详细展开讨论各种页面缓存技术能达到的效果以及所存在的一些问题。
近几年,无论是内容分发平台还是浏览器厂商都会通过云端的页面CDN Cache服务,为用户访问Web页面提供更快的页面访问。
通过更优质的CDN Cache,内容分发平台或浏览器厂商通过中间代理的方式,让用户享受了更优质的页面速度浏览体验。由于各公司提供的页面缓存服务在对缓存的处理策略上不尽相同,也导致站点在提供Web服务时,不清楚应该如何配置才能被正确缓存并且对自己业务无其他负面影响。
本章节会详细讲述其中存在的问题,综合百度在此方面的处理方案给出建议的通用标准实现。
内容分发平台或浏览器对Web页面进行服务端的缓存,主要的目的是因为很多的站点服务本身并没有提供较好的网络环境和服务快速响应,通过将此类站点的页面缓存在CDN Cache等网络中(页面代理缓存),可以是用户访问此类站点时享受到极快的页面加载。
但是,目前云端缓存的规范是不明确,具体表现为业界已经默认的规范不属于任何组织(如x-forward-for),部分规范是浏览器提供商(chrome,Firefox)等提出的,并未完全推进到标准中(如标识预加载的x-moz),从而导致页面开发者在自己的页面可能被缓存的情况下,无法正确的保障自己被缓存页面的用户体验以及功能。
本文将从以下几个方面在总结内容分发平台或浏览器在代理缓存服务策略上的问题和解决方案:
本小节主要讲述页面站点在被浏览器或内容分发平台的代理服务缓存时所面临的问题,并给出对开发者更友好的缓存服务解决方案建议。
下图是一个用户访问站点时的请求所经过的缓存相关的路径。
浏览器部分云加速服务,对页面的修改以及缓存对开发者过于透明不可控,包括但是不限于:
代理缓存服务本身会在页面访问时抓取对应的页面,因此可遵循以下缓存策略:
来控制;
- Cache-Control
头来控制缓存超时,用
- Cache-Control
头来控制平滑更新;
- stale-while-revalidate
百度搜索结果页中的一个网站开发者,自己站点的
路径下的所有页面都是高时效性的页面,不希望被任何加速服务缓存。为了达到这个目的,站长应该在自己站点的
- /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文件,来判断那些页面可以直接不通过自己的云加速服务,而是直接访问源站。
代理缓存服务进行页面缓存时,也会给站长带来数据统计上的困扰。本小节试图从数据统计的方面,提供缓存服务在统计上的一些解决方案。
头来指名真实的用户IP信息
- x-forward-for
- <meta x-forwad-for='true' sendTo='domain/path'>
本月报将收录移动Web加速技术的主要进展,欢迎读者一起完善,投稿邮箱:openweb@baidu.com。
Mip:
AMP: 1、 amp-story 默认静音,添加渐变效果,修复部分兼容性问题,提升组件使用体验 2、 AdSense / Doubleclick 快速取回 unlayoutCallback 实验 3、AMP 元素增加API,实现元素的调度时间传递给元素本身 4、 amp-analytics 增加新的分析服务商:Alexa Internet,增加参数this.isInabox_,支持基本批处理功能
百度在W3C 2017 TPAC会议上针对页面云端缓存策略的议题与全球各大互联网公司有过深入的交流和讨论,也收到了大家的积极响应和回复。
云端缓存策略是一项重大的技术创新,但技术野蛮生长的同时也对开发者造成了巨大的困扰,随着大家对此项技术的广泛深入应用,云端缓存策略必然需要统一的标准和规范,开发者通过统一的规范和标准,来配置自己的页面的云端缓存策略,来提供更可靠的体验和功能。
欢迎各位读者补充各项移动Web加速技术及其最新进展,可以发送邮件到 openweb@baidu.com,也可以关注【OpenWeb开发者】公众号并回复“加群”,一起来探讨相关技术,与我们携手推进Web技术的发展!
来源: https://juejin.im/post/5a2fc4025188251c11409819