浏览器缓存是如何提升网站访问速度的

news2024/9/24 10:23:58

提升速度，降低负载

浏览器访问一个页面时，会请求加载HTML、CSS和JS等静态资源，并把这些内容渲染到屏幕上。

对浏览器来说，如果页面没有更新，每次都去请求服务器是没有必要的。所以，把下载的资源缓存起来，下次访问时直接读取本地数据，可以大大提高页面访问速度。

对于服务器来说，每个请求到达之后都会进行url解析，读取文件和返回数据等一系列操作，这都会有CPU和内存开销。因此，通过缓存减少不必要的请求，可以降低服务器的负载。

综上所述，为了提高网站的访问速度，降低服务器的负载，就有了浏览器缓存。

那么，浏览器缓存是怎么实现的呢？

过期时间

服务器在返回资源时指定过期时间，浏览器收到响应后把数据存起来。下一次请求时如果资源未过期，则返回本地缓存数据。

这是HTTP1.0的缓存方案，即通过Expires头字段指定过期时间。

Expires: Thu, 05 May 2022 08:13:07 GMT

由于Expires是一个绝对时间，所以要求浏览器和服务器的系统时间必需保持同步。否则，将会导致浏览器无法准确地判断过期时间。

为了解决这个问题，HTTP1.1使用的是相对时间，即max-age头字段。

cache-control: max-age=60

max-age=60表示资源有效时间为60s，由浏览器自己计算过期时间，自然也就不存在系统时间同步问题了。

当expires和max-age同时存在时，max-age优先级更高。

协商缓存

当缓存数据过期了，服务器资源未更新时，浏览器是没有必要请求新资源的。所以，为了进一步提升缓存效果，HTTP1.1设计了协商缓存：当缓存数据过期了，浏览器要跟服务器验证资源是否已更新，如果资源更新了再去请求新的数据。

那么，服务器如何验证资源是否已更新呢？

HTTP1.1提供了两种方案：

  • 文件内容的hash值：对应头字段etag/ If-None-Match。
  • 文件最后更新时间：对应头字段last-modified/ If-Modified-Since。

服务器返回资源时带上etag或last-modified。当浏览器缓存过期了，带上If-None-Match或If-Modified-Since请求服务器验证资源是否更新。服务器判断资源有更新，就返回200和新资源；否则返回304。

当etag和last-modified同时存在时，etag优先级更高。相对而言，etag精度更高：etag只在文件内容变化时更新，而last-modified更新时不一定代表文件内容有更新。

过期时间和协商缓存是浏览器缓存的核心功能。除此之外，cache-control还提供了其它指令，可以满足多种应用场景。

静态资源缓存优化

Cache-Control:max-age=31536000

对js/css/img等更新频率低的资源，可以设置一个过期时间（通常为一年）。 如果资源需要紧急更新，只需要更新html中引用的文件名。(所以html一般需要保持较高的新鲜度)

示例：

第一次请求：返回200，max-age=31536000 。

# request
GET /script.js HTTP/1.1

# response
HTTP/1.1 200 OK
Content-Type: application/javascript
Cache-Control: max-age=31536000

第二次请求：返回200，显示数据来自本地缓存。

image.png

PS：当我们刷新页面或第二次在地址栏按回车键，都会直接请求服务器。为了验证本地缓存未过期的情况，需要打开新的tab访问页面。

HTML协商缓存优化

# 方法一
Cache-Control: no-cache
# 方法二
Cache-Control: max-age=0, must-revalidate

承接上文，HTML作为Web应用的主要载体，要求实时更新。

如果html没有及时更新，将会导致页面引用的js/css等无法更新。另外，如果涉及接口变更，前后端必须同步更新的情况，访问旧的html将会导致接口报错。

示例：

第一次请求：返回200，no-cache和Last-Modified/ETag。

# request
GET /index.html HTTP/1.1

# response
HTTP/1.1 200 OK
Content-Type: text/html
Last-Modified: Fri, 03 Jun 2022 07:32:28 GMT
ETag: "6299b90c-14f"
Cache-Control: no-cache

第二次请求：请求带上If-None-Match/If-Modified-Since，服务器验证资源未更新，返回304。

# request
GET /index.html HTTP/1.1
If-None-Match: "6299b90c-14f"
If-Modified-Since: Fri, 03 Jun 2022 07:32:28 GMT

# response
HTTP/1.1 304 Not Modified
Last-Modified: Fri, 03 Jun 2022 07:32:28 GMT
ETag: "6299b90c-14f"
Cache-Control: no-cache

