javascript - 如何测量 CSS 文件的 CDN 命中率？

Question

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

有没有办法用 JavaScript 来衡量这个？

Answer 1

您可以使用link.onLoad 事件和Navigation Timing API来计算加载每个 CSS 文件所需的时间。现代浏览器都支持这两种 API。

如果您需要深入了解旧浏览器的点击率[0]，您可以使用设置为 CSS的<img>标签。src然后测量事件中的时间，该onerror事件在浏览器加载文件并确定它实际上不是图像时触发。此处描述了此技术。

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

---

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

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