html - 在网页上以非阻塞方式调用URL

Question

故事时间

我有一个购买/租用的字体，其许可证要求我在每次显示该字体时查询其域中的唯一计数器。遗憾的是，他们的建议是在 CSS 文件中使用 import 调用它，这会在调用期间阻止渲染。这也很奇怪，因为根据许可证，他们希望跟踪单个页面浏览量，但如果缓存了有问题的 CSS 文件，在清除缓存之前不会阻止再次调用导入吗？

无论如何，我删除了 import 调用，但随后开始思考究竟应该用什么来替换它。什么标签会给我一个非阻塞调用，它可以跨浏览器普遍工作，而不管禁用的功能如何？与 rel=prefetch 的链接？ HTML5，当我测试它时，它在 IE7 中不起作用。而且它也会让人感到尴尬，因为它暗示应该缓存资源，但响应包含 No-Cache 指令。页面末尾带有 defer 和 async 属性的脚本标记？也许吧，但是如果有人禁用了脚本怎么办？我可以添加一个 noscript 标签，然后在其中添加一个图像标签作为后备。但!由于图像内容是空字符串，图像是否会在某些浏览器中显示为损坏？如果有人禁用了脚本和图像怎么办？不好了!世界对他们来说一定是一个相当凄凉的地方，我必须承认。哦，哦! embed/object 怎么样？现在那是错误的，别再逗我了。

现在我最终只使用了一个普通图像标签，但是覆盖最广泛边缘情况的神奇组合是什么？例如，我可以添加 script 标签来支持那些没有加载图像的标签。

我在这里的兴趣纯属科学，所以我并不是真的在寻找替代字体提供商，也不是要讨论之前描述的情况是多么不可能。此外，为什么他们向我提供实际字体文件以从我自己的服务器提供服务，然后相信我会诚实地调用柜台，这让我无法理解。

代码

假设我的唯一字体计数器位于 http://font.foo/bar font.foo 服务器运行缓慢。

---

起点

// fonts.css
@import url('font.foo/bar')
@font-face { ... }

// index.html
<link rel="stylesheet" href="fonts.css">

---

单独的链接标签

// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">

---

rel=prefetch

// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">

---

延迟异步脚本加载

// Problem: Won't work when user has disabled scripting
// index.html
    <script src="font.foo/bar" async defer>
</body>

---

添加了图像回退的脚本标签

// Problem: Won't work when user has disabled scripting AND images
// index.html
    <script src="font.foo/bar" async defer>
    <noscript><img src="font.foo/bar" alt=""></noscript>
</body>

Answer 1

也许这样混合？您有脚本选项并继续使用链接元素而不是 img

    <script src="font.foo/bar" async defer>
    <noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>