前端静态资源缓存控制策略浅析

是什么

前端静态资源缓存是什么呢？为了描述方便，在这里只讨论浏览器缓存。浏览器缓存就是浏览器在访问网页时将当前访问的网页中所涉及到的静态文件(css, js, png, jpg等等)下载到本地，后续再次访问该网页时浏览器直接用缓存下来的静态文件就行了，而不用再去网络上下载。就好比你在网上看电影，第一次看的时候缓存下来，第二次再看的时候播放的就是本地缓存好的，就不卡了。

为什么

为什么要做好前端静态资源缓存控制呢，对公司来讲可以节约带宽，减轻服务器压力；对用户来讲可以提升用户体验，加快网页的访问速度。也就是说公司这边省钱，用户这边省流量又不卡。

怎么做

现在已经知道什么是前端静态资源缓存了，也知道很有必要做好缓存控制，那如何做好缓存控制呢？也就是在渲染网页(html)的时候引用的静态文件(css, js, png, jpg等等)是用本地缓存下来的呢，还是用网上服务器那边的呢？有人说用本地缓存下来的，这样加载的最快，但如果服务器那边对这个文件的内容做修改了怎么办(比如说这张图片底色从白色的变成黄色)，可以发现，用本地缓存的虽然能保证加载最快，但可能并不是服务器最新版本的资源；有人说那就用服务器那边的，这样肯定是最新的，但万一服务器那边这个文件根本没做改动，那下载下来的文件就和本地缓存的文件一模一样，那这一次下载岂不是白白浪费了下载时间和流量，也就是说，每次都请求服务器那边的虽然能保证资源最新，但可能不是最快。这个时候就得想个法子，实现文件没变动的时候就用本地缓存的，文件发生变动了就用服务器那边最新的，这样就完美了。