慢/响应/卡住typekit脚本(slow / unresponsive / stuck typek

2019-07-29 14:59发布

香港专业教育学院在我的网站安装typekit,JS通常的两行刚刚开幕的头标记之后,但其极其缓慢/响应的字体加载,这是完全地刷新页面,之后的typekit字体加载的完美,真正弥补很快。 但是从一个用户的角度,他们永远不会知道要做到这一点,那么他们将提供的默认字体。

我有typekit JS的元标记前开幕头标记下的第一件事和jQuery的,jQuery的用户界面和其他脚本加载之前。

是否有任何其他人有这个问题吗?

Answer 1:

什么似乎为我工作是加载脚本在异步模式 - 在typekit博客按规定,香港专业教育学院在波纹管抄了一遍

标准异步模式

这第一种模式是最基本的。 它是基于由网络性能专家像史蒂夫Souders的写在像谷歌分析其他JavaScript嵌入代码使用的模式。

<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对象,并替换为自己的包ID默认。 您可以添加JavaScript的字体事件回调到TypekitConfig对象。

好处:

加载套件异步(虽然它加载不会阻止进一步的页面渲染)。

缺点:

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



文章来源: slow / unresponsive / stuck typekit script