裘米尔
# 浏览器缓存策略详解
展开Biu

浏览器缓存策略详解

响应头字段

如何缓存以及采取那种缓存策略,都要由服务器首先告诉浏览器。即在浏览器首次发出请求后,服务器发送给浏览器的响应头字段如下——

1. Cache-Contorl

Cache-Control,即缓存策略,是浏览器读取缓存策略第一站,这个字段告诉了浏览器我们应该采取那种缓存策略——

  1. private 仅允许客户端浏览器缓存
  2. public 代理服务器和客户端浏览器都可以缓存

特别的值,
3. max-age:时间(秒),指定浏览器本地缓存数据的时间。
max-age和private或public可以同时组合存在,例如

Cache-Control: max-age:3000,public
4. no-cache 不使用“本地计时缓存”,但不影响使用“协商缓存”

2.Last-Modified

既然指定了缓存多久,那么,肯定要记录下当前请求的时间呀,这样才能开始缓存,并计算出什么时候到期嘛。

那么使用Cache-Control:max-age:xxx和Last-Modified是一个组合,告诉浏览器当前请求的时间,以及在本地缓存多久。这种由服务器告知,而后在本地缓存指定时间的缓存方式我们称之为“ 由本地计时决定的强制缓存 ”。

注意此时,如果缺失了Cache-Control却有Last-Modified,或者是max-age已经到期。浏览器会怎么做呢?

是直接请求最新的数据吗?

不不,虽然会再次发起请求,但是,浏览器会重新向服务器协商,询问接下来要怎么做。这个阶段我们称之为“ 由向服务器协商后决定的协商缓存

浏览器在再次请求服务器的时候,会带上If-Modified-Since字段,也就是上次服务器提供的Last-Modified里面的时间,服务器收到这个字段以后,会在服务端对数据进行比对,检查数据是否有变动,如果有,正常200响应;如果没有,返回304状态码,告诉浏览器,继续使用本地的强缓存,并且提供新的Last-Modified时间,浏览器开始了新的一轮max-age配合Last-Modified缓存计时。

max-age不存在或者为0,则不需要计时,每次提供Last-Modified由服务器比对。实际上提供了max-age只是为了减少请求服务器比对的次数,节约服务器资源。

好了,到此为止浏览器基础的缓存策略的逻辑我们已经了解啦。下面上一张图,还有一些扩充知识。咦这张图里怎么多了一个Etag?

图片描述

实际上Etag是一种新的机制,可以取代Last-Modified,弥补L-m以时间为依据提供给服务器比对数据的一些不足。因为时间差如果很小就很难比对。

那么,类似于Last-Modified对应If-Modified-Sense。
Etag也对应了If-None-match

关于Etag的具体机制和用法可以自行搜索了解,本文不再介绍啦。

裘米尔
# JavaScript 课本 轻量版(更新中)
展开Biu

JavaScript 课本 轻量版(更新中)

因为给word排版实在是太麻烦了,决定将后续的更新先转移到这里来
每个章节会占据一个楼层。

裘米尔
# 第一章 从一些数学概念触发
展开Biu

第一章 从一些数学概念触发

在中学阶段,我们有学过帮助我们分析问题的“小工具”——函数。两个变量x和y,若满足某个对应关系f,使得y在f的作用下随着x的变化而变化,我们就将这种关系称之为函数(关系),记作:y = f(x),其中x为自变量,y为因变量。习惯上,我们也会用y变量来称呼和整个函数,当成函数名,比如下面例子里的y1,y2等。此时我们可以称呼为“函数y”或用f来称呼:函数“f”或函数“y=f(x)”,“函数f(x)”。此外,我们还知道这里面的字母都是任意的,可以根据实际情况用其它字母表示。这些都仅仅是为了研究问题方便而被数学家们发明的符号而已。

例如,拉比对大地的好感y由常数1与他们的相处时间x的0.5倍的和决定(什么?为什么好感只由时间决定?这不重要,笔者任性规定),那么我们可以有如下关系:

自变量x:相处时间
因变量y:好感值

对应关系法则f:相处时间的0.5倍与1的和

即:y = f(x) = 0.5x + 1

那么,当相处时间为1个时间单位,2个 时间单位 ,5个时间单位的时候,好感值分别为:

y1 = f(1) = 0.5 * 1 + 1 = 1.5;y2 = f(2) = 0.5 * 2 + 1 = 2.5;y3 = f(5) = 0.5 * 5 + 1 = 3.5。

它们分别表示:当时间为1个单位时,好感y1为1.5;时间为2个单位时,好感y2为2.5,时间为5个单位时,好感y3为3.5。

函数在自变量取实际值的的时候可以表示为“函数名(自变量)”,这与程序里面执行函数的方法是一致的。这就是函数的基本的概念和使用方法啦。

[查看全文]
裘米尔
# 使用javascript生成指定区间的随机数
展开Biu

使用javascript生成指定区间的随机数

管〕Blue_sdo 13:04:26
我们都知道,js内置的随机数函数Math.random(),可生成[0,1)之间的随机数(包括0不包括1)

管〕Blue_sdo 13:05:09
即0<=Math.random()<1

管〕Blue_sdo 13:05:32
如果我们期待它生成从m到n之间的随机数

管〕Blue_sdo 13:05:49
即m<=生成的随机数<n

管〕Blue_sdo 13:06:07
我们应该要想办法配凑不等式

管〕Blue_sdo 13:07:25
首先,可以想到的是,如果在0<=Math.random()<1这个不等式上两边乘上n

管〕Blue_sdo 13:08:12
可以得到0<= Math.random()*n < n

管〕Blue_sdo 13:08:41
这样我们好像可以拿到0到n之间的随机数

管〕Blue_sdo 13:09:15
如果两边再加上m的话

管〕Blue_sdo 13:09:44
有m<= Math.random()*n +m < n+m

管〕Blue_sdo 13:10:27
但是我们要的是m到n的随机数,不是m到n+m的随机数

管〕Blue_sdo 13:11:21
为了让最后的范围右边没有m,我们可以在之前提前先去掉一个m

管〕Blue_sdo 13:11:26
变形如下:

管〕Blue_sdo 13:11:43
0 <= Math.random() < 1

管〕Blue_sdo 13:13:26
两边同时乘(n-m)得

管〕Blue_sdo 13:13:42
要把最大的范围减去最小的范围,刚才写反了

管〕Blue_sdo 13:14:09
0 <= Math.random()*(n-m) < n-m

管〕Blue_sdo 13:14:16
两边同时加上m得

管〕Blue_sdo 13:14:38
m <= Math.random()*(n-m)+m < n

管〕Blue_sdo 13:15:00
于是我们得到了从m到n之间的随机数,[m,n)

管〕Blue_sdo 13:16:04
当然,在实际应用中,我们需要将它封装到函数里,其中m和n作为函数的参数

管〕Blue_sdo 13:17:04
于是我们有: getRandom = (m,n)=> { return Math.random()*(n-m)+m }

那么在实际应用中,我们可以把这个函数复制到浏览器控制台现场试验:
描述

管〕Blue_sdo 13:19:47
我们会发现生成数字是很长的小数,这个时候我们可以根据情况,可以用js的取整函数,例如Math.ceil()向上取整 Math.floor()向下取整 Math.round()四舍五入 进行取整。

管〕Blue_sdo 13:20:26
描述

管〕Blue_sdo 13:20:38
好,结束,以上就是本次小课内容。

裘米尔
# JAVASCRIPT课本
展开Biu

JAVASCRIPT课本

这是一个半成品,嗯。

裘米尔
好,试一下这个任务能否正常进行。
展开Biu

好,试一下这个任务能否正常进行。

[查看全文]
xiaobaozi
wangfugui
在表世界定义我的幸运值100,无论我进了里世界衰成啥样,只要我退出重进,我就又是幸运MAX了 ![表
展开Biu

在表世界定义我的幸运值100,无论我进了里世界衰成啥样,只要我退出重进,我就又是幸运MAX了 表情

[查看全文]
xiaobaozi
yuewu0504
dlw_4171
我直接好家伙
展开Biu

我直接好家伙

[查看全文]
crane
感觉好厉害
展开Biu

感觉好厉害

[查看全文]
satsukiba
可以受教了
展开Biu

可以受教了

[查看全文]
查看更多