前端缓存机制的总结-程序员宅基地

技术标签：计算机网络

在前端项目体验中最直观的就是网页的浏览速度，所以项目开发中在速度方面的优化最主要的就是缓存了，前端的缓存知识比较杂，我在学习中慢慢总结了这么多，今天来分享下。

什么是缓存？

缓存就相当于是对资源的一种副本实现，不管是在客户端还是在服务端存储着，用相同的URL进行请求，直接从副本中请求资源而不再访问源服务器。

为什么要使用缓存？

提高访问速度：缓存相对服务端离用户更近，所以在请求过程中从缓存中取内容比在源服务器上取的内容用的时间更少，加快了用户体验。
降低网络传输：副本被重复使用，大大降低了用户的带宽使用，其实也是一种变相的省钱（如果流量要付费的话），同时保证了带宽请求在一个低水平上，更容易维护了。

缓存的种类

缓存种类很多，像是浏览器缓存，cdn缓存等都是我们比较熟悉的，当然还有代理服务器缓存，网关缓存等，这里我主要介绍一下前两种。

浏览器缓存

一个页面的缓存状态可以通过这两种方法去设置，meta标签和http header。

meta标签常见以下几种用法

<meta http-equiv="pragma" content="no-cache">

pragma与no-cache用于定义页面缓存

<meta http-equiv="cache-control" content="no-cache">

常见的取值有private、no-cache、max-age、must-revalidate等，默认为private

<meta http-equiv="Expires" content="0">

指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问

一般是设置这几个header：

cache-control
expires
last-modified
etags

处理流程一般如下：
这里写图片描述

cache-control：

public：表明其他用户也可以利用缓存。
private：表明缓存服务器只对特定用户提供资源缓存的服务，对于其他的用户，缓存服务器不会做出响应。
no-cache：表明不缓存过期资源，其实是为了防止拿到过期的资源。
no-store：暗示请求或响应中包含机密信息，是真正的禁用缓存。
max-age：max-age = 秒，HTTP 1.1版本，资源在本地缓存多少秒。

expires：
Expires = 时间，HTTP 1.0 版本，缓存的载止时间，允许客户端在这个时间之前不去检查（发请求），Expires 的一个缺点就是，返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control: max-age=秒替代。

如果max-age和Expires同时存在，Cache-Control的max-age优先。

last-modified：
表明资源最后更新的时间，响应格式一般为：

last-modified:Mon, 21 Nov 2016 03:25:47 GMT

当第一次请求资源时，源服务器响应后返回last-modified值和响应内容，客户端会将响应内容和last-modified一起缓存在本地，第二次请求时会将请求体连同if-modified-since（等于last-modified的值）一起发送给服务端，服务端会根据if-modified-since判定资源是否改变，如果没有改变会响应304返回一个空的响应体，如果资源改变返回新的内容。

etags：
根据实体内容生成一段hash字符串，标识资源的状态，由服务端产生，资源改变这个值就会改变个人感觉类似于资源的一种抽象映射。请求过程类似于last-modified，不过它作为if-none-match（服务端响应的etags）发送给服务端判断这个值是否与服务端的etags一致看资源是否改变。

为什么有了last-modified还要有etags

某些服务器不能精确得到资源的最后修改时间，这样就无法通过最后修改时间判断资源是否更新
如果资源修改非常频繁，在秒以下的时间内进行修改，而Last-modified只能精确到秒
一些资源的最后修改时间改变了，但是内容没改变，使用ETag就认为资源还是没有修改的

last-modified和etags的处理流程如下：
这里写图片描述

如果if-modified-since和if-none-match同时存在，if-none-match优先。

cdn缓存

cdn（Content Delivery Network），即就是内容分发网络，就相当于是在客户端和服务端之间加一个cdn层，用户在浏览网站的时候，cdn会选择一个离用户最近的cdn边缘节点来响应用户的请求，这不但加快了用户体验速度也减轻了源服务器的负载。

工作原理：用户通过输入域名来访问页面，首先进行dns处理，dns解析服务器会将用户访问请求定位到离用户最近、负载最轻的cdn缓存服务器上，返回该cdn节点的ip地址，缓存服务器拿到数据后，一方面将数据返回浏览器，另一方面进行本地保存，之后再次访问，数据将从cdn缓存服务器中被返回。

h5中的离线存储

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

设置：

<html lang="en" manifest="demo.manifest">
...
</html>

demo.manifest是一个文件，后缀名为manifest，包含浏览器需要缓存的内容。manifest属性可以指定一个绝对URL或是一个相对路径，但是，一个绝对URL需要和web app是同源的。一个manifest文件可以是任何扩展文件类型，但必须有正确的mime-type，比如在Apache中添加

AddType text/cache-manifest .appcache

离线存储的原理就是请求的资源会像cookie一样被存储了下来，之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

本地存储

localstorage和sessionstorage，它们的作用及区别相信大家都很熟悉了，这里我再总结一下吧。
二者都是针对数据进行本地存储的，区别是：

localstorage是永久存储，而sessionstorage当窗口关闭的时候失效。
localstorage对于同源窗口来说是可以共享的，但是sessionstorage在不同的窗口不共享。

