美文网首页
前端性能优化-缓存利用

前端性能优化-缓存利用

作者: jinya2437 | 来源:发表于2019-01-18 19:58 被阅读54次

缓存分类

1.CDN缓存
2.DNS缓存
3.客户端缓存

1.CDN缓存

CDN可以理解分布世界各地的节点,当用户浏览网站的时候,CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求,这样在广州访问王者荣耀用户的请求就不会千里迢迢跑到北京的服务器(假设王者荣耀源站部署在北京)

CDN的优势很明显:(1)CDN解决了跨地域访问的问题,访问延时大大降低;(2)大部分请求在CDN边缘节点完成,CDN起了分流作用,减轻了源站的负载

//设置CDN边缘节点数据缓存时间
Cache-Control:max-age

当客户端向CDN节点请求数据时,CDN节点会判断缓存数据是否过期,若缓存数据并没有过期,则直接将缓存数据返回给客户端;否则,CDN节点会向源站发出请求,从源站获取最新数据,更新本地缓存,并将最新的数据返回给客户端。CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间,为用户提供更精细化的缓存管理


2.DNS缓存

DNS(Domain Name System):解析域名找到IP地址服务器
DNS查找流程:首先查看浏览器缓存是否存在,不存在则访问本机DNS缓存;再不存在则访问远程DNS服务器,通常浏览器查找域名对应的IP地址需要花费20-120ms,在DNS查找完成之前,浏览器不能从host下载任何东西

  • DNS性能优化最佳实践
    当客户端的DNS缓存为空时,DNS查找的数量与配置的主机数量相等,所以减少配置主机可以减少DNS查找的数量。
    但是问题来了,有时候需要多设置主机数量,来增加DNS的负载均衡,因此减少DNS的查找和增加主机数量形成矛盾关系,建议配置2-4个主机是最佳的。更多负载均衡可以用nginx实现。

3.浏览器缓存

1.Cache-Control:max-age

假如站点引入一个脚本文件,希望20年不变,这时浏览器把这个脚本缓存起来,不用每一次都请求服务器。这样节省宽带并且提升性能;

//设置Response的HTTP头中Cache-Control
Cache-Control:max-age=31536000

因为标准规定最多只能设置一年。这里设置了一年的缓存,以秒为单位。
但是,有一天发现脚本的文件要改了怎么办?很简单,改变请求的文件名就好了。这时浏览器会向服务器请求这个文件。

2.Expires

指一个绝对过期日期,如果过期了,客户端向服务器获取最新资源;这个过期时间是参照客户端的时间,修改客户端的时间等同于更改缓存命中结果,推荐与Cache-Control一块使用

//设置Response的HTTP头中Expires
Response Headers
Expires:Sat,24 Jan 2018 20:30:47 GMT
...
3.Last-Modified 和 If-Modified-Since

1.客户端第一次向服务器发送请求获取JS文件
2.服务器接收请求后将JS文件返回给客户端,响应头里JS文件最后的修改时间Last-modified:Sat,24 Jan 2018 20:30:47 GMT
3.客户端第二次发起请求获取JS文件,在这里会把第2步返回的修改时间放在请求头里If-Modified-Since:Sat,24 Jan 2018 20:30:47 GMT发送给服务器
4.服务器进行校验,检查修改文件的时间;如果文件没有修改过,通知客户端是最新版本;反之,则返回最新的JS文件给客户端

//第一次发起请求,响应头返回的修改文件时间
Response Headers
Last-Modified:Sat,24 Jan 2018 20:30:47 GMT
//第二次发起请求,请求头发送给服务器的修改文件时间
Request Headers
If-Modified-Since:Sat,24 Jan 2018 20:30:47 GMT
4.ETag 和 If-None-Match

场景:客户端发起请求获取JS文件,JS文件的内容加一个空格然后删除空格进行保存操作;这时候服务器会校验JS文件最后的修改的时间,发现匹配不上,服务器会重新将文件返回给客户端。可是,这样合理么?JS文件内容并没有被修改?
ETag的出现了,完美处理上述情况

1.客户端第一次向服务器发送请求获取JS文件
2.服务器接收请求后将JS文件返回给客户端,响应头里ETag :W/"262b9-Lo40+3qjAODueOOX6ceeIg"
3.客户端第二次发起请求获取JS文件,请求头里 If-None-Match:W/"262b9-Lo40+3qjAODueOOX6ceeIg"发送给服务器
4.服务器进行校验,检查文件内容是否变化了(ETag的值:是依据文件内容的哈希值生成);如果文件内容没有改变过,通知客户端是最新版本;反之,则返回最新的JS文件给客户端

//第一次发起请求,响应头返回ETag
Response Headers
ETag:W/"262b9-Lo40+3qjAODueOOX6ceeIg"
//第二次发起请求,请求头发送ETag的值给服务器
Request Headers
If-None-Match:W/"262b9-Lo40+3qjAODueOOX6ceeIg"

相关文章

  • 前端性能优化-缓存利用

    缓存分类 1.CDN缓存2.DNS缓存3.客户端缓存 1.CDN缓存 CDN可以理解分布世界各地的节点,当用户浏览...

  • 常用的后端性能优化六种方式:缓存化+服务化+异步化等

    性能优化专题 前端性能优化 数据库性能优化 jvm和多线程优化 架构层面优化 缓存性能优化 常用的后端性能优化六大...

  • 2019-07-11

    前端性能优化老生常谈的话题,前端面试基本都会问到。回答应该从减少http请求,利用缓存以及资源加载方式切入,但前端...

  • webpack hash哈希值

    静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存)。回到本文主...

  • 前端性能优化(中)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(上)...

  • 前端性能优化(下)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 《前端性能优化(中)...

  • 前端性能优化指南

    前端性能优化指南 AJAX优化 缓存AJAX: 请求使用GET:当使用XMLHttpRequest时,而URL长度...

  • 漫谈Web缓存

    作者 | WilsonLiu95 背景说明 缓存一直是前端性能优化中,浓墨重彩的一笔。了解前端缓存是打造高性能网站...

  • 前端性能优化(上)

    性能优化调研系列文章 《前端性能优化(上)》 《前端性能优化(中)》 《前端性能优化(下)》 为什么要进行前端性能...

  • 【前端性能优化指南】1 - 利用缓存减少远程请求

    更多前端性能优化系列请点击这里 >> 欢迎来到「前端性能优化之旅」的第一站 —— 缓存。 当浏览器想要获取远程的数...

网友评论

      本文标题:前端性能优化-缓存利用

      本文链接:https://www.haomeiwen.com/subject/snendqtx.html