javascript - 如何衡量一个CSS文件的CDN命中率？

Question

我正在提供来自 a CDN 的网络字体.我想知道已将文件缓存在本地的访问者百分比。

有没有办法用 JavaScript 来衡量这一点？

Answer 1

您可以使用 link.onLoad event和 Navigation Timing API计算加载每个 CSS 文件需要多长时间。现代浏览器支持这两种 API。

如果您需要了解旧浏览器[0] 的命中率，您可以使用 <img>标记为 src设置为你的CSS。然后测量onerror中的时间事件，当浏览器加载文件并发现它实际上不是图像时触发。此技术是 described here .

最彻底的解决方案是使用 JavaScript 对这两个选项进行 A/B 测试，看看哪个选项对您的特定访问者来说平均加载速度更快[1]。

---

[0] 我猜旧版浏览器的 CDN 命中率会较低，因为它们的默认缓存大小要小得多。

[1] 适用标准统计免责声明，例如您可能希望针对最佳 95% 百分位数而不是最佳平均延迟进行优化。