返回

摸清资源加载缓存，精确测算性能评估指标

前端

资源加载测速是前端性能优化的关键步骤之一，能够帮助我们准确了解页面资源的加载情况，从而针对性地进行优化。但是，在进行资源加载测速时，我们往往会忽略一个重要的问题：如何区分该资源加载是命中缓存（浏览器缓存，304协商缓存）后返回的，还是未命中缓存后到线上服务器拉取的。

区分资源加载是否命中缓存非常重要，因为它会直接影响到我们对资源加载性能的评估。如果我们无法区分命中缓存和未命中缓存的情况，那么我们就无法准确地判断出资源的平均加载时长、首次加载时长和命中缓存时的加载时长，从而导致性能评估结果不准确。

以下是一些区分资源加载是否命中缓存的方法：

  • 查看浏览器的开发者工具

    • 在浏览器的开发者工具中，我们可以查看每个资源的加载情况。如果资源加载命中缓存，那么它的状态码通常是200，并且在「Cache」列中会显示「HIT」或「304」。如果资源加载未命中缓存，那么它的状态码通常是302或200，并且在「Cache」列中会显示「MISS」。

  • 使用性能分析工具

    • 我们可以使用性能分析工具来监控资源加载情况。这些工具通常会提供详细的资源加载信息，包括资源的加载时间、状态码和缓存命中情况等。

  • 查看HTTP头信息

    • 我们可以使用HTTP头信息来判断资源加载是否命中缓存。如果资源加载命中缓存，那么在HTTP头信息中会出现「Cache-Control: max-age=」或「Expires:」字段。如果资源加载未命中缓存，那么HTTP头信息中就不会出现这些字段。

区分资源加载是否命中缓存后，我们就可以准确地计算出资源的平均加载时长、首次加载时长和命中缓存时的加载时长。这些指标可以帮助我们全面评估资源的加载性能，并针对性地进行优化。

平均加载时长

* 平均加载时长是指资源在一段时间内的平均加载时间。我们可以通过以下公式计算平均加载时长：

    ```
    平均加载时长 = 总加载时间 / 加载次数
    ```

首次加载时长

* 首次加载时长是指资源的第一次加载时间。我们可以通过以下公式计算首次加载时长：

    ```
    首次加载时长 = 资源的第一次加载时间
    ```

命中缓存时的加载时长

* 命中缓存时的加载时长是指资源在命中缓存后的加载时间。我们可以通过以下公式计算命中缓存时的加载时长：

    ```
    命中缓存时的加载时长 = 资源的命中缓存后的加载时间
    ```

这三个指标可以帮助我们全面评估资源的加载性能。如果资源的平均加载时长、首次加载时长和命中缓存时的加载时长都很短，那么说明资源的加载性能很好。如果这三个指标中的任何一个指标都很长，那么说明资源的加载性能存在问题，需要进行优化。

通过区分资源加载是否命中缓存，我们可以准确地计算出资源的平均加载时长、首次加载时长和命中缓存时的加载时长。这些指标可以帮助我们全面评估资源的加载性能，并针对性地进行优化。