专栏首页浪子编程走四方如何通过Nginx配置来优化你的网络请求

如何通过Nginx配置来优化你的网络请求

为什么需要优化

  1. 缓存可以减少冗余的数据传输。节省了网络带宽,从而更快的加载页面。
  2. 缓存降低了服务器的要求,从而服务器更快的响应。

那么我们使用缓存,缓存的资源文件到什么地方去了呢?首先来看下有哪几种缓存类型呢? 1.memory cache: 它是将资源文件缓存到内存中。等下次请求访问的时候不需要重新下载资源,而是直接从内存中读取数据。2.disk cache: 它是将资源文件缓存到硬盘中。等下次请求的时候它是直接从硬盘中读取。那么他们两者的区别是?3.memory cache(内存缓存)退出进程时数据会被清除,而disk cache(硬盘缓存)退出进程时数据不会被清除。内存读取比硬盘中读取的速度更快。但是我们也不能把所有数据放在内存中缓存的,因为内存也是有限的。memory cache(内存缓存)一般会将脚本、字体、图片会存储到内存缓存中。4.disk cache(硬盘缓存) 一般非脚本会存放在硬盘中,比如css这些。缓存读取的原理:先从内存中查找对应的缓存,如果内存中能找到就读取对应的缓存,否则的话就从硬盘中查找对应的缓存,如果有就读取,否则的话,就重新网络请求。

那么浏览器缓存它又分为2种:强制缓存和协商缓存。协商缓存原理:客户端向服务器端发出请求,服务端会检测是否有对应的标识,如果没有对应的标识,服务器端会返回一个对应的标识给客户端,客户端下次再次请求的时候,把该标识带过去,然后服务器端会验证该标识,如果验证通过了,则会响应304,告诉浏览器读取缓存。如果标识没有通过,则返回请求的资源。那么协商缓存的标识又有2种:ETag/if-None-Match 和 Last-Modified/if-Modify-Since

Last-Modified/if-Modify-Since缓存

浏览器第一次发出请求一个资源的时候,服务器会返回一个last-Modify到hearer中. Last-Modify 含义是最后的修改时间。当浏览器再次请求的时候,request的请求头会加上 if-Modify-Since,该值为缓存之前返回的 Last-Modify. 服务器收到if-Modify-Since后,根据资源的最后修改时间(last-Modify)和该值(if-Modify-Since)进行比较,如果相等的话,则命中缓存,返回304,否则, 如果 Last-Modify > if-Modify-Since, 则会给出200响应,并且更新Last-Modify为新的值。

ETag/if-None-Match缓存

ETag的原理和上面的last-modified是类似的。ETag则是对当前请求的资源做一个唯一的标识。该标识可以是一个字符串,文件的size,hash等。只要能够合理标识资源的唯一性并能验证是否修改过就可以了。ETag在服务器响应请求的时候,返回当前资源的唯一标识(它是由服务器生成的)。但是只要资源有变化,ETag会重新生成的。浏览器在下一次加载的时候会向服务器发送请求,会将上一次返回的ETag值放到request header 里的 if-None-Match里面去,服务器端只要比较客户端传来的if-None-Match值是否和自己服务器上的ETag是否一致,如果一致说明资源未修改过,因此返回304,如果不一致,说明修改过,因此返回200。并且把新的Etag赋值给if-None-Match来更新该值。

last-modified 和 ETag之间对比

  1. 在精度上,ETag要优先于 last-modified。
  2. 在性能上,Etag要逊于Last-Modified,Last-Modified需要记录时间,而Etag需要服务器通过算法来计算出一个hash值。
  3. 在优先级上,服务器校验优先考虑Etag。

如上我们可以看到返回值里面有Etag的值。然后当我们再次刷新浏览器代码的时候,浏览器将会带上 if-None-Match请求头,并赋值为上一次返回头的Etag的值。然后和服务器端的Etag的值进行对比,如果相等的话,就会返回304 Not Modified。如下图所示:

我们再来改下html的内容,我们再来刷新下看看,可以看到页面内容发生改变了,因此Etag值是不一样的。如下图所示

然后我们继续刷新,就会返回304了,因为它会把最新的Etag的值赋值给 if-None-Match请求头,然后请求的时候,会把该最新值带过去,因此如下图所示可以看到。

强制缓存

