Web架构之缓存应用——DNS与浏览器缓存

  categories:资料  author:

WEB浏览器缓存介绍

合理的利用WEB浏览器缓存WEB服务器上面的图片,css,js等静态文件。对于运维工程师来说这样,既提高了用户体验,又降低了网站的请求压力和带宽。浏览器缓存是对于用户和运维人员是一个双赢。

本文主要介绍浏览器DNS缓存和浏览器缓存协商,缓存刷新,缓存过期等知识。

浏览器DNS缓存

据统计,DNS解析时间一般是20-120毫秒,浏览器有两种方法可以缓存DNS解析结果,提高用户体验。

DNS预获取:指的是用户在请求某一个链接之前,浏览器先尝试解析该链接的域名,然后将其进行缓存。

下面是京东网的案例,在用户解析图片域名之前浏览器DNS会预解析这些DNS,然后缓存,这样用户在访问京东图片的时候就不需要DNS解析了。

image004

浏览器DNS缓存:浏览器在进行正常DNS解析的情况下,会把解析的IP地址缓存下来,大部分浏览器都有这种功能和DNS无关是浏览器自身的机制。

以谷歌浏览器为例:输入chrome://net-internals/#dns可以查看到谷歌浏览器的DNS缓存,当用户请求的域名在浏览器缓存列表的时候会从中取出IP地址,而不是找DNS服务器解析,这样可以提高DNS解析的效率,谷歌浏览器DNS解析默认过期时间是1分钟。

image006

浏览器缓存协商介绍

上面介绍了浏览器DNS缓存,那么浏览器能否缓存显示的内容呢?答案是可以的。我们知道,浏览器本质上就是一个http的代码,它帮助用户发送http请求给web服务器,然后web服务器响应请求(也就是返回数据给浏览器),然后浏览器进行本地的渲染和展示,那么浏览器能否把web服务器返回的图片,css,js等资源缓存呢?那么在下次访问这些资源的时候就可以直接读取缓存提高访问速度了。

Web服务器想缓存一些数据到浏览器上面,但是浏览器并不知道那些数据需要缓存,而且这些数据需要缓存多久,那么这个时候浏览器就需要和web服务器进行对话,我们就把浏览器和web服务器之间的对话称为缓存协商。

浏览器缓存协商Last-Modified

我们知道,我们的网页文件存放在硬盘上面有三个修改时间,分别是Access访问时间。Modify修改时间。Change状态改变时间,可以通过stat命令查看。

image008

那么默认情况下,我们的web服务器会通过stat系统调用,获取静态文件在硬盘上的最后修改时间,而且在响应http请求的时候,会自动在http响应头添加自动修改时间,浏览器获取到这个头部之后会把这个数据缓存下来,以后如果在请求这个静态文件,会询问web服务器请求的静态文件最后修改时间是否发生变化,如果没有发生变化,web服务器会返回304状态码,浏览器看到304就直到静态文件没有发生改变,就会从缓存中获取数据,这样就不会产生实际的数据传输。

首次请求:WEB服务器资源,WEB服务器返回状态码200,并且在响应头添加Last-Modified标签,标明文件的最后修改时间,这个时候WEB浏览器就会把这个静态文件缓存下来。

image010

再次请求:web服务器返回304状态码,表示文件没有发生改变,浏览器从缓存中返回数据。

image012

我们知道浏览器可以缓存数据,但是我们如何查看浏览器缓存的数据呢?以谷歌浏览器为例,查看浏览器缓存数据。

(1)在Chrome浏览器的地址栏输入Chrome:Version查看Chrome浏览器保存文件的位置。

(2)在Windows资源管理器,打开这个目录就可以看到一个Cache的目录,谷歌浏览器的缓存文件就是存放在这里。

image014

如何缓存动态内容?

如果是动态程序需要使用Last-Modified缓存,需要在程序中添加Last-Modified响应头,当用户请求动态文件文件的时候,返回这个头部,但是我们通常很少这样干。

浏览器缓存协商Etag

