企业级 PHP 高并发解决方案 0x03 浏览器缓存和压缩优化技术

架构2018-01-131945 字

HTTP 缓存机制

缓存分类

在HTTP缓存模型中，如果请求成功会有三种情况。

200 from cache
304 Not Modified
200 OK

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

浏览器本身就有缓存机制，当我们浏览器检测到该资源在本地存在，那么就不需要向服务器发送请求，从下图中我们可以看到size没有大小显示的是 from cache，就是读取的缓存。

查看其响应头我们可以看到下图。

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

快速，发送的数据很少，只会返回一些基本的响应头信息，数据量很小，不发送实际响应体。

200 OK： 以上两种缓存全部失效，服务器返回完整响应。没有用到缓存，相对较慢，对于200 OK不能称之为缓存，因为根本没有用到缓存机制。

缓存策略的选择

适合的内容：

不变的图像，如logo，图标等
js、css静态文件
可下载的内容，媒体文件

建议使用协商缓存：

HTML文件
经常替换的图片
经常修改的js、css
js、css问价你的加载可以加入文件的签名来拒绝缓存（index.css?签名、index.签名.js）

不建议缓存的内容：

用户隐私等敏感数据
经常改变的 api 数据接口

NGINX 配置缓存策略

首先，我们使用PHP模拟NGINX的缓存。

<?php
    //1. 获取If-Modified-Since
    $since = $_SERVER['HTTP_IF_MODIFIED_SINCE'];
    //2. 设置过期时间一个小时
    $lifetime = 3600;
    //3. 如果没有过期直接返回304告诉浏览器使用本地缓存
    if (strtotime($since) + $lifetime > time()) {
        header('HTTP/1.1 304 Not Modified');
        exit;
    }
    //4. 设置最后修改时间
    header('Last-Modified:'. gmdate('D, d M Y H:i:s', time()). ' GMT');
    //5. 网页显示的内容，用于验证是否开启缓存
    echo time();

上述代码就是NGINX的缓存原理，不过NGINX判断的不是3600秒，而是文件的修改时间。

本地缓存配置

add_header指令：添加状态码为2XX和3XX的响应头信息。

add_header name value [always];

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

expires指令：通知浏览器过期市场

expires time;

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

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    expires 30d;
}
location ~ .*\.(js|css)?$ 
｛
    expires 12h;
｝

当设为max时，会把Expires设置为"Thu, 31 Dec 2037 23:55:55 GMT"，Cache-Control设置到10年。

协商缓存配置

ETag指令：指定签名

etag on | off 默认是on

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
{
    etag on;
}

Cache-Control

location ~ .*\.(js|css)?$ 
｛
    add_header cache-control max-age = 3600;
｝

前端代码和资源的压缩

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

压缩方式

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

JavaScript代码压缩

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

压缩工具有很多，有在线工具、有应用程序、有编辑器插件。

常用的压缩工具：

UglifyJs：压缩、语法检查、美化代码、代码缩减、转化
YUI compressor：来自Yahoo，只有压缩功能
Closure Compiler：来自Google、功能和UglifyJs有些类似，压缩的方式不太一样。

CSS代码压缩

原理和JavaScript压缩原理类似，同样是去除空白符、注释并且优化一些CSS语义规则。

常用的压缩工具：

YUI compressor：来自Yahoo，只有压缩功能
CSS Compiler：压缩时候可以选择模式，也可以对一些语法进行优化

HTML代码压缩

不建议使用代码压缩，有时会破坏代码结构，可以使用Gzip压缩，当然也可以使用htmlcompressor工具，不过转换后一定要检查代码结构。

图片压缩

除了代码的压缩外，有时对图片的压缩也是很有必要的，一般情况下图片在Web系统的比重都比较大。

压缩工具

tinypng
JpegMini
ImageOptim

Gzip压缩

GZIP最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。

HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指WWW服务器中安装的一个功能，当有人来访问这个服务器中的网站时，服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来.一般对纯文本内容可压缩到原大小的40%.这样传输就快了，效果就是你点击网址后会很快的显示出来.当然这也会增加服务器的负载. 一般服务器中都安装有这个功能模块的。

NGINX配置：

gzip on|of #是否开启gzip
gzip_buffres 32 4k| 16 8k; #缓冲（在内存中缓冲几块，每块多大）
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 applecation/xml #对那些文件类型使用压缩
gzip_vary on | off #是否传输gzip压缩标志

其他工具

自动化构建工具Grunt