DNS预加载

• 如何少加载文件
  • 合理利用浏览器缓存（通过main.js 的加载来看待这个问题）
• 首次加载 http 请求，server 正常返回
  • 返回响应头加上强缓存的说明
  • expires: wed 11 Aug 2019 20:50:00 （过期时间）
  • cache-control: max-age = 3000000
  • 两个 header 都是后端告诉浏览器，这个文件多长时间内不过期（比如一小时）
  • 浏览器接受到上面两个 header 就会将文件保存起来
• 一个小时内再次请求这个文件
  • 浏览器识别到强缓存命中，请求不发出，直接用本地的缓存文件，状态码是 200 from cache
• 2 个小时后， 再次请求这个文件，强缓存失败，使用协商缓存
  • 浏览器不会直接发出请求，而是问一下后端，header 带上请求头
  • if-modified-since：日期 后端小老弟，这个文件，在这个日子之后，有没有修改过，后端告诉你，没改过，请用缓存 相应是 304 not modified，浏览器直接用缓存
  • 优先级更高的 是 etag 文件的指纹 内容不变 指纹不变
• 如果后端告诉你 改过了 只能重新加载了

文件缓存虽然 js 控制不到，浏览器控制的，但是我们可以通过工程化来更高效利用缓存

模板
静态资源(css，js，image，video， audio) 等

• 模板或者 html 不能有缓存（这个是入口文件，一旦新代码发布上线，就没法加载了）