笔记--前端性能优化--存储篇

HTTP 缓存是我们日常开发中最为熟悉的一种缓存机制。它又分为强缓存和协商缓存。优先级较高 的是强缓存,在命中强缓存失败的情况下,才会走协商缓存。

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。 协商缓存:浏览器与服务器合作之下的缓存策略


②、MemoryCache

MemoryCache,是指存在内存中的缓存。从优先级上来说,它是浏览器最先尝试去命中的一种缓 存。从效率上来说,它是响应速度最快的一种缓存。

使用场景:Base64 格式的图片,几乎永远可以被塞进 memory cache,这可以视作浏览器为节省渲染开销 的“自保行为”;此外,体积不大的 JS、CSS 文件,也有较大地被写入内存的几率——相比之下,较 大的 JS、CSS 文件就没有这个待遇了,内存资源是有限的,它们往往被直接甩进磁盘。

③ 、Service Worker Cache

必须以 https 协议为前提

Service Worker 是一种独立于主线程之外的 Javascript 线程。它脱离于浏览器窗体,因此无法直接 访问 DOM。

使用:可以帮我们实现离线缓存、消息推送和网络代理等功能,详细使用见 掘金小册存储篇

④、Push Cache

Push Cache 是缓存的最后一道防线。浏览器只有在 Memory Cache、HTTP Cache 和 Service

Worker Cache 均未命中的情况下才会去询问 Push Cache。 Push Cache

是一种存在于会话阶段的缓存,当 session 终止时,缓存也随之释放。

不同的页面只要共享了同一个 HTTP2 连接,那么它们就可以共享同一个 Push Cache。

缓存部分的知识,具有“细碎、迭代快”的特点,我们应该尝试先划分出层次和重 点,归纳出完整的体系,然后针对每个知识点去各个击破。

2) Cookie

Cookie 的本职工作并非本地存储,而是“维持状态”。

HTTP 协议是一个无状态协议,服务器接收客户端的请求,返回一个响应,故事到此就结束了,服务器并没有记录下关于客 户端的任何信息。

它最大只能有 4KB 。

同一个域名下的所有请求,都会携带 Cookie。Cookie 虽然小,请求却可以有很多,随着请求的叠加,这 样的不必要的 Cookie 带来的开销将是无法想象的。

我目前是在职前端开发,如果你现在也想学习前端开发技术, 在入门学习前端的过程当中有遇见任何关于学习方法,学习路线,学习效率等方面的问题, 你都可以申请加入我的前端学习群:1017810018里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册,前端面试题, 前端开发工具,PDF文档书籍教程,需要的话都可以自行来获取下载。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容