使用 service worker+sw-precache 实现网站加速
metaquant · sorrowise · 2016-12-29 19:36:30 +08:00 · 4492 次点击这是一个创建于 2871 天前的主题，其中的信息可能已经有所发展或是发生改变。
service worker 是谷歌 chrome 团队近年提出的一个技术方案，本意为渐进式网络应用(progressive web app, PWA)提供离线支持，使得网络应用可以离线运行。一旦启用 service worker ，则它可以根据开发者的缓存配置为用户缓存网站静态与动态资源，并截获用户的所有网络请求，并根据缓存配置来决定是从缓存还是网络获取相应资源，从而可以提高网页的加载速度。测试结果表明，一般能实现 4-5 倍的加速，最好的时候能够实现 10 倍的加速。使用 service worker 实现网站加速的优势有：
- 可以很轻易地实现静态与动态资源缓存，决定缓存空间的大小与缓存时间期限，可定制性高；
- 不需要服务端支持，只需要在本地生成 service worker 文件并上传就可以使用，特别适用于没有服务端的静态博客或网站；
- 配合 sw-precache ，只需要做好缓存配置， sw-precache 可以自动生成 service woker 文件，不需要自己实现缓存逻辑；
- 可以灵活为动态与静态资源，以及不同网址提供不同的缓存机制，并实现资源的动态更新，同样不需要自己编写代码
劣势包括：
- 网站必须启用 HTTPS:这个不太算劣势，毕竟是大势所趋，但在目前可能会限制其适用范围；
- 不是所有浏览器都支持：目前 chrome, firefox,opera 以及国内的各种双核浏览器都支持，但是 safari 不支持
- 不能解决首次访问缓慢的问题，因为还没有缓存。
相关文章：
- 关于使用 service worker+sw-precache 实现网站加速的方案： https://metaquant.org/service%20worker-web%20performance-cache.html
- 关于 service worker 的工作原理： https://metaquant.org/pwayu-service-workergong-zuo-yuan-li-tan-xi.html
- 关于 sw-precache 的使用指南： https://metaquant.org/sw-precache.html
- 关于 service worker 的导论性介绍： https://developers.google.com/web/fundamentals/getting-started/primers/service-workers?hl=zh-cn
 |
1
momentum 2016-12-29 19:42:09 +08:00
之前接触过 service worker ，但没想过可以用来网站加速，很新颖的思路
|
 |
2
piedpipper 2016-12-29 19:43:14 +08:00
wordpress 可以用吗？
|
 |
4
metaquant OP @piedpipper 虽然没有试过，但应该可以，没有什么本质的区别
|
 |
5
kimwang 2016-12-29 19:58:23 +08:00
不是有 Page Speed 了吗
|
 |
6
zeninger 2016-12-29 21:19:54 +08:00
通过本地缓存加快网页加载？感觉和 ququblog 的思路类似，虽然那个是在后端实现的
|
Select Language