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

Question

我已经在我的网站上安装了typekit，通常两行js紧跟在开始的head标签之后，但是加载字体的速度非常慢/反应迟钝，这是通过刷新页面来完全修复的，之后typekit字体加载得非常完美并且非常快。但从用户的角度来看，他们永远不会知道这样做，所以他们将被提供默认字体。

我将typekit js作为在元标记之前和加载到jquery、jquery-ui和其他脚本中之前的开始head标签下的第一件事。

还有没有其他人在这方面有问题？

Answer 1

对我来说似乎起作用的是以异步模式加载脚本-正如typekit博客中所指定的，我在下面复制了它

标准异步模式

第一种模式是最基本的。它基于像Steve Souders这样的web性能专家所写的模式，并用于其他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。您可以向TypekitConfig对象添加JavaScript字体事件回调。

优势：

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

缺点：

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