测试驿栈-由浅入深学性能 前端性能优化之缓存 (cache-control)

飞天小子的性能课堂 · 2020年05月25日 · 最后由 ola嘿嘿 回复于 2020年05月26日 · 2633 次阅读

http 协议的缓存机制

缓存一直以来都是用来提高性能的一项必不可少的技术 , 利用它可以很好的提高 web 的性能。 缓存可以很有效地降低网络延迟,也可以减少大量请求对于服务器的压力。在整个浏览器渲染过程中,缓存是极其重要的一个环节。如下图

如图所示,如果没有缓存机制的话,http 请求每次都会先走 dns 解析,然后建立 tcp 连接,等待响应,最终加载数据。
而有了缓存机制之后,浏览器会直接从本地缓存里面读取需要的数据,极大地减少服务器压力,降低网络延时。

强缓存

强缓存是采用响应头中的 Cache-Control 字段进行控制。Cache-Control 是 HTTP 1.1 时出现的缓存控制字段。Cache-Control:max-age 定义了一个最大时间,就是从第一次生成文档到缓存不再生效的最大生存日期。客户端会通过对比本地时间和服务器生存时间来检测缓存是否可用。如果缓存没有超出它的生存时间内,客户端就会直接采用本地的缓存。如果生存日期已经失效,这个缓存也就宣告失效。

强缓存的威力

jmeter 提供了一个强缓存元件HTTP Cache Manager,我们通过这个元件来体会一下缓存带来的时间差异

浏览器加载静态资源
首先我们发送请求的时候,先把静态资源都捕捉一下,模拟浏览器行为


无缓存下的大量请求
设置 100 线程,没有缓存机制下持续发送请求,持续 30s


可以在聚合报告里面观察到,没有缓存的情况下,100 用户发起请求,90% 的响应时间都在 10s 以内

有缓存机制

加入 HTTP Cache Manager 元件,它会把每个线程缓存的资源保存在本地,后续直接从本地读取资源
设置 100 线程,有缓存机制下持续发送请求,持续 30s

此时我们可以明显的感受到差异,90% 的响应时间被控制在了 1s 以内!!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 1 条回复 时间 点赞

高产啊

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册