高并发大流量专题---4、浏览器缓存和数据压缩

﹏ヽ暗。殇╰゛Y 2022-01-06 23:13 270阅读 0赞

# 高并发大流量专题---4、浏览器缓存和数据压缩 #

## 一、总结 ##

### 一句话总结： ###

##### http请求头里面的设置都是可以在php或者服务器（比如nginx）中设置的，比如设置expire，比如设置是否开启ETag #####

### 1、高并发下只能通过提升服务器解决负载么？ ###

##### 不是：有很多种方式，比如前端，比如数据库，比如缓存，比如代码等等等等 #####

### 2、缓存只能做数据库缓存吗？ ###

##### 不是：还可以做数据缓存，前端可以设置文件缓存 #####

### 3、如何启用浏览器缓存？ ###

##### 在服务器（比如nginx）中设置Pragma，Cache-Control，Expires等 #####

### 4、如何设置本地缓存和协商缓存（注意之间的区别）？ ###

##### 都是设置文件过期时间：其实都是设置Pragma，Cache-Control，Expires来设置文件的过期时间 #####

##### 协商缓存是本地文件过期了：向服务器发起请求看文件是否改变，如果没改变就用本地的 #####

##### 本地缓存和协商缓存是串行：是优先进行本地缓存，本地缓存的文件过期了才进行的协商缓存，协商缓存的文件改变了才从服务器获取 #####

### 5、缓存分类（HTTP缓存模型中，如果请求成功会有三种情况）？ ###

##### 200 from cache：直接从本地缓存中获取响应，最快速，最省流量，因为根本没有向服务器发送请求 #####

##### 304 Not Modified：协商缓存，浏览器在本地没有命中的情况下请求头中发送一定的校验数据到服务端，如果服务端数据没有改变浏览器从本地缓存响应，返回304（） #####

##### 200 OK：以上两种缓存全都失败，服务器返回完整响应。没有用到缓存，相对最慢。 #####

### 6、协商缓存的特点是什么？ ###

##### 快速，发送的数据很少：400B左右：只返回一些基本的响应头信息，数据量很小，不发送实际响应体 #####

### 7、设置前端浏览器本地缓存需要设置的相关Header ？ ###

##### Pragma：HTTP1.0时代的遗留产物，该字段被设置为no-cache时，会告知浏览器禁用本地缓存，即每次都向服务器发送请求。 #####

##### Expires：HTTP1.0时代用来启用本地缓存的字段，expires值对应一个形如Thu，31Dec2037 23：55：55GMT的格林威治时间，告诉浏览器缓存实现的时刻，如果还没到该时刻，标明缓存有效，无需发送请求。 #####

##### Cache-Control：HTTP1.1针对Expires时间不一致的解决方案，运用Cache-Control告知浏览器缓存过期的时间间隔而不是时刻，即使具体时间不一致，也不影响缓存的管理。 #####

### 8、Cache-Control和Expires的关系是什么？ ###

##### Expires有问题：浏览器与服务器的时间无法保持一致，如果时间差距大，就会影响缓存结果。 #####

##### Cache-Control解决问题：HTTP1.1针对Expires时间不一致的解决方案，运用Cache-Control告知浏览器缓存过期的时间间隔而不是时刻，即使具体时间不一致，也不影响缓存的管理。 #####

### 9、Cache-Control  常见设置？ ###

##### no-store：禁止浏览器缓存响应 #####

##### no-cache：不允许直接使用本地缓存，先发起请求和服务器协商 #####

##### max-age=delta-seconds：告知浏览器该响应本地缓存有效的最长期限，以秒为单位 #####

### 10、Pragma，Cache-Control，Expires的执行优先级是怎样？ ###

##### Pragma>Cache-Control>Expires #####

### 11、协商缓存 的步骤？ ###

##### 1、没有命中本地缓存：当浏览器没有命中本地缓存，如本地缓存过期或者响应中声明不允许直接使用本地缓存，那么浏览器肯定会发起服务端请求 #####

##### 2、验证数据是否修改：服务端会验证数据是否修改，如果没有，通知浏览器使用本地缓存 #####

### 12、协商缓存 相关Header？ ###

##### Last-Modified：通知浏览器资源的最后修改时间；Last-Modified：Mon,28 Sep 2015 08:06:43 GMT #####

##### If-Modified-Since：得到资源的最后修改时间后，会将这个信息通过If-Modified-Since提交到服务器做检查，如果没有修改，返回304状态码 #####

