如何衡量CSS文件的CDN命中率？

Question

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

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

Answer 1

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

如果您需要深入了解旧版浏览器[0]的点击率，可以使用<img>标记并将src设置为您的css。然后测量onerror事件中的时间，当浏览器加载文件并发现它实际上不是图像时会触发该事件。这项技术是described here。

最全面的解决方案是A / B使用JavaScript测试这两个选项，以查看哪一个平均加载速度更快[1]。

---

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

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