前端性能优化（1）— http cache

KernelGithub
VIP.4 融会贯通
317 阅读5分钟

[TOC]

前言：技术这个东西，迭代速度可能超过你的使用速度。没有所谓的放之四海皆准，懂得原理，知道什么场景下做什么事儿。那时的项目去找到那时的最合适的可行方案。开发就是要做一个“有趣”的人，不是被人觉得有趣，而是对技术“有趣”

必需意识到 前端性能优化是非常重要的。

1. 优化的方向

围绕：重输入URL到页面加载完成，发生了什么？这里面的过程 去优化。

这个过程分下面几部分：

  1. DNS（域名解析）将url =》对应ip地址。
  2. 根据IP地址与服务器建立TCP连接（三次握手）。
  3. http请求，服务端处理，http响应返回。
  4. 浏览器拿到结果，解析，展示给用户。

所有性能优化，就往上面几个部分，一个一个怼。。。。

2. 怎么优化

了解了过程，优化就可以分两个方面：

  • 网络层：dns解析【慢？那就：浏览器dns缓存、DNS prefetch】; http握手只能慢的干着急【不急：长连接、预连接、减少请求数量和请求体积、cdn部署静态资源、http2.0】
  • 浏览器端：资源加载优化，服务端渲染，浏览器缓存，【dom树构建、网页排版 | 渲染、重排 | 重绘，dom操作】的考量。

当然还有一个重点：代码本身层面的优化的，这个就自行揣摩吧。

除了dns、http请求连接、cdn前端参与较少，其他的点，至少对于当下来说前端一展拳脚的点我们一个一个来说。今天先说浏览器缓存吧，这个是面试的“问点”，快圈起来。

3. 浏览器缓存：使用简单，但效果显著

重复利用之前的资源的能力。减少网络IO消耗

1. 几个关键字，如果都清楚了，那就跳过这篇吧（手动ヾ(￣▽￣)Bye~Bye~）

on-store on-cache

强缓存 expires Cache-Control

协商缓存 Last-Modified Etag

Memory Cache Service Worker Cache Http Cache Push Cache【F12 network面板里，size列：会发现就包含这几种类型的某个。】

4. http缓存

强缓存 和 协商缓存

  • 强缓存： 根据http头部中的 expires 和 cache-control,判断是否命中，若命中就直接到缓存里获取，不走服务器通信请求。命中强缓存，返回状态码为 200，现在就在Chrome F12，刷新页面，看下请求，会看到部分JS就命中了强缓存 Status Code: 200 (from disk cache)

    • expires ： expires是时间戳，依赖本地时间，就是因为依赖了本地时间，就会出现expires可能无法达到预期（比如：服务端客户端时间不一致，或者客户端本人为改了时间）；=》所以 http1.1新增了 cache-contro
    • cache-control：expires能的它能，expires不能的它也能。完全替代expires。（为了向下兼容，仍会继续使用expires）；它是一个时间长度，完美避免了时间戳的问题。优先级高于expires
      • max-age & s-maxage: 客户端只考虑 max-age ，代理服务器才考虑s-maxage（至于代理服务器缓存里面的public(代理和浏览器都能缓存)和private(只能浏览器缓存)，自己去深入吧。）；s-maxage的优先级高于max-age
    • no-store 和 no-cache: no-cache，绕开浏览器，直接跟服务器确认（协商缓存）。no-store: 缓存是不可能的，每次我都要直接向服务请求，下载完整响应。

  • 协商缓存：浏览器和服务器合作下的缓存策略。浏览器向服务器询问缓存信息：然后在判断是重发请求，还是直接拿缓存。如果名中协商缓存，状态码为 304

    • last-modified: 表示最后修改时间，也是时间戳，在首次请求的时候跟随Response Headers返回。也因为是时间戳，某些情况下也会无法达到预期，典型的就是，我编辑了，但内容没有变。这时候也会当做新资源去重新请求。
    • Etag：补充Last-modified,然服务器正确感知文件是否变化。Etag是服务器根据每个资源的内容编码生成的唯一标识符字符串，只要文件内容变，它就变。当然弊端也是显然的：生产过程肯定是有开销的，所有它是补充Last-modified。同时出现时优先级高于last-modified;

    扣个官方图理解下：见顶部的图

5. 剩余缓存类型

1. MemoryCache

内存中的缓存，提到内存，我觉得首先想到的两个字： 小 快。优先级最高，但与渲染进程绑定，tab关闭，它也不复存在。内存是小的，至于哪些资源会放在里面没有去研究，但原则肯定是：节省渲染开销

2. service worker cache

【必须基于Https协议为前提 】独立与主线程不会被阻塞、依赖编码、脱离浏览器，不能直接访问dom、完全异步，但无法使用XHR和localStorage、响应推送

service worker是由时间驱动的，具有生命周期【install、active 、working】，但与页面无关，可以拦截处理页面的所有网络请求（fetch），可以访问cache和indexDB（后续提到）

service worker还是很强的，提到这个，有不得不提起PWA了，试想一下：把你应用里所有静态动态资源根据不同的策略缓存起来，下次打开的时候不去请求服务器，让web应用直接秒开呀。这用户体验perfect~ （这里就不深入了哈）。

3. Push Cache

HTTP2里面的，没得研究（囧脸），有兴趣可参考：HTTP/2 push is tougher than I thought

等我研究了再来分享吧，毕竟http2是趋势。

好，下一篇在聊聊 浏览器本地缓存，有问题欢迎评论

avatar
文章
阅读
粉丝