浏览器清除缓存_前端性能优化之浏览器缓存策略

在前端性能优化中,缓存可以说是一种简单高效的性能优化方法缓存策略可以缩短网页请求资源的距离,减少延迟。由于缓存的文件可以重用,带宽可以减少,网络负载可以减少,让我们来谈谈今天浏览器的缓存策略。下图说明了浏览器发送请求以获取资源:

浏览器清除缓存

。使用的缓存机制分为强缓存和协商缓存:

强缓存

可以通过Html中的元标记来设置,例如< meta Http-equiv = " cache-control " content = " no-cache,must-revalidate " >;

cache-control可以设置为4个值

1。cache-control: max-age = xxxx,public

指发送的http请求返回内容的任何路径,包括一些中间http代理服务器。以及发出请求的客户端浏览器可以缓存返回的内容。缓存操作是指在本地缓存内容,max-age=xxx,这意味着可以直接读取下一个请求,并在xxx秒内缓存以供使用。

2。cache-control: max-age = xxxx,private

表示只有请求浏览器可以缓存,而代理服务器不能缓存

3。缓存控制:最大年龄= xxxx。如果需要在xxx秒的有效期内请求资源,IMM remote

客户端将直接读取缓存。即使用户完成了刷新操作,它也不会向服务器发起http请求。

4。缓存控制:无缓存

意味着没有节点可以缓存,包括浏览器和代理服务器

5。缓存控制:无存储

应该与无缓存区区分开来。无缓存可以在本地或代理服务器上缓存,但是每次启动请求时,都必须在服务器上验证。如果服务器返回并告知可以使用本地缓存,那么请求者可以使用缓存。无存储意味着本地服务器和代理服务器都不能缓存。打个不恰当的比方,即使浏览器被告知可以使用缓存,浏览器中也没有本地缓存。

协商缓存

上面提到的强缓存是为了设置资源的过期时间,客户端将会在每次请求资源时查看它是否过期。仅在服务器过期时询问服务器。因此,强缓存是为了让客户端能够自给自足但是,当客户端请求资源并发现它已经过期时,它将请求服务器,此时请求服务器的过程可以设置协商缓存。此时,协商缓存需要客户端和服务器之间的交互

协商缓存可以在响应头中设置,可以分为两种类型:最后修改和Etg:

最后修改:

最后修改。最后一次修改时间与if-修改正弦或if-未修改正弦一起使用;我们请求一个资源,所请求的资源返回最后修改的字段头信息,指定一个时间,当浏览器下次启动请求时,该时间将从最后修改的字段中得到值,例如,该值为val,然后浏览器将设置头信息if-modified-sink或if-modified-sink。通常,浏览器使用if-modified-sink,if-modified-sink很少使用,并且头信息的值是val。服务器可以通过读取请求的头信息来找到资源存在的地方和修改时间。如果发现这两个时间是一致的,这意味着资源没有被修改,然后它告诉浏览器使用缓存的资源。如果没有,它返回新的资源。

etg:

etg是更严格的验证。通过数据签名,如果匹配或不匹配被使用,我们的资源,即内容,将生成一个唯一的签名。如果资源的数据被修改,签名将生成一个新的。最典型的方法是对资源的内容执行哈希计算,以获得唯一的值也就是说,当浏览器请求一个资源时,响应头将返回该资源的签名值,并且浏览器将在下次请求时带来头信息“如果匹配”或“如果不匹配”。服务器将在收到它之后将其与资源的当前签名进行比较。如果一致,则不需要返回新内容。下面是对节点代码的简单理解:

const http = require(' http ');

const fs = required(' fs ');

常量http = require(' http ');

const fs = required(' fs ');

http . CreateServer(函数(请求、响应){

console . log(' request come ',request . URL);

if(request . URL = = '/'){

const html = fs . ReadFileSync(' test . html ',' utf-8 ');

响应. writeHead(200,{

'内容类型':' text/html '

});

响应. end(html);

}

if(request . URL = = '/script . js '){

constag = request . headers[' if-none-match '];

if(Etag = = ' 777 '){

/* *

* 1。当写头为304时,即使我们改变etag的值,浏览器也不会检索新资源,

*也不会更新响应头返回的Etag的新值,因此旧Etag的值将用于下一个请求。

* 2。当设置缓存控制无缓存的值时,如果响应头返回最后修改和Etag的值,

*浏览器将在再次发送请求时添加最后修改和Etag的请求头;

*当设置缓存控制的无缓存值时,即使响应头返回最后修改和Etag的值,

*浏览器在再次发送请求时也不会添加最后修改和Etag的请求头。

**/

响应. writeHead(304,{

'内容类型':'应用程序/javascript ',

'缓存控制':'最大年龄=2000000,无存储',

'最后修改':' 123 ',

' Etag ':' 7778 '

});

响应. end(' some word ')

}否则{

响应. writeHead(200,{

' Content-Type ':' application/JavaScript ',

' Cache-Control ':' max-age = 2000000,no-store ',

'Last-Modified':'123 ',

'Etag ':

response . end(' console . log("脚本加载了两次"));

}

}

})。听(8888);

console.log(“服务监听8888”);


大家都在看

相关专题