敏感数据禁止缓存

Cache-Control: no-store

禁止浏览器缓存资源(响应)和不使用缓存(请求)。适用于包含敏感信息等不希望缓存的场景。

示例：

第一次请求：返回200和no-store。

# request
GET /index.html HTTP/1.1

# response
HTTP/1.1 200 OK
Content-Type: text/html
Cache-Control: no-store

第二次请求：请求服务器，返回200和新资源。

代理服务器缓存控制

Cache-Control:public,max-age=600,s-maxage=60

http缓存除了存在浏览器（private），还可以存在代理服务器（public）。例如常见的CDN，即降低了网络延迟，还能降低服务器的负载。

对于安全性要求高的资源，建议禁用公共缓存。因为数据一旦被代理服务器缓存下来，就多了一份被攻击的风险。

各大网站缓存方案

B站

  • html：no-cache
  • JS文件：max-age=31536000(1年)，文件命名带版本号或指纹信息，方便及时更新。
  • CSS文件：max-age=31536000，文件命名带版本号或指纹信息，方便及时更新。
  • 图片：max-age=31536000，文件命名带版本号或指纹信息，方便及时更新。
  • XHR请求： no-cache

微信

  • html：public, max-age=500
  • JS文件：max-age=31536000(1年)，文件命名带版本号或指纹信息，方便及时更新。
  • CSS文件：max-age=31536000，文件命名带版本号或指纹信息，方便及时更新。
  • 图片：max-age=31536000，文件命名带版本号或指纹信息，方便及时更新。
  • XHR请求：no-cache,must-revalidate

淘宝

  • html：默认
  • js文件：max-age=2592000(一个月),s-maxage=86400；文件命名带版本号或指纹信息，方便及时更新。
  • CSS文件：max-age=2592000,s-maxage=3600；文件命名带版本号或指纹信息，方便及时更新。
  • 图片：max-age=15552000；文件命名带版本号或指纹信息，方便及时更新。

新浪

  • html： max-age=60
  • js文件：max-age=31536000；max-age=14400；max-age=3600
  • CSS文件：public, max-age=14400
  • 图片：max-age=31536000(一年)

常见配置方案

  • HTML缓存

通过 meta标签 的http-equiv和content来设置报文头：Cache-Control和Expires。

<meta http-equiv="Expires" content="Mon, 20 Jul 2013 23:00:00 GMT" />
<meta http-equiv="Cache-Control" content="max-age=7200" />

用meta标签的http-equiv属性来设置强缓存。用法简单，不需要服务器支持。适合更新频率低的页面。

  • nginx缓存

当nginx作为静态资源服务器时，通过配置http头保证浏览器缓存行为一致。

# html使用协商缓存
location ~.*.html$
{
    add_header Cache-Control no-cache;
    # 作用跟Cache-Control no-cache一致；兼容HTTP/1.0
    add_header Pragma no-cache;
}

# 对于更新频率低的，缓存有效时间可设置长一点。
location ~.*.(js|css|png|jpg)$
{
    expires  365d;
}
  • webpack文件名hash
entry:{
    main: path.join(__dirname,'./main.js'),
    vendor: ['react', 'antd']
},
output:{
    path:path.join(__dirname,'./dist'),
    publicPath: '/dist/',
    filname: 'bundle.[contenthash].js'
}

通过webpack打包，自动给文件名加上hash值。其中，contenthash表示hash值由文件内容计算得到，内容不同产生的contenthash值也不一样。

总结

为了提高网站的访问速度，降低服务器的负载，就有了浏览器缓存。

浏览器缓存的核心是过期时间和协商缓存：服务器在返回资源时指定过期时间，浏览器收到响应后把数据存起来。下一次请求时如果资源未过期，则返回本地缓存数据；当缓存数据过期了，浏览器要跟服务器验证资源是否已更新，如果资源更新了再去请求新的数据，否则返回304。

浏览器缓存有很多的实际应用场景，例如：静态资源缓存优化、HTML协商缓存优化、敏感数据禁止缓存、代理服务器缓存控制。最后介绍了常见的配置方案，包括HTML、nginx和webpack等。

参考资料

MDN

HTTP 的缓存为什么这么设计？

HTTP缓存协议实战

前端缓存最佳实践

HTTP 缓存别再乱用了！推荐一个缓存设置的最佳姿势！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/340805.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

快速傅里叶算法（FFT）快在哪里？

快速傅里叶算法（FFT）快在哪里？