WEB服务器会给每个静态服务器打一个标签也有人称为指纹,总之就是一个唯一的标识符。浏览器第一次访问WEB服务器上面的静态文件,WEB服务器会把这个静态文件的标签发送给浏览器,浏览器下次再访问WEB服务器的时候就会带着这个标签,如果WEB服务器上面的静态文件没有被修改,那么WEB服务器和浏览器之间的标签就是一样的,这样浏览器就不会请求WEB服务器这个静态资源了。

image016

浏览器缓存协商expires

Mod_expires允许通过apache配置文件控制http的“Expires”和”cache-Control“头内容,这个模块控制服务器应答时的expires头内容和cache-Control头的max-age指令。有效期可以设置为相当源文件的最后修改时刻或者客户端的访问时刻。

这些HTTP头向客户端表明了内容的有效性和持久性。如果客户端本地有缓存,则内容就可以从缓存(除非已经过期),而不是从服务器读取,然后客户端会检查缓存中的副本,查看是否过期或者失效,已决定是否从新服务器获得内容更新。

image018

浏览器缓存协商Cache-Control

在使用expires这种基于时间的缓存协商,如果服务器和用户浏览器的时间不一致怎么办?http协议就在这个基础上增加了一个响应头cache-control,其中有一个属性max-age表示这个文件多长时间过期,这个时间是基于浏览器本地时间,而不是服务器时间,这样就解决了浏览器和WEB服务器时间不一致的情况。

image020

浏览器缓存刷新

(1)在地址栏中输入网址后按回车键或点击转到按钮

浏览器以最少的请求来获取网页的数据,浏览器会对所有没有过期的内容直接使用本地缓存,从而减少了对浏览器的请求。所以,Expires,max-age标记只对这种方式有效。

(2)按F5或浏览器刷新按钮

浏览器会在请求中附加必要的缓存协商,但不允许浏览器直接使用本地缓存,它能够让Modified、ETag发挥效果,但是对expires无效。

(3)按Ctrl+F5或按Ctrl并点击刷新按钮

这种方式就是强制刷新,总会发起一个全新的请求,不使用任何缓存

浏览器缓存过期

第一种方法:给js文件或css的请求带个参数,每次更新项目的时候也更新参数,这样就可以了。

第二种方法:修改文件名,每次请求的时候都是请求这个新的文件。

转载请注明:西门飞冰的博客-专注于Linux运维 » Web架构之缓存应用——DNS与浏览器缓存

来源: http://www.fblinux.com/?p=320

Web 性能优化-缓存-DNS 缓存

缓存梗概

缓存技术几乎存在于网络技术发展的各个角落,从数据库到服务器,从服务器到网络,再从网络到客户端,缓存随处可见。跟前端有关的缓存技术主要有:DNS 缓存,HTTP 缓存,浏览器缓存,HTML5 缓存(localhost/manifest)和 service worker 中的 cache api。

DNS 缓存

当用户在浏览器中输入网址的地址后,浏览器要做的第一件事就是解析 DNS:

(1) 浏览器检查缓存中是否有域名对应的 IP,如果有就结束 DNS 解析过程。浏览器中的 DNS 缓存有时间和大小双重限制,时间一般为几分钟到几个小时不等。DNS 缓存时间过长会导致如果 IP 地址发生变化,无法解析到正确的 IP 地址;时间过短会导致浏览器重复解析域名。

(2) 如果浏览器缓存中没有对应的 IP 地址,浏览器会继续查找操作系统缓存中是否有域名对应的 DNS 解析结果。我们可以通过在操作系统中设置 hosts 文件来设置 IP 与域名的关系。

(3) 如果还没有拿到解析结果,操作系统就会把域名发送给本地区的域名服务器(LDNS),LDNS 通常由互联网服务提供商(ISP)提供,比如电信或者联通。这个域名服务器一般在城市某个角落,并且性能较好,当拿到域名后,首先也是从缓存中查找,看是否有匹配的结果。一般来说,大多数的 DNS 解析到这里就结束了,所以 LDNS/ISP DNS 承担了大部分的域名解析工作。如果缓存中有 IP 地址,就直接返回,并且会被标记为非权威服务器应答

