js前端面试常见浏览器缓存强缓存及协商缓存实例


Posted in Javascript onJune 21, 2022

前言

最近在背面试题时,时常会看见浏览器缓存,虽然没有用过但是从它的描写中大致是知道它的作用和重要性。但是还是没有代码实操过,也是一知半解的,这口气咽不下啊,开始找资料,但是大部分都是理论半行代码没有,终于东拼西凑顿悟了。开始搭环境,干活。

浏览器缓存

浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行存储,当访问者再次访问同一页面时,浏览器就可以直接从本地磁盘加载文档。 浏览器缓存主要分为强缓存(也称本地缓存)和协商缓存(也称弱缓存)。

强缓存

当请求资源的时,如果是之前请求过的并使用强缓存,那么在过期时间内将不会发送本次请求向服务器获取资源,而是直接从浏览器缓存中获取(不管资源是否改动)。过期了将重新从服务器获取,并再次强缓存。

协商缓存

当请求资源时,如果是之前请求过的并使用协商缓存,还是发送请求到服务器,服务器通过逻辑判断确认资源没有修改返回304状态码,那么本次的资源则是从缓存中获取;如果经过判断确认资源被修改过,则重新发送资源到客户端,并且客户端更新缓存。

判断资源是否修改有两种标准,一种是判断最后修改时间是否变了(确实是修改了,但资源的内容可以没有变),另一种是判断资源的内容是否修改

使用缓存有下面的优点:

  • 减少冗余的数据传输
  • 减少服务器负担
  • 加快客户端加载网页的速度

搭建环境

  • 创建文件夹app,并在下创建app.js 和 fs/a.txt(里面随便写东西)

js前端面试常见浏览器缓存强缓存及协商缓存实例

我们使用node+koa2来搭建我们需要的环境,安装koa、安装路由

npm install koa --save
npm install koa-router --save

app.js

var Koa = require('koa');
var app = new Koa();
var Router = require('koa-router')();
const fs = require('fs')
Router.get("/", async (ctx) => {
    ctx.body = "ok"
})
app
    .use(Router.routes())   	//启动路由
    .use(Router.allowedMethods());
app.listen(3000);

启动服务器,网页输入网址127.0.0.1:3000,环境搭建成功

js前端面试常见浏览器缓存强缓存及协商缓存实例

强缓存

强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,Expires是http1.0的规范,Cache-Control是在http1.1中出现的,我们这里使用Cache-Control示范。

Cache-Control有一些常设置的值

  • private:仅浏览器可以缓存(默认值);
  • public:浏览器和代理服务器都可以缓存;
  • max-age=xxx:过期时间单位秒;
  • no-cache:不进行强缓存;
  • no-store:不强缓存,也不协商缓存)

将上面 / 路由的代码改为

Router.get('/', async (ctx) => {
    const getResource = () => {
        return new Promise((res) => {
            fs.readFile("./fs/a.txt", (err, data) => {
                if (err) {
                    return;
                }
                res(data)
            })
        })
    }
    ctx.set('Cache-Control', 'max-age=10')  //设置强缓存,过期时间为10秒
    ctx.body = await getResource(); 
})

将测试搭建环境页面关闭,重新打开网页访问127.0.0.1:3000

前端页面响应头多了Cache-Control这个字段,且10s内都走本地缓存,不会去请求服务端

js前端面试常见浏览器缓存强缓存及协商缓存实例

在过期时间内再次请求资源,就可以看到这次请求并没有经过服务器

js前端面试常见浏览器缓存强缓存及协商缓存实例

协商缓存

主要涉及到两组header字段:Etag和If-None-Match、Last-Modified和if-modified-since。

Etag和If-None-Match

Etag/If-None-Match返回的是一个校验码。ETag可以保证每一个资源是唯一的,资源变化都会导致ETag变化。服务器根据浏览器上送的If-None-Match值来判断是否命中缓存。 当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化。

Last-Modify和if-modified-since

浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-Modify,Last-Modify是一个时间标识该资源的最后修改时间,例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

当浏览器再次请求该资源时,request的请求头中会包含 if-modified-since,该值为缓存之前返回的Last-Modify。服务器收到if-modified-since后,根据资源的最后修改时间判断是否命中缓存。

如果命中缓存,则返回304,并且不会返回资源内容,并且不会返回Last-Modify。

样例我们使用Last-Modify和if-modified-since来实现。对于Etag和If-None-Match的实现,读取资源内容,转成hash值,然后跟Last-Modify和if-modified-since的实现差不多了,同一个道理。

新添加一个路由器

Router.get('/pp', async (ctx) => {
    const ifModifiedSince = ctx.request.header['if-modified-since'];
    const getResource = () => {
        return new Promise((res) => {
            fs.stat("./fs/a.txt", (err, stats) => {
                if (err) {
                    console.log(err);
                }
                res(stats)
            })
        })
    }
    let resource = await getResource();
    // atime	Access Time	访问时间	
    // 最后一次访问文件(读取或执行)的时间
    // ctime	Change Time	变化时间	
    // 最后一次改变文件(属性或权限)或者目录(属性或权限)的时间
    // mtime	Modify Time	修改时间	
    // 最后一次修改文件(内容)或者目录(内容)的时间
    if (ifModifiedSince === resource.mtime.toGMTString()) { //把具体的日期转换为(根据 GMT)字符串
        ctx.status = 304;
    }
    ctx.set('Last-Modified', resource.mtime.toGMTString());
    ctx.body = resource
})

关闭页面,重新打开网页访问127.0.0.1:3000/pp

第一次请求,是没有if-modified-since字段的

js前端面试常见浏览器缓存强缓存及协商缓存实例

第二次请求,没有修改资源,返回状态码304,从缓存获取资源

js前端面试常见浏览器缓存强缓存及协商缓存实例

修改a.txt文件里内容时,重新请求服务器

js前端面试常见浏览器缓存强缓存及协商缓存实例

以上就是js前端面试常见浏览器缓存强缓存及协商缓存实例的详细内容,更多关于js前端面试浏览器缓存的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
iview实现图片上传功能
Jun 29 Javascript
JavaScript前端面试组合函数
Jun 21 #Javascript
Vue2项目中对百度地图的封装使用详解
JavaScript原型链中函数和对象的理解
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 #Javascript
5个实用的JavaScript新特性
Jun 16 #Javascript
字节飞书面试promise.all实现示例
Jun 16 #Javascript
JS轻量级函数式编程实现XDM三
Jun 16 #Javascript
You might like
php写的简易聊天室代码
2011/06/04 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP设计模式之工厂模式与单例模式
2016/09/28 PHP
浅析PHP开发规范
2018/02/05 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
wxPython+Matplotlib绘制折线图表
2019/11/19 Python
python实现图片横向和纵向拼接
2020/03/05 Python
python中sys模块是做什么用的
2020/08/16 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
校庆口号
2014/06/20 职场文书
标准毕业生自荐信
2014/06/24 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
计划生育工作汇报
2014/10/28 职场文书
开发一个封装iframe的vue组件
2021/03/29 Vue.js
基于Redis延迟队列的实现代码
2021/05/13 Redis
pandas 实现将NaN转换为None
2021/05/14 Python
sql字段解析器的实现示例
2021/06/23 SQL Server
vue实力踩坑之push当前页无效
2022/04/10 Vue.js