页面视图调用托管字体

Question

许多像 myfonts.com 这样的商业字体网站使用 CSS 进行页面浏览跟踪，如下所示：

@import url("//hello.myfonts.net/count/123456");

当我查看 Chrome 的网络选项卡时，我发现对此 URL 的调用大约需要 100-250 毫秒（取决于是 https 还是 http）。这对我来说似乎很多，因为它发生在每个 CSS 解析中。

I'm wondering if this calls have some negative performance issues when loading a site? (blocked loading or rendering of CSS, timeouts when the URL is not accessible or a poor internet connection on mobile...)

我对 chrome 性能工具不太了解，但我认为必须有一种方法来分析此调用是否在加载页面时阻塞了某些内容。

Answer 1

我自己想出来的。我使用了这个代码

@import url(http://localhost/wait.php)

<?php
// wait.php
sleep(10)
?>

浏览器在呈现页面之前确实等待了 10 秒。它加载其他请求到 JS 文件...异步，但渲染被阻止。

有两种可能的解决方案

不要使用任何商业字体（我们将用开源/免费字体替换我们的商业字体）
或者：将页面查看代码放在页面底部

例如

  <style>
    @import url("//hello.myfonts.net/count/123456");
  </style>
</body>

浏览器可以通过这种方式呈现内容，当它接近完成时，它会触发您的商业字体的页面浏览量。

顺便说一句：根据 http / https 和您所在的位置，触发此页面浏览量计数大约需要 50-300 毫秒。

页面视图调用托管字体

Page view calls for hosted fonts

html

css

webfonts