第三步有一点需要注意的是,如果用户在自己电脑里设置了 DNS,比如 Google 的 8.8.8.8 或者 CloudFlare 新出的 1.1.1.1,将不会通过 ISP DNS 服务器解析。

(4) 如果前面三步还没有命中 DNS 缓存,那只能到 Root Server 域名服务器中请求解析了。根域名服务器拿到请求后,首先判断域名是哪个顶级域名下的,比如 .com, .cn, .org 等,全球一共 13 台顶级域名服务器。根域名服务器返回对应的顶级域名服务器(gTLD Server)地址。

(5) 本地域名服务器(LDNS)拿到地址后,向 gTLD Server 发送请求,gTLD 服务器查找并且返回此域名对应的 Name Server 域名服务器地址。这个 Name Server 通常就是用户注册的域名服务器,例如用户在某个域名服务提供商申请的域名,那么这个域名解析任务就由这个域名提供商的服务器来完成。

这个过程的解析方式为递归搜索。比如:https://movie.lz5z.com,本地域名服务器首先向顶级域名服务器(com 域)发送请求,com 域名服务器将域名中的二级域 lz5z 的 IP 地址返回给 LDNS,LDNS 再向二级域名服务器发送请求进行查询,之后不断重复直到 LDNS 得到最终的查询结果。

(6) Name Server 域名服务器会查询存储的域名和 IP 的映射关系表,在正常情况下都根据域名得到目标 IP 地址,连同一个 TTL 值返回给 LDNS。LDNS 会缓存这个域名和 IP 的对应关系,缓存时间由 TTL 值控制。LDNS 会把解析结果返回给用户,DNS 解析结束。

清除 DNS 缓存

(1) chrome: chrome://net-internals/#dns
(2) 本地 DNS :Windows: ipconfig /flushdns; Linux 和 mac 根据不同的版本有不同的方式

减少 DNS 解析我们能做什么?

(1) 减少 DNS 查询,避免重定向。
(2) DNS 预解析:

  • 可以通过 meta 信息告诉浏览器,页面需要做 DNS 预解析。
1
<meta http-equiv="x-dns-prefetch-control" content="on" />
  • 通过 link 标签强制 DNS 预解析
<link rel="dns-prefetch" href="https://lz5z.com" />

(3) 域名发散/域名收敛

  • 域名发散

PC 端因为浏览器有域名并发请求限制(chrome 为 6 个),也就是同一时间,浏览器最多向同一个域名发送 6 个请求,因此 PC 端使用域名发散策略,将 http 静态资源放入多个域名/子域名中,以保证资源更快加载。常见的办法为使用 cdn。

  • 域名收敛

将静态资源放在同一个域名下,减少 DNS 解析的开销。域名收敛是移动互联网时代的产物,在 LDNS 没有缓存的情况下,DNS 解析占据一个请求的大多数时间,因此,采用尽可能少的域名对整个页面加载速度有显著的提高。

(4) HttpDNS

DNS 请求使用的是 UDP 协议,虽然没有 TCP 三次握手的开销,但是可能导致弱网环境下(2G,3G)数据丢失的问题。还记得之前Web 性能优化-页面重绘和回流(重排)中提到的 Google 1s 终端首屏渲染标准,假如 DNS 解析出现问题,那可能几秒甚至几十秒都首屏不了了。而且国内牛 X 的运营商的品质你也是知道的,随便劫持一下 DNS 就让你的 web 应用不见天日。

为了应对以上两个问题,HttpDNS 应运而生,原理也非常简单,将 DNS 这种容易被劫持的协议,转而使用 HTTP 协议请求 Domain 与 IP 地址之间的映射。获得正确的 IP 地址后,就不用担心 ISP 篡改数据了。

国内腾讯云和阿里云都有相应的解决方案

  • 移动解析HttpDNS
  • HTTPDNS

Google 的方案则更近一步,使用 https 协议。



快乐成长 每天进步一点点      京ICP备18032580号-1