关于缓存问题，想请教下老师
来源：7-13 浏览器存储-Service Workers-如何实现Service Workers主页面之间的通信
chanchan666
2017-08-27
老师，比如像淘宝首页，如果要解决首屏加载时间过长，应当如何优化？比如有些不变的资源，如图标，商品类目数据等，是缓存到localstorage里面，还是存到cache里，还是用http强缓存？这三个之间的使用场景有什么区别吗？那当服务器更新资源，本地资源采取什么策略更新资源呢？
比如看您讲的通过serviceWorker，拦截请求，直接返回cache里面的资源，来实现离线应用，那么cache里面的资源什么时候更新呢？
1回答
-
首先是使用cdn，走cdn和不走cdn访问速度会差很多。
然后是资源延后加载，淘宝使用了懒加载的方式，对于一些首屏渲染用不到的资源，不要在首屏在请求资源，这不仅仅是图片。
然后就是使用app shell能力，让首屏能有个大的shell架子先渲染出来，参考eleme移动版和手淘国际版移动端，都有比较明显的app shell的应用。类似如下图，具体实践参见百度lavas的demo（https://lavas.baidu.com/）
对于首页，其实可以把首屏需要的商品数据存储在localstorage中一份，用于首屏渲染，这样的话，可以很快渲染出首屏的数据样式。然后再根据请求回来的数据，进行真实数据的渲染，并且更新localstorage，这也是可行的。这就是使用本地存储历史数据加快首屏渲染。
对于一些图标，淘宝走的都是304或者max-age这样的缓存方式，究其原因，对于这样的电商网站，这些图片都可能是运营人员在后台配置的，随时是可能动态变化的，无法知道哪些图片要存储在localstorage中，所以，走的都是304或者max-age这样的方式。这样的方式在服务端层面控制，对于所有的静态资源控制方式是一样的，当然相对于直接存在localstorage中读取，他会有和服务端协商的过程，所以性能会差一些。
而对于百度这样的站点，他依赖的js和logo图片，几年都不会变，所以完全可以把这些资源直接存储在localstorage中，让用户更快的读取。所以，淘宝首页对于一个一直不变的静态资源，可以考虑存储在localstorage中。整体的存储和更新的逻辑都是在你的代码中的，你要更近localstorage中相关静态资源的版本，你的业务代码肯定要变，业务代码本身对这段逻辑可控。
service worker提供的cache storage能力，先阶段主要首先于service worker在浏览器层面的支持程度，用cache storage的话，它的效果和直接使用localstorage类似，但是在缓存相关的功能的开发上，比localstorage更加专业和便捷，但是它受限于service worker，如果可以的话，使用cache storage来进行缓存。
service worker现在很多时候是和webpack共同使用，真实的场景中，其实对于一个文件，如果文件内容没有变化，那么文件名没有变化，缓存一直有效，如果内容变化，文件名也会变化，这种情况下，通过service worker实际上是找不到新的文件名的，那么也不会说老的缓存导致业务逻辑无法更新的情况。service worker中要缓存的文件名可以通过webpack获得最近的html中inject进去的js，从而拿到最新的需要缓存的js文件进行缓存。所以cache storage实际上依赖于缓存文件内容变化后文件名的更新。
30
相似问题