缓慢/无响应/卡住的typekit脚本 [英] slow / unresponsive / stuck typekit script

问题描述

在我的网站上已安装了typekit，通常是在开头head标签之后插入两行js，但是其速度非常慢/对字体加载没有响应，在刷新typekit字体后，通过刷新页面可以完全解决此问题.完美而又迅速.但是从用户的角度来看，他们永远都不知道这样做，因此将为他们提供默认字体.

ive installed typekit on my site, the usual two lines of js just after the opening head tag but its extremely slow / unresponsive to load in the fonts, this is completly remedied by refreshing the page, after that the typekit font load in perfectly and really quickly. But from a users point of view they will never know to do that, so they will be served the default fonts.

在metatags之前，在加载jquery，jquery-ui和其他脚本之前，我将typekit js作为开头head标签之下的第一件事.

I have the typekit js as the very first thing under the opening head tag before the metatags and before loading in jquery, jquery-ui and other scripts.

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

Has any one else had trouble with this ?

推荐答案

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

what seemed to work for me was to load the script in an asynchronous pattern - as specified on the typekit blog, ive copied it in bellow

标准异步模式

第一个模式是最基本的.它基于由Steve Souders等网络性能专家撰写的模式，并已在其他JavaScript嵌入代码(如Google Analytics(分析))中使用.

This first pattern is the most basic. It’s based on patterns written about by web performance experts like Steve Souders and used in other JavaScript embed codes like 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(). 使用方法:

This pattern uses a single inline tag to dynamically add a new script element to the page, which loads the kit without blocking further rendering. An event listener is attached that calls Typekit.load() once the script has finished loading. How to use it:

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

Place this snippet at the top of the so the download starts as soon as possible. Edit the highlighted TypekitConfig object and replace the default with your own Kit ID. You can add JavaScript font event callbacks to the TypekitConfig object.

优势:

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

Loads the kit asynchronously (doesn’t block further page rendering while it loads).

缺点:

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

Adds more bytes to your html page than the standard Typekit embed code. Causes an initial FOUT in all browsers that can’t be controlled or hidden with font events.

这篇关于缓慢/无响应/卡住的typekit脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！