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 相关文章推荐
运用jquery实现table单双行不同显示并能单行选中
Jul 25 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jstree的简单实例
Dec 01 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
javascript中this用法实例详解
Apr 06 Javascript
react中使用swiper的具体方法
May 15 Javascript
基于rollup的组件库打包体积优化小结
Jun 18 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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中关于foreach使用引用变量的坑
2016/11/14 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
永不消失的title提示代码
2007/02/15 Javascript
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
2007/08/13 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
2010/05/11 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python中还原JavaScript的escape函数编码后字符串的方法
2014/08/22 Python
python查看模块,对象的函数方法
2018/10/16 Python
python中删除某个元素的方法解析
2019/11/05 Python
python 解决Fatal error in launcher:错误问题
2020/05/21 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
汉森冲浪板:Hansen Surfboards
2018/05/19 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
英语系本科生求职信范文
2013/12/18 职场文书
售后服务承诺书
2014/03/26 职场文书
环保建议书400字
2014/05/14 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
医院科室评语
2015/01/04 职场文书
招标保密承诺书
2015/01/20 职场文书
火烧圆明园观后感
2015/06/03 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers