异步加载 Typekit ::是否值得，或者最好根本不使用它？

Question

试图缩短页面加载时间。

我按照第三个例子概述 这里 异步加载 TypeKit javascript。

为了使它工作，你必须添加一个 .wf-loading #some-element {visibility: hidden;} 对于每个使用该字体的元素，在 1) 加载或 2) 经过设定时间（1 秒）后，字体变得可见。

问题是，我正在使用的 CSS 已将字体分配给大约 200 个元素，所以这就是 200 个元素 .wf-loading{ } （笔记：这个 CSS 不是我写的）。

我觉得这会减慢加载时间，而不仅仅是让它定期加载，DOM 遍历那么多东西。如果是这种情况，我将完全砍掉 Typekit 并使用常规字体。

我可以使用任何工具来对此类内容进行性能测试吗？或者有人测试过这些东西吗？

Answer 1

使用这种方法，您实际上不会修改多个 DOM 元素（根）。这意味着我们的现代浏览器将依赖于它们 极好的 快速的 CSS 引擎，因此涉及的元素数量不会对页面加载产生明显影响。

就页面加载和闪烁而言，网络延迟通常比 DOM 操作差一个数量级。当浏览器等待字体下载时，第一个（未启动的）页面加载时总会出现一些闪烁。只需确保缓存您的字体以供重复使用，并尝试使其文件大小尽可能小。

几年前，我和库丰一起走上了这条路。最后，我选择了性能可以接受的最简单的路径并就此停止。人们很容易陷入优化页面加载的困境，但可能还有更有希望的改进领域——功能、错误、重构等。

Answer 2

问题是，正如他们在 博客, ，当 Typekit CDN 完全失败并且用户只看到一个空白页面时，这是罕见的情况（但它肯定会发生 - 对我来说肯定不止一次）。这时您会希望使用异步加载。