增量更新是目前大部分团队采用的缓存更新方案,让用户在不知不觉中获取最新内容。具体的实现方式通常是(一般我们通过构建工具来实现,比如webpack):构建输出文件hash(比如:index。只能加载间接引用。如果html中的静态资源url有更新,最新的资源必须请求,那么我们需要考虑的是如何保证加载的html是最新的,其他静态资源充分利用浏览器缓存,减少网络请求,提高web性能浏览器缓存的本质是HTTP缓存,HTTP缓存分为强缓存和协商缓存,强缓存强缓存不发送请求,直接从浏览器加载资源,是否命中强缓存是根据HTTPResponse头Expires和Cache判断的-control(max-age).expires通过返回一个过期时间来判断是否过期,在这个时间之前,浏览器直接从缓存中加载资源。但是它的缺点是返回的过期时间是服务器时间,而比较是与客户端时间进行比较。如果服务端和客户端时间有误差,就会不准确。max-age返回的时间过期时间跨度,比如max-age=3600告诉浏览器在接下来的1小时内使用缓存。这解决了由Expires时间错误引起的问题。强缓存命中优先判断max-age,max-age优先级大于Expires。判断过程如下:negotiationcacheEtag和If-None-MatchEtag的值是根据一定的算法生成的字符串,用来判断文件是否发生变化,类似于文件hash中的。在第一次访问时,服务将返回文件的Etag值。访问后在请求头中添加If-None-Match参数,将Etag值带过去。服务器通过比较Etag值来判断是否需要重试。返回最新的资源(200或304)。Last-Modified和If-Modified-SinceLast-Modified是资源文件的最后修改时间。同样是第一次返回后,会被If-Modified-Since带过来,服务器会通过比较值来判断是否需要返回最新的资源。如果If-None-Match和If-Modified-Since都可用,则必须立即发送到服务器,没有优先级,实际中比较ETags就足够了。如果没有请求头,每次都会返回最新的资源200缓存判断过程。为了保证html每次都是最新的,我们这里不能使用强缓存。访问服务器(nginx、tomact)上的html文件时,可以将Cache-Control设置为no-cache。(这个需要配合服务器设置,前端无法处理)