目录 前言 1、DFT算法 2、FFT算法 2.1 分类 2.2 以基2 DIT&#xff08;时间抽取&#xff09; FFT 算法为例 2.2.1 一次分解 2.2.2 多次分解 参考 前言 对信号分析的过程中&#xff0c;为了能换一个角度观察问题&#xff0c;很多时候需要把时域信号波形变换到频域进行分…
阅读更多...
有什么免费好用的全球天气api?

有什么免费好用的全球天气api?

简单介绍几个&#xff0c;选你觉得合适的就行。&#xff08;下面推荐的国内外的都有&#xff0c;访问速度会有些差别&#xff09; 高德天气 API -天气查询-API文档-开发指南-Web服务 API | 高德地图API知心天气 API -HyperData 数据产品简介 心知天气和风天气 API -和风天气开…
阅读更多...
AI_News周刊：第一期

AI_News周刊：第一期

2023.02.06—2023.02.12 关于ChatGPT的前言&#xff1a; 在去年年末&#xff0c;OpenAI的ChatGPT在技术圈已经火了一次&#xff0c;随着上周它的二次出圈&#xff0c;ChatGPT算得上是人工智能领域的一颗明星&#xff0c;它在聊天机器人领域有着不可忽视的影响力。其准确、快速…
阅读更多...
webpack.config.js哪里找？react项目关闭eslint监测

webpack.config.js哪里找？react项目关闭eslint监测

目录 webpack.config.js哪里找&#xff1f; react项目关闭eslint监测 webpack.config.js哪里找&#xff1f; 在React项目中&#xff0c;当我们需要修改一些配置时&#xff0c;发现找不到webpack.config.js&#xff0c;是我们创建的项目有问题吗&#xff0c;还需新创建项目的项…
阅读更多...
【html】模仿C站动态发红包界面，css+div+js实现布局和交互（适合入门）

【html】模仿C站动态发红包界面，css+div+js实现布局和交互（适合入门）

最近有些小伙伴咨询博主说前端布局好难&#xff0c;其实都是熟能生巧&#xff01; 模仿C站动态发红包界面&#xff0c;cssdiv实现布局&#xff0c;纯javascript实现交互效果 目录 1、界面效果 2、界面分析 2.1、整体结构 2.2、标题 2.3、表单 2.4、按钮 3、代码实现 3.…
阅读更多...
【Kafka】【七】主题和分区的概念

【Kafka】【七】主题和分区的概念

主题和分区的概念 主题Topic 主题-topic在kafka中是⼀个逻辑的概念&#xff0c;kafka通过topic将消息进⾏分类。不同的topic会被订阅该topic的消费者消费。 但是有⼀个问题&#xff0c;如果说这个topic中的消息⾮常⾮常多&#xff0c;多到需要⼏T来存&#xff0c;因为消息是…
阅读更多...
Spring Security in Action 第十二章 OAuth 2是如何工作的？

Spring Security in Action 第十二章 OAuth 2是如何工作的？

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;以实战为线索&#xff0c;逐步深入SpringSecurity相关知识相关知识&#xff0c;打造完整的SpringSecurity学习步骤&#xff0c;提升工程化编码能力和思维能力&#xff0c;写出高质量代码。希望大家都能够从中有所收获&#…
阅读更多...
实战打靶集锦-005-HL

实战打靶集锦-005-HL

**写在前面&#xff1a;**记录一次曲折的打靶经历。 目录1. 主机发现2. 端口扫描3. 服务枚举4. 服务探查4.1 浏览器访问4.2 目录枚举4.3 探查admin4.4 探查index4.5 探查login5 公共EXP搜索6. 再次目录枚举6.1 探查superadmin.php6.2 查看页面源代码6.3 base64绕过6.4 构建反弹…
阅读更多...
JointBERT代码复现详解【下】

JointBERT代码复现详解【下】

BERT for Joint Intent Classification and Slot Filling代码复现【下】 链接直达&#xff1a;JointBERT代码复现详解【上】 四、模型训练与评估 Trainer training&#xff1a;梯度更新evaluate&#xff1a;评估序列标注任务如何得到预测结果、评估函数 1.初始化准备 def …
阅读更多...
【Unity3D】Shader常量、变量、结构体、函数

【Unity3D】Shader常量、变量、结构体、函数

1 源码路径 Unity Shader 常量、变量、结构体、函数一般可以在 Unity Editor 安装目录下面的【Editor\Data\CGIncludes\UnityShader】目录下查看源码&#xff0c;主要源码文件如下&#xff1a; UnityCG.cgincUnityShaderUtilities.cgincUnityShaderVariables.cginc 2 Shader 常…
阅读更多...
大数据技术架构(组件)33——Spark：Spark SQL--Join Type

