试图降低页面加载时间。
我按照此处概述的第三个示例异步加载 TypeKit javascript。
要使其工作，您必须向.wf-loading #some-element {visibility: hidden;}使用该字体的每个元素添加一个，并且在 1) 加载或 2) 在设定时间（1 秒）后，字体变为可见。
问题是，我正在使用的 CSS 将字体分配给大约 200 个元素，所以这是 200 个元素.wf-loading{ }（注意：我没有写这个 CSS）。
我觉得这会减慢加载时间，而不仅仅是让它定期加载，DOM 遍历那么多东西。如果是这种情况，我将完全取消 Typekit 并使用常规字体。
有什么工具可以用来对这类东西进行性能测试吗？或者有没有人测试过这些东西？
您实际上并没有使用这种方法修改多个 DOM 元素（根）。这意味着我们的现代浏览器将依赖其超快的 CSS 引擎，因此所涉及的元素数量不会对页面加载产生明显影响。
就页面加载和闪烁而言，网络延迟通常比 DOM 操作差一个数量级。当浏览器等待字体下载时，在第一个（未启动的）页面加载时总会有一些闪烁。只需确保您的字体被缓存以供重复使用，并尝试使其文件大小尽可能小。
几年前，我和 Cufon 一起走上了这条路。最后，我选择了性能可以接受的最简单的路径，并就此打住。优化页面加载很容易陷入困境，但可能还有更有希望的改进领域——功能、错误、重构等。
问题是，正如他们在博客中提到的那样，Typekit CDN 完全失败并且用户只看到一个空白页面的罕见情况（但它确实发生过——对我来说肯定不止一次）。这是您希望使用异步加载的时候。