### 13、http请求中文件的ETag是什么及相关？ ###

##### 文件的指纹标识符：HTTP1.1推出，文件的指纹标识符，如果文件内容修改，指纹会改变；Etag："78437822c-6739" #####

##### If-None-Match：本地缓存失效，会携带此值去请求服务端，服务端判断该资源是否改变，如果没有改变，直接使用本地缓存，返回304 #####

### 14、前端适合缓存的内容？ ###

##### 不变的图像，如logo，图标等 #####

##### js、css静态文件 #####

##### 可下载的内容，媒体文件 #####

### 15、前端建议使用协商缓存的内容？ ###

##### HTML文件 #####

##### 经常替换的图片 #####

##### 经常修改的js、Css文件 #####

### 16、js、css文件如何拒绝缓存？ ###

##### 加签名：js、css文件的加载可以加入文件的签名来拒绝缓存；实例：index.css？签名；index.签名.js #####

### 17、前端不建议缓存的内容？ ###

##### 用户隐私等敏感数据 #####

##### 经常改变的api数据接口 #####

### 18、php中控制浏览器缓存实例 启示？ ###

|||-begin

$since=$_SERVER['HTTP_IF_MODIFIED_SINCE'];
    $lifetime=3600; 
    if(strtotime(ssince)+$lifetime>time()){
        header(' HTTP/1.1 304 Not Modified');
        exit;
    }
    header('Last-Modified:'. gmdate('D,d MY H:i:s', time()).' GMT');

|||-end

##### http请求头里面的设置都是可以在php或者服务器（比如nginx）中设置的，比如设置expire，比如设置是否开启ETag #####

### 19、前端浏览器本地缓存配置（Nginx配置缓存策略）？ ###

##### add\_header指令：添加状态码为2XX和3XX的响应头信息；add header name value\[always\]； #####

##### 可以设置Pragma/Expires/Cache-Control，可以继承 #####

### 20、expires指令设置及和Cache-Control的关系？ ###

##### expires time；expires指令：通知浏览器过期时长； #####

##### 为负值时表示：Cache-Control:no-cache；当为正或者0时，就表示：Cache-Control:max-age=指定的时间； #####

### 21、nginx中设置expires给我们的启示？ ###

|||-begin

location ~* \.(jpg|png|gif|jpeg)$ {
        expires 30d;
    }
    #当为max时，会把Expires设置为"Thu，31Dec 2037 23：55：55 GMT"，Cache-Control 设置到10年；

|||-end

##### http请求头里面的设置都是可以在php或者服务器（比如nginx）中设置的，比如设置expire，比如设置是否开启ETag #####

### 22、协商缓存相关配置？ ###

##### Etag指令：指定签名；实例：可以在nginx配置的location中配置：etag on | off；默认是on #####

### 23、前端代码和资源的压缩 优势？ ###

##### 让资源文件更小，加快文件在网络中的传输，让网页更快的展现，降低带宽和流量开销 #####

### 24、前端资源 压缩方式有哪些？ ###

##### JS、CSS、图片、HTML代码的压缩 #####

##### Gzip压缩：服务器 #####

### 25、JavaScript代码压缩原理？ ###

##### 去掉多余的空格和回车、替换长变量名、简化一些代码写法等 #####

JavaScript压缩的原理一般是去掉多余的空格和回车、替换长变量名、简化一些代码写法等。

### 26、图片压缩工具？ ###

##### tinypng、JpegMini、ImageOptim #####

### 27、Nginx如何配置gzip压缩？ ###

##### 直接在nginx的配置的location中加上这句话即可：gzip on|off； \#是否开启gzip #####

gzip on|off； #是否开启gzip 
    gzip_buffers 324K|168K #缓冲（在内存中缓冲几块？每块多大）
    gzip_comp_level[1-9] #推荐6压缩级别（级别越高，压的越小，越浪费CPU计算资源）
    
    gzip_disable#正则匹配UA什么样的Uri不进行gzip 
    gzip_min_length 200#开始压缩的最小长度
    gzip_http_version 1.0|1.1#开始压缩的http协议版本
    gzip_proxied#设置请求者代理服务器，该如何缓存内容
    
    gzip_types text/plain application/xml#对哪些类型的文件用压缩如txt，xml，html，css 
    gzip_vary onloff#是否传输gzip压缩标志

## 二、内容在总结中 ##

### 1、相关知识 ###

### 2、代码 ###

转载于:https://www.cnblogs.com/Renyi-Fan/p/11047732.html