javascript - 缓慢/无响应/卡住的typekit脚本

我在我的网站上安装了typekit，通常是在开头head标签之后添加了两行js，但是它非常缓慢/对字体加载没有响应，通过刷新页面可以完全解决此问题，之后，typekit字体可以完美，真正地加载很快。但是从用户的角度来看，他们永远不会知道这样做，因此将为他们提供默认字体。

首先，我将typekit js作为meta标记之前和装入jquery，jquery-ui和其他脚本之前的开头head标记之下的第一件事。

还有其他人对此有麻烦吗？

最佳答案

对我来说似乎有用的是以异步模式加载脚本-如在typekit博客上指定的，我在下面将其复制

标准异步模式

第一个模式是最基本的。它基于由诸如Steve Souders这样的网络性能专家编写的模式，并在其他JavaScript嵌入代码（例如Google Analytics（分析））中使用。

<script type="text/javascript">
  TypekitConfig = {
    kitId: 'abc1def'
  };
  (function() {
    var tk = document.createElement('script');
    tk.src = '//use.typekit.com/' + TypekitConfig.kitId + '.js';
    tk.type = 'text/javascript';
    tk.async = 'true';
    tk.onload = tk.onreadystatechange = function() {
      var rs = this.readyState;
      if (rs && rs != 'complete' && rs != 'loaded') return;
      try { Typekit.load(TypekitConfig); } catch (e) {}
    };
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(tk, s);
  })();
</script>

该模式使用单个内联标签向页面动态添加新的脚本元素，从而加载工具包而不会阻止进一步的渲染。附加了事件侦听器，该脚本一旦完成加载，便会调用Typekit.load（）。
如何使用它：

将此代码段放在顶部，以便尽快开始下载。
编辑突出显示的TypekitConfig对象，并将默认值替换为您自己的Kit ID。
您可以将JavaScript字体事件回调添加到TypekitConfig对象。

优点：

异步加载该工具包（加载时不会阻止进一步的页面渲染）。

缺点：

比标准Typekit嵌入代码向HTML页面添加更多字节。
导致无法用字体事件控制或隐藏的所有浏览器中出现初始FOUT。

关于javascript - 缓慢/无响应/卡住的typekit脚本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10797262/