前端性能优化——采用高效的缓存策略提供静态资源

太过爱你忘了你带给我的痛 2024-03-16 17:42 81阅读 0赞

### 一、发现性能问题 ###

通过 Chrome 开发者工具的 Lighthouse 工具对目标站点的某个页面进行分析，其生成的报告如图所示：

![3c612d49c21d38148a2cbfad0cc702a2.png][]

由分析报告可知，该目标站点存在多项待优化的性能问题，如**减少未使用的 JavaScript** 和**采用高效的缓存策略提供静态资源**等问题，本文主要分析并解决**采用高效的缓存策略提供静态资源**问题。

### 二、分析性能问题 ###

Lighthouse 会标记所有未被缓存的静态资源：

![c644bfff6c1eb3444fff909dba337ef8.png][]

Lighthouse 认为一个资源是可缓存的，当且仅当以下所有条件都满足：

*  该资源是字体、图像、媒体文件、脚本或样式表。
 *  该资源具有 200、203 或 206 HTTP 状态码。
 *  该资源没有显式的 no-cache 策略。

当页面未通过审计时，Lighthouse 会将结果列在一个具有三列的表格中：

<table> 
 <thead> 
  <tr> 
   <th>列名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>网址</td> 
   <td>可缓存资源的位置</td> 
  </tr> 
  <tr> 
   <td>缓存 TTL</td> 
   <td>资源当前的缓存持续时间</td> 
  </tr> 
  <tr> 
   <td>传输文件大小</td> 
   <td>如果被标记的资源已经被缓存，用户可以节省多少数据的估算值</td> 
  </tr> 
 </tbody> 
</table>

通过分析 Lighthouse 工具对目标站点生成的检测报告，发现**采用高效的缓存策略提供静态资源**这一项中的缓存 TTL 列，有一些静态资源文件的值为 None，也就是说该目标站点有部分静态资源未被缓存，那么这部分资源在重复访问时，会重复向服务器发送请求，因此该情况将明显影响目标站点性能。

### 三、解决性能问题 ###

为了使静态资源缓存，需要在服务器端配置 HTTP 响应标头。标头控制浏览器缓存的行为。以下是一些有关缓存的重要标头：

*  Cache-Control：用于控制资源的缓存机制。通过设置值为 public 或 private 来指定资源是否可以被缓存，并通过设置 max-age 指定资源应该被缓存的时间长度。
 *  Expires：允许指定一个过期时间，过期后，浏览器必须重新获取资源。
 *  ETag：允许服务器标识资源，并使用 If-None-Match 请求头进行缓存验证。
 *  Last-Modified：允许服务器指定资源最后修改的时间，并使用 If-Modified-Since 请求头进行缓存验证。

请配置你的服务器返回 Cache-Control HTTP 响应头：

Cache-Control: max-age=31536000

max-age 参数告诉浏览器它应该将资源缓存多长时间，单位为秒。以下示例将持续时间设置为 31536000，对应于 1 年：60 秒 × 60 分钟 × 24 小时 × 365 天= 31536000 秒。

以在 Nginx 中配置 Cache-Control 响应头为例：

1.  方法一：只通过配置 Cache-Control 实现
    
        http {
            server {
                location / {
                    root /html;
                    index index.html index.htm;
        
                    # 开启缓存，并设置一年的缓存期
                    add_header Cache-Control "public,max-age=31536000";
                }
            }
        }
    
    `add_header Cache-Control "public,max-age=31536000";` 开启了缓存，并指定了缓存类型为 public，表示响应可以被客户端和代理服务器缓存，max-age 指定了资源的缓存期为 31536000 秒。
2.  方法二：通过配置 Cache-Control 和 expires 实现
    
        http {
            server {
                location / {
                    root /html;
                    index index.html index.htm;
        
                    # 开启缓存
                    add_header Cache-Control "public";
        
                    # 设置缓存时间为 1 天
                    expires 1d;
        
                    # 根据文件类型设置不同的缓存时间
                    if ($request_filename ~* ^.+\.(js|css)$) {
                        # 缓存时间为 1 小时
                        expires 1h;
                    }
                    if ($request_filename ~* ^.+\.(png|gif|jpg|jpeg|bmp)$) {
                        # 缓存时间为 7 天
                        expires 7d;
                    }
                }
            }
        }

Nginx 服务器端设置 `Cache-Control` 响应头后，访问静态资源的响应如图所示：

![84ebd3f98c111acb5105749bc18af01c.png][]

![c209e0f317c3e882ef25f8a08bc2ef31.png][]

需要注意的是，长时间的缓存期存在一个问题：用户可能看不到静态文件的更新。但是可以通过配置构建工具来解决该问题，在静态资源文件名中嵌入哈希来避免这个问题，以便每个版本都是唯一的，从而促使浏览器从服务器获取新版本。（要了解如何使用 webpack 嵌入哈希，请参阅 webpack 的[缓存][Link 1]指南。）

如果资源经常更新且实时性很重要，那么可以将其缓存设置为 no-cache，但浏览器仍会缓存该资源，不过首先会与服务器进行检查，以确保资源仍然是最新的。

此外，并不是缓存期越长越好。而是需要根据实际需求进行权衡，以决定资源的最佳缓存期。

通过在 Nginx 开启缓存，并设置合适的缓存期，目标站点的性能检测报告如图所示：

![9d4a0e34e15fe884780bc794a18664a5.png][]

由上图可知，性能评分并没有改变，但在**诊断结果**下已没有**采用高效的缓存策略提供静态资源**这一项，这一项已经被移入**已通过的审核**，也就是该项通过在服务器设置 Cache-Control 的方式得到了性能上的优化。

[3c612d49c21d38148a2cbfad0cc702a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/62232e8e0f8c43f9bd29e52f8e49620a.png
[c644bfff6c1eb3444fff909dba337ef8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/bf36230a8af24f829c70445d89fe9de8.png
[84ebd3f98c111acb5105749bc18af01c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d71abd55cd964ab9a879edd525e311e5.png
[c209e0f317c3e882ef25f8a08bc2ef31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/b5519a964ba64aae877dba1fbb59bbcb.png
[Link 1]: https://webpack.js.org/guides/caching/
[9d4a0e34e15fe884780bc794a18664a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f1be085112ca4c0eab9b4f1a6fbffb29.png