大数据技术架构(组件)33——Spark：Spark SQL--Join Type

2.2.2、Join Type2.2.2.1、Broadcast Hash Join (Not Shuffled)就是常说的MapJoin,join操作在map端进行的。场景&#xff1a;join的其中一张表要很小&#xff0c;可以放到Driver或者Executor端的内存中。原理:1、将小表的数据广播到所有的Executor端&#xff0c;利用collect算子…
阅读更多...
微信小程序 数据绑定 Mustache语法怎么使用？

微信小程序 数据绑定 Mustache语法怎么使用？

1.数据绑定的基本原则 ①在data中定义数据 ②在WXML中使用数据、 在页面对应的 .js 文件中。把数据定义到data对象中即可 在WXML文件中使用{{}}两个花括号加变量名称进行调用 以上使用方法&#xff0c;下面我么来实操 Mustache语法主要使用场景如下: 文本内容绑定 组件属性绑定…
阅读更多...
Service

Service

目录 文章目录目录本节实战1、Service1.Service概念2.Service存在的意义3.Pod与Service的关系2、三种IP3、定义 Service4、kube-proxy1.iptables2.ipvsiptables vs ipvs5、Service常见类型1.ClusterIP2.NodePort3.LoadBalancer4.ExternalName5.externalIPs6、Endpoints 与 Endp…
阅读更多...
Java基础常见面试题（三）

Java基础常见面试题（三）

String 字符型常量和字符串常量的区别&#xff1f; 形式上: 字符常量是单引号引起的一个字符&#xff0c;字符串常量是双引号引起的若干个字符&#xff1b; 含义上: 字符常量相当于一个整型值( ASCII 值)&#xff0c;可以参加表达式运算&#xff1b;字符串常量代表一个地址值…
阅读更多...
STC15读取内部ID示例程序

STC15读取内部ID示例程序

STC15读取内部ID示例程序&#x1f389;本案例基于STC15F2K60S2为验证对象。 &#x1f4d1;STC15 ID序列介绍 STC15系列STC最新一代STC15系列单片机出厂时都具有全球唯一身份证号码(ID号)。最新STC15系列单片机的程序存储器的最后7个字节单元的值是全球唯一ID号&#xff0c;用…
阅读更多...
使用阿里云IoT Studio建立物模型可视化界面

使用阿里云IoT Studio建立物模型可视化界面

使用阿里云IoT Studio建立物模型可视化界面 上一篇文章介绍了如何使用ESP-01S上报数据到物模型&#xff1a;https://blog.csdn.net/weixin_46251230/article/details/128996719 这次使用阿里云IoT Studio建立物模型的Web页面 阿里云IoT Studio&#xff1a; https://studio.i…
阅读更多...
02 图像通道处理

02 图像通道处理

1 通道提取与合并 在数字图像处理中&#xff0c;图像通道是指一个图像中的颜色信息被分离为不同的颜色分量。常见的图像通道包括RGB通道、灰度通道、HSV通道等。 RGB通道是指将图像分离为红色、绿色和蓝色三个颜色通道&#xff0c;每个通道表示相应颜色的亮度。这种方式是最常…
阅读更多...
RuntimeError: CUDA out of memory

RuntimeError: CUDA out of memory

今天在训练模型的时候突然报了显存不够的问题&#xff0c;然后分析了一下&#xff0c;找到了解决的办法&#xff0c;这里记录一下&#xff0c;方便以后查阅。 注&#xff1a;以下的解决方案是在模型测试而不是模型训练时出现这个报错的&#xff01; RuntimeError: CUDA out of…
阅读更多...
基于JavaEE的智能化跨境电子商务平台的设计

基于JavaEE的智能化跨境电子商务平台的设计

技术&#xff1a;Java、JSP、框架等摘要&#xff1a;伴随着近年来互联网的迅猛发展&#xff0c;网上零售逐渐成为了一种影响广泛、方便快捷的购物渠道。我国网上零售业发展的步伐很快。在如今经济全球化的影响下&#xff0c;消费者的网购行为趋于开放化、多元化&#xff0c;对于…
阅读更多...
设计模式-中介者模式详解

设计模式-中介者模式详解

定义 中介模式的英文翻译是 Mediator Design Pattern。在 GoF 中的《设计模式》一书中&#xff0c;它是这样定义的&#xff1a; Mediator pattern defines a separate (mediator) object that encapsulates the interaction between a set of objects and the objects delega…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023