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

Question

尝试缩短页面加载时间。

我按照第三个示例概述here来异步加载TypeKit javascript。

要使其工作，您必须为使用该字体的每个元素添加.wf-loading #some-element {visibility: hidden;}，并且在1）加载之后或2）在设定时间（1秒）之后，字体变为可见。< / p>

问题是，我正在使用的CSS将字体分配给大约200个元素，因此.wf-loading{ }的200个元素（注意：我没有写这个CSS）。

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

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

Answer 1

使用这种方法实际上并没有修改多个DOM元素（根）。这意味着我们的现代浏览器将依赖于他们的超级快速CSS引擎，因此所涉及的元素数量对页面加载没有明显影响。

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

几年前，我和Cufon一起走上了这条道路。最后，我选择了性能可接受的最简单路径并停在那里。很容易陷入优化页面加载，但可能还有更有希望改进的领域 - 功能，错误，重构等。

Answer 2

正如他们在blog中提到的那样，当Typekit CDN完全失败并且用户只看到一个空白页面时，罕见的情况（但肯定会发生 - 当然不止一次）。这是你希望你使用异步加载的时候。