html - 页面 View 调用托管字体

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 毫秒。