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

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

1、总结

一句话总结：

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

 

一、高并发下只能经过提高服务器解决负载么？

不是：有不少种方式，好比前端，好比数据库，好比缓存，好比代码等等等等

 

二、缓存只能作数据库缓存吗？

不是：还能够作数据缓存，前端能够设置文件缓存

 

三、如何启用浏览器缓存？

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

 

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

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

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

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

 

五、缓存分类（HTTP缓存模型中，若是请求成功会有三种状况）？

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

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

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

 

六、协商缓存的特色是什么？

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

 

七、设置前端浏览器本地缓存须要设置的相关Header ？

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

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

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

 

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

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

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

 

九、Cache-Control  常见设置？

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

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

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

 

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

Pragma>Cache-Control>Expires

 

十一、协商缓存 的步骤？

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

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

 

十二、协商缓存 相关Header？

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

If-Modified-Since：获得资源的最后修改时间后，会将这个信息经过If-Modified-Since提交到服务器作检查，若是没有修改，返回304状态码

 

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

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

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

 

1四、前端适合缓存的内容？

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

js、css静态文件

可下载的内容，媒体文件

 

1五、前端建议使用协商缓存的内容？

HTML文件

常常替换的图片

常常修改的js、Css文件

 

1六、js、css文件如何拒绝缓存？

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

 

1七、前端不建议缓存的内容？

用户隐私等敏感数据

常常改变的api数据接口

 

1八、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

 

 

1九、前端浏览器本地缓存配置（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=指定的时间；

 

2一、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

 

2二、协商缓存相关配置？

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

 

2三、前端代码和资源的压缩 优点？

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

 

2四、前端资源 压缩方式有哪些？

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

Gzip压缩：服务器

 

2五、JavaScript代码压缩原理？

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

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

 

2六、图片压缩工具？

tinypng、JpegMini、ImageOptim

 

2七、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压缩标志

 

 

 

2、内容在总结中

一、相关知识

 

 

二、代码