前端性能优化--缓存

chuyao 发布于2019-08-23 15:40 / 3052人阅读

摘要：缓存控制设置缓存存储的最大周期，超过这个时间缓存被认为过期单位秒。

Cache-Control

Cache-Control：缓存控制

max-age

s-maxage

private

public

no-cache

no-store

max-age

设置缓存存储的最大周期，超过这个时间缓存被认为过期(单位秒)。与Expires相反，时间是相对于请求的时间，

优先级高于Expires

s-maxage

覆盖max-age 或者 Expires 头，但是仅适用于共享缓存(比如各个代理)，并且私有缓存中它被忽略

只能用于public,如CDN

优先级高于max-age

]

private

表明响应只能被单个用户缓存，不能作为共享缓存（即代理服务器不能缓存它）,可以缓存响应内容

自己的服务器

public

表明响应可以被任何对象（包括：发送请求的客户端，代理服务器，等等）缓存。

CDN,可以被多个用户请求

no-cache

在释放缓存副本之前，强制高速缓存将请求提交给原始服务器进行验证

这个文件不管怎么样,都会向服务器发起请求,去服务器哪边询问,这个文件有没有在缓存策略里

no-store

缓存不应存储有关客户端请求或服务器响应的任何内容。

不会使用任何缓存策略

Expires

缓存过期时间,用来指定资源的到期时间,是服务器端的具体的时间点

告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而不用再次请求

max-age的优化级高于expires,当有max-age的时候,会无视expires

当在有效时间内,如果服务器端的文件已经发生改变,但是浏览器端无法感知

Last-Modified/If-Modified-Since

Last-Modified 是一个响应首部，其中包含源头服务器认定的资源做出修改的日期及时间。它通常被用作一个验证器来判断接收到的或者存储的资源是否彼此一致。由于精确度比 ETag 要低，所以这是一个备用机制。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的条件请求会使用这个字段。

基于客户端和服务端协商的缓存机制

Last-Modified ----response header

If-Modified-Since----request header

需要与cache-control共同使用

max-age的优先级高于Last-Modified

缺点:

某些服务端不能获取精确的修改时间

文件修改时间改了,但文件内容却没有变

效果

勾上disable cache

第一次请求,状态码200,response header里有返回Last-Modified

不勾disable cache

刷新,状态码304,request header里有If-Modified-Since

因为客户端发送过来的的Modified与服务端的Modified一样,所以使用缓存

Etag/If-None-Match

ETagHTTP响应头是资源的特定版本的标识符。这可以让缓存更高效，并节省带宽，因为如果内容没有改变，Web服务器不需要发送完整的响应。而如果内容发生了变化，使用ETag有助于防止资源的同时更新相互覆盖（“空中碰撞”）

文件内容的hash值

etag--response header

if-none-match -- request header

要与cache-control共同使用

效果

清掉缓存

第一次请求，服务器返回etag

可以使用缓存

再次请求，客户端向服务器发送if-none-match

因为2个值一样，所以返回304，让浏览器读取本地的资源

分级缓存策略

流程图

GPU云服务器云服务器前端性能优化前端开发性能优化缓存优化性能优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102402.html

前端性能优化

摘要：端优谈谈关于前端的缓存的问题我们都知道对页面进行缓存能够有利于减少请求发送，从而达到对页面的优化。而作为一名有追求的前端，势必要力所能及地优化我们前端页面的性能。这种方式主要解决了浅谈前端中的过早优化问题过早优化是万恶之源。优化向：单页应用多路由预渲染指南 Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一...

Dean 2019-08-21 18:19 评论0 收藏0
实践中的电商前端优化

摘要：前端优化已经是一个被写烂的题材了。前端模板方案有很多。重绘是浏览器性能优化的一个重点，特别是针对的优化。如果你对前端性能优化有自己的想法，欢迎骚扰我。前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

Michael_Ding 2019-08-29 11:30 评论0 收藏0
实践中的电商前端优化

摘要：前端优化已经是一个被写烂的题材了。前端模板方案有很多。重绘是浏览器性能优化的一个重点，特别是针对的优化。如果你对前端性能优化有自己的想法，欢迎骚扰我。前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

Dongjie_Liu 2019-08-22 10:42 评论0 收藏0
实践中的电商前端优化

摘要：前端优化已经是一个被写烂的题材了。前端模板方案有很多。重绘是浏览器性能优化的一个重点，特别是针对的优化。如果你对前端性能优化有自己的想法，欢迎骚扰我。前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

lakeside 2019-08-01 15:53 评论0 收藏0
浅谈网站性能之前端性能优化

摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...

Winer 2019-08-20 11:04 评论0 收藏0