一次js请求一般情况下有哪些地方会有缓存处理

本文涉及的产品
云原生内存数据库 Tair,内存型 2GB
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
云解析DNS,个人版 1个月
简介: 一次js请求一般情况下有哪些地方会有缓存处理

前言

在现代的Web开发中,性能优化一直是一个重要的话题。缓存作为性能优化的重要手段之一,其作用不可小觑。它能够减少网络传输的数据量,降低服务器的负载,提高页面加载的速度,从而提升用户体验。在一次JavaScript请求的过程中,缓存可能发生在多个地方,包括浏览器缓存、CDN缓存、服务器缓存等。本文将深入探讨这些缓存机制的工作原理、使用方法和相关的代码实现,帮助开发者更好地理解和利用缓存来优化网站性能。

1. 浏览器缓存

1.1 强缓存

用法

强缓存是通过HTTP响应头中的Cache-ControlExpires字段来控制的。Cache-Control可以设置资源的最大生存时间(max-age),而Expires则是一个绝对时间,表示资源的过期时间。

代码

// 设置Cache-Control,资源将被缓存10秒
res.setHeader('Cache-Control', 'max-age=10');

理解

强缓存的优点是能够直接从浏览器缓存中加载资源,不需要发送任何请求到服务器,从而极大地提高了加载速度。但是,一旦资源被缓存,就无法实时更新,直到缓存过期。

1.2 协商缓存

用法

当强缓存失效后,浏览器会发送一个HTTP请求到服务器,带有If-Modified-SinceIf-None-Match字段,服务器根据这些字段来决定是否返回304状态码,告诉浏览器可以使用本地缓存。

代码

// 设置Last-Modified,表示资源的最后修改时间
res.setHeader('Last-Modified', 'Tue, 15 Jun 2021 12:45:26 GMT');
// 设置ETag,表示资源的唯一标识
res.setHeader('ETag', '"abc123"');

理解

协商缓存虽然需要发送请求到服务器,但是当资源未修改时,只需要传输HTTP头部,不需要传输资源内容,仍然能够节省大量的带宽和提高加载速度。

2. 服务端缓存

2.1 反向代理缓存

用法

在Nginx等反向代理服务器中配置缓存规则,根据文件类型、URL等条件来决定哪些资源需要被缓存。

代码

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public, no-transform";
}

理解

反向代理缓存能够减轻后端服务器的压力,提高资源加载的速度。但是需要合理配置缓存规则,避免缓存过时的资源。

2.2 应用层缓存

用法

使用Memcached或Redis等缓存数据库来存储经常访问的数据。

代码

const redis = require('redis');
const client = redis.createClient();
// 设置缓存
client.set('key', 'value', 'EX', 10); // 缓存10秒
// 获取缓存
client.get('key', function(err, reply) {
    console.log(reply); // 输出:value
});

理解

应用层缓存能够减少数据库查询的次数,提高数据访问的速度。但是需要合理设计缓存策略,避免缓存过多无用的数据。

3. CDN缓存

3.1 用法

将静态资源部署到CDN上,CDN节点会根据配置的规则对资源进行缓存。

3.2 理解

CDN缓存能够将资源缓存到离用户更近的地方,减少资源加载的延迟,提高加载速度。但是需要合理选择CDN服务商,配置合适的缓存规则。

4. DNS缓存

4.1 用法

DNS解析的结果会被浏览器、操作系统等缓存一段时间。

4.2 理解

DNS缓存能够减少DNS解析的次数,提高域名解析的速度。但是当DNS记录更新时,可能会因为缓存导致解析结果不准确。

5. AJAX请求缓存

5.1 用法

在发送AJAX请求时,可以通过设置cache选项来控制是否允许浏览器缓存结果。

5.2 代码

$.ajax({
    url: 'example.json',
    cache: false, // 禁用缓存
    success: function(data) {
        console.log(data);
    }
});

5.3 理解

AJAX请求缓存能够减少相同请求的次数,提高数据加载的速度。但是需要根据实际情况来决定是否启用缓存。

总结

缓存是一种重要的性能优化手段,但是需要根据实际情况合理配置和使用。通过理解不同类型的缓存机制,开发者可以更好地利用缓存来提高网站性能,提升用户体验。

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
17天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
|
14天前
|
JSON JavaScript 前端开发
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
若依修改,若依如何发送get和post请求,发送数据请求的写法,若依请求的API在src的api文件下,建立请求的第一步,在API中新建一个文件,第二步新建JavaScript文件
|
4天前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
11天前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
|
14天前
|
JavaScript API
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
|
14天前
|
NoSQL 前端开发 测试技术
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
若依修改,若依如何发送请求---王清江07,axios的请求在request.js文件中,若依发送GET请求,必须用param
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
前后端数据交互,request.js文件添加拦截器的写法,数据请求失败后的固定写法
|
24天前
|
存储 缓存 NoSQL
redis缓存优化
采用获取一次缓存,如果为空的情况,获取分布式锁,让一个线程去重建缓存,另外的线程未获取到锁的情况,休眠短时间,然后再自旋获取缓存。
25 0
|
3天前
|
canal 缓存 NoSQL
Redis常见面试题(一):Redis使用场景,缓存、分布式锁;缓存穿透、缓存击穿、缓存雪崩;双写一致,Canal,Redis持久化,数据过期策略,数据淘汰策略
Redis使用场景,缓存、分布式锁;缓存穿透、缓存击穿、缓存雪崩;先删除缓存还是先修改数据库,双写一致,Canal,Redis持久化,数据过期策略,数据淘汰策略
Redis常见面试题(一):Redis使用场景,缓存、分布式锁;缓存穿透、缓存击穿、缓存雪崩;双写一致,Canal,Redis持久化,数据过期策略,数据淘汰策略
|
12天前
|
缓存 NoSQL Redis
使用Redis实现缓存穿透的解决方案
使用Redis实现缓存穿透的解决方案