从 10 多秒到 1.05 秒！前端性能优化实践( 二 ) _性能优化

如图，有缓存下的首页效果：

文章插图

基本都是秒开。

Tips：在压缩、合并后，单个文件控制在 25 ~ 30 KB左右，同一个域下，最好不要多于5个资源。

图片压缩、合并例如：gulp 图片压缩代码如下：

//压缩imagegulp.task('imagemin', function () {    gulp.src('./public/**/*.{png,jpg,gif,ico,jpeg}')        .pipe(imagemin())        .pipe(gulp.dest('./public'));});

图片的合并可以采用 CSSSpirite，方法就是把一些小图用 PS 合成一张图，用 css 定位显示每张图片的位置。

.top_right .phone {    background: url(../images/top_right.png) no-repeat 7px -17px;    padding: 0 38px;}.top_right .help {    background: url(../images/top_right.png) no-repeat 0 -47px;    padding: 0 38px;}

然后，把压缩的图片放入 CDN ，看看效果如何：

文章插图

可见，请求时间是 1.70 s ,总请求个数 50 ，而 img 的请求个数是 15 （这里因为首页都是大图，就没有合并，只是压缩了），但是，效果很好，从 4.59 s 缩短到 1.70 s, 性能又提升一倍。
再看看有缓存情况如何：

文章插图

请求时间是 1.05 s ，有缓存和无缓存基本差不多。

Tips：大的图片在不同终端，应该使用不同分辨率，而不应该使用缩放（百分比）

整个压缩、合并（js、css、img）再放入 CDN ，请求时间从 10 多秒，到最后的1.70 s，性能提升 5 倍多，可见，这个操作必要性。
缓存缓存会根据请求保存输出内容的副本，例如页面、图片、文件，当下一个请求来到的时候:如果是相同的 URL，缓存直接使用本地的副本响应访问请求，而不是向源服务器再次发送请求。因此，可以从以下 2 个方面提升性能。

减少响应延迟，提升响应时间
减少网络带宽消耗，节省流量

我们用两幅图来了解下浏览器的缓存机制。
1、浏览器第一次请求

文章插图

2、浏览器再次请求

文章插图

从以上两幅图中，可以清楚的了解浏览器缓存的过程：

首次访问一个 URL ，没有缓存，但是，服务器会响应一些 header 信息，如： expires、cache-control、last-modified、etag 等，来记录下次请求是否缓存、如何缓存。
再次访问这个 URL 时候，浏览器会根据首次访问返回的 header 信息，来决策是否缓存、如何缓存。

我们重点来分析下第二幅图，其实是分两条线路，如下。
第一条线路：当浏览器再次访问某个 URL 时，会先获取资源的 header 信息，判断是否命中强缓存（cache-control和expires），如命中，直接从缓存获取资源，包括相应的 header信息（请求不会和服务器通信），也就是强缓存，如图：

文章插图

第二条线路：如没有命中强缓存，浏览器会发送请求到服务器，请求会携带第一次请求返回的有关缓存的 header 信息（Last-Modified/If-Modified-Since和Etag/If-None-Match），由服务器根据请求中的相关 header 信息来比对结果是否协商缓存命中；若命中，则服务器返回新的响应 header 信息更新缓存中的对应 header 信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容，也就是协商缓存。
现在，我们了解到浏览器缓存机制分为强缓存、协商缓存，再来看看他们的区别：

文章插图

与强缓存相关的 header 字段有两个：
1、expires
expires：这是 http1.0 时的规范，它的值为一个绝对时间的 GMT 格式的时间字符串，如 Mon,10Jun201521:31:12GMT ，如果发送请求的时间在 expires 之前，那么本地缓存始终有效，否则就会发送请求到服务器来获取资源。