感觉常见的区别就这两个吧，它们的操作也很简单，web storage拥有像getItem，setItem，clear等方法，不像cookie存储还得自己去封装一个，比较方便。

本文链接：https://blog.csdn.net/shenmill/article/details/71080926

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

FTP命令字和返回码_ftp 登录返回230-程序员宅基地

文章浏览阅读3.5k次，点赞2次，收藏13次。为了从FTP服务器下载文件，需要要实现一个简单的FTP客户端。FTP（文件传输协议）是 TCP/IP 协议组中的应用层协议。FTP协议使用字符串格式命令字，每条命令都是一行字符串，以“\r\n”结尾。客户端发送格式是：命令+空格+参数+"\r\n"的格式服务器返回格式是以：状态码+空格+提示字符串+"\r\n"的格式，代码只要解析状态码就可以了。读写文件需要登陆服务器，特殊用..._ftp 登录返回230

centos7安装rabbitmq3.6.5_centos7 安装rabbitmq3.6.5-程序员宅基地

文章浏览阅读648次。前提：systemctl stop firewalld 关闭防火墙关闭selinux查看getenforce临时关闭setenforce 0永久关闭sed-i'/SELINUX/s/enforcing/disabled/'/etc/selinux/configselinux的三种模式enforcing：强制模式，SELinux 运作中，且已经正确的开始限制..._centos7 安装rabbitmq3.6.5

idea导入android工程,idea怎样导入Android studio 项目？-程序员宅基地

文章浏览阅读5.8k次。满意答案s55f2avsx2017.09.05采纳率：46%等级：12已帮助：5646人新版Android Studio/IntelliJ IDEA可以直接导入eclipse项目,不再推荐使用eclipse导出gradle的方式2启动Android Studio/IntelliJ IDEA，选择 import project3选择eclipse 项目4选择 create project f..._android studio 项目导入idea 看不懂安卓项目

浅谈AI大模型技术：概念、发展和应用_ai大模型应用开发-程序员宅基地

文章浏览阅读860次，点赞2次，收藏6次。AI大模型技术已经在自然语言处理、计算机视觉、多模态交互等领域取得了显著的进展和成果，同时也引发了一系列新的挑战和问题，如数据质量、计算效率、知识可解释性、安全可靠性等。城市运维涉及到多个方面，如交通管理、环境监测、公共安全、社会治理等，它们需要处理和分析大量的多模态数据，如图像、视频、语音、文本等，并根据不同的场景和需求，提供合适的决策和响应。知识搜索有多种形式，如语义搜索、对话搜索、图像搜索、视频搜索等，它们可以根据用户的输入和意图，从海量的数据源中检索出最相关的信息，并以友好的方式呈现给用户。_ai大模型应用开发

非常详细的阻抗测试基础知识_阻抗实部和虚部-程序员宅基地

文章浏览阅读8.2k次，点赞12次，收藏121次。为什么要测量阻抗呢？阻抗能代表什么？阻抗测量的注意事项... ...很多人可能会带着一系列的问题来阅读本文。不管是数字电路工程师还是射频工程师，都在关注各类器件的阻抗，本文非常值得一读。全文13000多字，认真读完大概需要2小时。一、阻抗测试基本概念阻抗定义：阻抗是元器件或电路对周期的交流信号的总的反作用。AC 交流测试信号 (幅度和频率)。包括实部和虚部。图1 阻抗的定义阻抗是评测电路、元件以及制作元件材料的重要参数。那么什么是阻抗呢？让我们先来看一下阻抗的定义。首先阻抗是一个矢量。通常，阻抗是_阻抗实部和虚部

小学生python游戏编程arcade----基本知识1_arcade语言 like-程序员宅基地

文章浏览阅读955次。前面章节分享试用了pyzero,pygame但随着想增加更丰富的游戏内容，好多还要进行自己编写类，从今天开始解绍一个新的python游戏库arcade模块。通过此次的《连连看》游戏实现，让我对swing的相关知识有了进一步的了解，对java这门语言也有了比以前更深刻的认识。java的一些基本语法，比如数据类型、运算符、程序流程控制和数组等，理解更加透彻。java最核心的核心就是面向对象思想，对于这一个概念，终于悟到了一些。_arcade语言 like

随便推点

【增强版短视频去水印源码】去水印微信小程序+去水印软件源码_去水印机要增强版-程序员宅基地

文章浏览阅读1.1k次。源码简介与安装说明：2021增强版短视频去水印源码去水印微信小程序源码网站去水印软件源码安装环境（需要材料）：备案域名–服务器安装宝塔-安装 Nginx 或者 Apachephp5.6 以上-安装 sg11 插件小程序已自带解析接口，支持全网主流短视频平台，搭建好了就能用注：接口是公益的，那么多人用解析慢是肯定的，前段和后端源码已经打包，上传服务器之后在配置文件修改数据库密码。然后输入自己的域名，进入后台，创建小程序，输入自己的小程序配置即可安装说明：上传源码，修改data/_去水印机要增强版