基本原理:浏览器在加载资源的时候,会先根据本地缓存资源的header中的信息(Expires 和 Cache-Control)来判断是否需要强制缓存。如果命中的话,则会直接使用缓存中的资源。否则的话,会继续向服务器发送请求。Expires 是http1.0的规范,它的值是一个绝对时间的GMT格式的时间字符串。这个时间代表的该资源的失效时间,如果在该时间之前请求的话,则都是从缓存里面读取的。但是使用该规范时,可能会有一个缺点就是当服务器的时间和客户端的时间不一样的情况下,会导致缓存失效。Cache-Control Cache-Control 是http1.1的规范,它是利用该字段max-age值进行判断的。该值是一个相对时间,比如 Cache-Control: max-age=3600, 代表该资源的有效期是3600秒。除了该字段外,我们还有如下字段可以设置:no-cache: 需要进行协商缓存,发送请求到服务器确认是否使用缓存。no-store:禁止使用缓存,每一次都要重新请求数据。public:可以被所有的用户缓存,包括终端用户和 CDN 等中间代理服务器。private:只能被终端用户的浏览器缓存,不允许 CDN 等中继缓存服务器对其缓存。Cache-Control 与 Expires 可以在服务端配置同时启用,同时启用的时候 Cache-Control 优先级高。

Nginx缓存的类型

1.客户端的缓存(一般指浏览器的缓存)。2.服务端的缓存(使用proxy-cache实现的)。

Nginx如何配置

知道Nginx虚拟机的配置文件,示例如下图:

server {  server_name www.qqdeveloper.com  location ~* \.(html)$ {    access_log off;    add_header  Cache-Control  max-age=no-cache;  }
  location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {    access_log off;    add_header    Cache-Control  max-age=360000;  }}

~* 的含义是:通配任意字符(且大小写不敏感),\转义字符,因此 ~* .(html)$的含义是:匹配所有以.html结尾的请求 access_log off; 的含义是 关闭日志功能。

addheader Cache-Control max-age=no-cache; 的含义:html文件不设置强制缓存时间,协商缓存,使用 Last-Modified。no-cache 会发起往返通信来验证缓存的响应,但如果资源未发生变化,则不会下载,返回304。如下图

addheader Cache-Control max-age=360000; 的含义给上面匹配后缀的文件设置强制缓存,且缓存的时间是360000秒,第一次访问的时候,从服务器请求,当除了第一次以外,再次刷新浏览器,会从浏览器缓存读取,那么强制缓存一般是从内存里面先读取,如果内存没有,再从硬盘读取。

本文分享自微信公众号 - 卡二条的技术圈(gh_0275b8ba153f),作者:卡二条

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Linux服务器集群管理面板

    AppNode 是一款 Linux 服务器集群管理软件,它基于 Web 页面实现对 Linux 服务器的可视化管理。不但可以帮助不熟悉 Linux 命令的用户无...

    卡二条的技术圈子
  • 如何搭建Linux虚拟主机

    卡二条的技术圈子
  • MongoDB都有哪些使用的业务场景

    MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数...

    卡二条的技术圈子
  • 缓存雪崩,缓存穿透,缓存预热,缓存热备都是什么鬼?

    缓存雪崩,缓存穿透,缓存预热,缓存热备是在做缓存设计或者缓存应用时经常遇到的概念,也是缓存应用过程中必须熟知及知道 的东西。 缓存雪崩 当缓存处于单点情况下,一...

    Java技术栈
  • 架构设计 | 缓存管理模式,监控和内存回收策略

    在业务系统中,查询时最容易出现性能问题的模块,查询面对的数据量大,筛选条件复杂,所以在系统架构中引入缓存层,则是非常必要的,用来缓存热点数据,达到快速响应的目的...

    知了一笑
  • 图解 HTTP 缓存

    本文首发于政采云前端团队博客:图解 HTTP 缓存 https://www.zoo.team/article/http-cache

    前端劝退师
  • 图解 HTTP 缓存

    HTTP 的缓存机制,可以说这是前端工程师需要掌握的重要知识点之一。本文将针对 HTTP 缓存整体的流程做一个详细的讲解,争取做到大家读完整篇文章后,对缓存有一...

    政采云前端团队
  • 前端缓存之HTTP缓存

    说真的,当自己还很小白的时候,明明修改了JS的内容了,但是就是没有加载成功,那时候感觉好神奇,好没道理。后来知道了这是因为缓存的原因。

    wade
  • 深入理解浏览器的缓存机制

    缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离,减少延迟,并且由于缓存文件可以重复利用,还可以减少带宽,降低网络负...

    前端森林
  • 啊哈!缓存

    缓存在分布式系统中应用广泛,如何在架构设计中使用缓存来优化业务一直都是一个重要的话题。本文主要对引入缓存需要解决的问题以及一些优秀的实践,让读者对缓存有一个比较...

    孟君

扫码关注云+社区

领取腾讯云代金券