通过Service Worker实现网页离线缓存、CDN并发请求和缓存版本控制

Service Worker 是一个服务器与浏览器之间的中间人角色,它可以拦截网络请求并根据网络具体情况采取适当的动作、更新来自服务器的的资源。本文通过 Service Worker 代理请求,实现网页第二次访问的离线访问和CDN并发请求功能,提高网站的访问速度,同时能够避免 jsDeliver 这类 CDN 问题造成的网站不可用的情况。

使用FreeCDN提升网站的访问速度

freecdn 是一个纯前端的 CDN 解决方案,用于降低网站流量成本,同时提高网站稳定性、安全性,并且无需修改现有的业务逻辑。其核心使用了 HTML5 中一个重要的 API —— Service Worker。它是一种浏览器后台服务,能拦截当前站点产生的 HTTP 请求,并能控制返回结果,相当于给网站加了一层反向代理。有了这个黑科技,我们可以把传统 CDN 的功能搬到前端,例如负载均衡、故障切换等,通过 JS 灵活处理各种请求。

网站访问速度优化之ServiceWorker

ServiceWorker 担任了服务器与浏览器的中间人角色,如果网站中注册了 ServiceWorker 那么它可以拦截当前网所有的请求,并做相应的处理动作。 ServiceWorker 内容就是一段 JavaScript 脚本,内部可以编写相应的处理逻辑,比如对请求进行缓存处理,能直接使用缓存的就直接返回缓存不再转给服务器,从而大大提高浏览体验。有些开源工具包存在多个 CDN 站点,使用 ServiceWorker 可以实现自动寻找访问最快的站点,如果某个站点发生错误,可以自动切换,FreeCDN 便是借此实现的。