Web前端中的静态资源缓存笔记

JowayYoung 发布于2019-08-22 14:57 / 1640人阅读

摘要：根据资源的分类的资源分类主要分为两大类主资源和派生资源。此时的数据时缓存到内存中的，当进程后，也就是浏览器关闭以后，数据将不存在。信息最大作用就是用于判断服务器上该的内容是否被修改。附上我的学习笔记。

根据webkit资源的分类

webkit的资源分类主要分为两大类：主资源和派生资源。

主资源：比如HTML页面，或者下载项，对应代码中的类是MainResourceLoader。

派生资源：比如HTML页面中内嵌的图片或者脚本链接，对应代码中的类是SubresourceLoader。

根据http状态码分类

200 (from memory cache)

200 (from disk cache)

304 (Not Modified)

200 (from memory cache)

不访问服务器，直接读缓存，从内存中读取缓存。此时的数据时缓存到内存中的，当kill进程后，也就是浏览器关闭以后，数据将不存在。

虽然Webkit支持memoryCache，但是也只是针对派生资源，它对应的类为CachedResource，用于保存原始数据（比如CSS，JS等），以及解码过的图片数据。

200 (from disk cache)

不访问服务器，直接从磁盘中读取缓存，当kill进程时，数据还是存在。

它的直接操作对象为CurlCacheManager。

这种方式也只能缓存派生资源。

它的存储形式为一个index.dat文件，记录存储数据的url，然后再分别存储该url的response信息和content内容。Response信息最大作用就是用于判断服务器上该url的content内容是否被修改。具体详见：
Last-Modified

304 (Not Modified)

访问服务器，发现数据没有

更新，服务器返回此状态码。然后从缓存中读取数据。

至于何时使用本地缓存，何时会访问服务器304，这就和服务器在请求返回中的Header字段有关了。附上我的HTTP学习笔记。

http header max-age

web中的文件被用户访问(请求)后的存活时间,是个相对的值,相对Request_time(请求时间)

Expires

Expires指定的时间根据服务器配置可能有两种：

文件最后访问时间

文件绝对修改时间

如果max-age和Expires同时存在，则被Cache-Control的max-age覆盖

Last-modified

WEB 服务器认为对象的最后修改时间，比如文件的最后修改时间，动态页面的最后产生时间

ETag

对象（比如URL）的标志值，就一个对象而言，文件被修改，Etag也会修改

Cache-Control

简单理解，强缓存

三级缓存原理

先去内存看，如果有，直接加载

如果内存没有，择取硬盘获取，如果有直接加载

如果硬盘也没有，那么就进行网络请求

加载到的资源缓存到硬盘和内存

结论

引用网上图片

GPU云服务器云服务器静态资源静态资源引用静态资源存储 cdn静态资源

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93033.html

前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0
开发富文本编辑器的一些经验教训

摘要：当然，这只是结合自己项目的工程结构和特点设置的一套使用方式，仅供参考开发富文本编辑器的教训由于项目的时间较紧张，我在页面上应用了框架的背景下，想当然的想要把也应用于富文本编辑器的开发，事实证明这是不太可行的。此文已由作者刘诗川授权网易云社区发布。欢迎访问网易云社区，了解更多网易技术产品运营经验。最近我们的产品有一个需求是要在PC端做一个面向用户的书评编辑器，让用户和编辑在蜗牛读书...

mtunique 2019-06-28 11:04 评论0 收藏0
慕课网js面试题学习笔记(ES6 标准) ——实时更新

摘要：而第一种方法只能判断引用类型，不能判断值类型，因为值类型没有对应的构造函数描述一个对象的过程生成一个新的空对象指向这个新对象执行构造函数中的代码，即对赋值将新对象的属性指向构造函数的属性返回，即得到新对象。最近在在看前端面试教程，这篇文章里大部分是看视频的过程中自己遇到的不清楚的知识点，内容很简单，只是起到一个梳理作用。有些地方也根据自己的理解在作者的基础上加了点东西，如有错误，欢迎...

netmou 2019-08-20 18:10 评论0 收藏0
漫谈Web缓存

摘要：了解前端缓存是打造高性能网站的必要知识。这个表示，你的请求发送到后端，后端判断并认为资源可以继续使用，直接使用本地缓存。尽可能的设置久缓存时间，通过码来管理版本。参考链接浅谈缓存权威指南上配置缓存首发地址背景说明缓存一直是前端性能优化中，浓墨重彩的一笔。了解前端缓存是打造高性能网站的必要知识。之前，对于缓存的认知一直停留在看《HTTP权威指南》和一些相关帖子的深度，过了一段时...

davidac 2019-08-06 13:16 评论0 收藏0