Typekit 脚本缓慢/无响应/卡住

2024-01-11

我在我的网站上安装了 typekit,通常在开头的 head 标签后面有两行 js,但加载字体非常慢/无响应,这可以通过刷新页面来完全解决,之后 typekit 字体完美地加载迅速地。但从用户的角度来看,他们永远不会知道要这样做,因此他们将获得默认字体。

我将 typekit js 作为元标记之前以及加载 jquery、jquery-ui 和其他脚本之前的开头头标记下的第一件事。

还有其他人遇到过这个问题吗?


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

标准异步模式

第一个模式是最基本的。它基于 Steve Souders 等 Web 性能专家编写的模式,并在 Google Analytics 等其他 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 对象,并将默认值替换为您自己的 Kit ID。 您可以将 JavaScript 字体事件回调添加到 TypekitConfig 对象。

优点:

异步加载套件(加载时不会阻止进一步的页面呈现)。

缺点:

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Typekit 脚本缓慢/无响应/卡住 的相关文章

  • 如何在 Firefox 控制台中访问附加内容脚本?

    我为 Firefox 和 Chrome 开发了一个插件 它有内容脚本 我想在浏览器选项卡的控制台中访问它们 在 Firefox 上网页控制台 https developer mozilla org en US docs Tools Web
  • 在 Javascript 中获取第一个数字出现后的子字符串

    我正在尝试提取第一个数字之后 并包括 的字符 ABC 123SD gt 123SD 123 gt 123 123SD gt 123SD ABC gt 我当前的解决方案如下 var string1 ABC 123SD var firstDig
  • Javascript DOM setAttribute 在函数调用中不起作用

    我有一个带有输入元素的 HTML 文件 我希望向其中添加一个名为 valid fieldset011 的新属性 该属性用作 AngularJS 验证器的链接 输入元素具有属性 id fieldset011 如果我使用以下脚本 包含在脚本标签
  • html 表格单元格的条件格式

    是否有现成的解决方案可以对 HTML 表格进行条件格式设置 通过条件格式 我更感兴趣的是根据该列或其他列 在同一个表中 的值 数字 将不同的颜色作为单元格背景 类似于我们在 Excel 条件格式 gt 色阶 gt 红黄绿中的内容 我想在通过
  • 打开 md-calendar 时滚动到当前日期

    目前正在构建一个使用 Angular Material 的应用程序 我们需要一个 md calendar 组件 我们想要自定义按钮样式和内容 因此不使用普通的 md datepicker 问题是 当 md calender 打开时 滚动位置
  • 为什么 length 是 `Array` 的属性而不是 `Array.prototype` 链

    所以我在 V8 控制台上玩了很多 我做到了 Object getOwnPropertyNames 我期望得到 结果 然而 length 所以这意味着不是成为原型链的一部分 length是所有人的成员财产Array对象 这是一个错误 还是有任
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 如何用javascript正确读取php cookies

    考虑这个 php 和 javascript 代码 然后我在控制台中看到的是 utma 111872281 291759993 1444771465 1445374822 1445436904 4 utmz 111872281 1444771
  • 如何在 HTML / Javascript 页面中插入 PHP 下拉列表

    好吧 这是我的第二篇文章 请接受我是一个完全的新手 愿意学习 花了很多时间在各个网站上寻找答案 而且我几乎已经到达了我需要到达的地方 至少在这一点上 我有一个网页 其中有许多 javascript 函数 这些函数一起使用 google 地图
  • 如何从 JSON 响应重定向?

    所以我尝试使用 Flask 和 Javascript 上传器 Dropzone 上传文件并在上传完成后重定向 文件上传正常 但在烧瓶中使用传统的重定向 return redirect http somesite com 不执行任何操作 页面
  • console.log() 显示同一对象属性的矛盾值

    我想我可能要疯了 我使用 console log 来查看对象的状态 然后在下一行对同一对象的特定属性执行 console log 并为每个属性获取不同的值 我正在使用的代码是 console log this pictures Items
  • 在 React Navigation 中将 props 传递给自定义抽屉导航器

    在反应导航抽屉菜单中 我想显示用户名 John Doe 它处于我的主要组件的状态 Router 我怎样才能将自定义抽屉内容组件传递给它 额外信息 我从 AsyncStorage 中获取此名称 组件已挂载 这是我的代码 export defa
  • 使用日期字符串数组在引导日期选择器中设置禁用月份不起作用

    我有一个日期选择器 其配置如下 HTML div class input group date div
  • 如何在 ASP.NET MVC 3 的 Razor 视图中编码嵌入的 javascript?

    如何在以下上下文中正确编码 JavaScript 我的 JSON 对象中的值是由应用程序管理员设置的 因此我假设它们需要正确编码 对于 HTML 和 JavaScript 都是如此 我在用着System Web Script Seriali
  • Node.js 未处理的“错误”事件

    我编写了一个简单的代码并将其保存在文件 try js 中 var http require http var makeRequest function message var options host localhost port 8080
  • 从 DirectionsRenderer 中获取折线或标记的事件

    我正在使用 DirectionsService 和路线方法来生成 DirectionsResult 我还使用 DirectionsRenderer 对象来显示结果 因为它非常易于使用 我在检测 Directions changed 事件时没
  • Knockout.js 安全绑定

    我想使用带有淘汰赛的安全绑定 为此我使用敲除安全绑定 js https github com brianmhunt knockout secure binding 谁能解释一下为什么下面的代码不起作用 它会抛出一个错误 未捕获 淘汰 安全
  • JavaScript:测试与执行

    我想知道检查字符串 例如邮件 密码等 的最佳方法是什么 i exec a vs i test a exec返回值 test true test 1 way var mail req body mail if check mail exec
  • Node.js - 重载函数

    有没有一种方法可以重载node js中的函数 类似于 noSuchMethod https developer mozilla org en JavaScript Reference Global Objects Object noSuch
  • 将 RequireJS 与遗留代码结合使用

    我正在处理一个非常大的项目 该项目使用 包含带有脚本标记的 javascript 文件的旧版 JSP 页面 使用其他 javascript 模块而不使用 RequireJS 的骨干模型和视图 现在 我们希望开始将 RequireJS 与 j

随机推荐

  • appcompat_v7 和fragment_main.xml?

    我最近将 eclipse 和 ADT 插件从 v22 3 更新到 v22 6 并发现了一些重大变化 每当我创建一个新的 Android 应用程序项目时 都会出现一个新的 appcompat v7 库 该库在 v22 3 插件上不存在 并且还
  • jQuery / DataTables:如何更改分页颜色

    我正在使用 jQuery DataTables 插件 版本 1 9 4 并且想更改分页的颜色 使用 CSS 我可以更改它们的背景颜色 但我找不到更改锚标记的字体颜色和字体悬停颜色的方法 我想将以下所有锚标记的字体颜色和悬停字体颜色更改为白色
  • OpenAI:流中断(客户端断开连接)

    我正在尝试 OpenAI 我已经准备好了训练数据 并使用fine tunes create 几分钟后 显示Stream interrupted client disconnected openai api fine tunes create
  • 使用参数设置 Jenkins Pipeline 构建

    我阅读了大量有关 Jenkins 2 x 和管道系统的内容 以便创建具有以下功能的设置 SCM 管理 Jenkinsfile 构建对 git 存储库的每个提交 通过 webhook 触发器传递参数 到目前为止 由于各种原因 我未能建立一个工
  • 如何在asp.net MVC视图中有条件地设置模型?

    我是 ASP NET MVC 的初学者 我的页面有一个名为 Navigation 的部分视图 我正在重复使用它 如果用户位于 主页 a 导航的 href 需要指向 字符 如果用户位于 服务 页面 则导航的 href 需要指向其他 url 例
  • 如何VBA捕获请求超时错误?

    我正在使用对象MSXML2 ServerXMLHTTP60 http msdn microsoft com en us library ms762278 28v vs 85 29向网络服务发送请求 有了这个对象 我可以通过以下方式加快数据加
  • Safari 扩展截屏

    我正在开发 Safari 浏览器扩展 它应该具有截图功能 Chrome 和 Firefox 有自己的 api 来获取当前窗口文档的 SS 我找不到任何特定于 Safari 的 API 文档 窗口和选项卡 API https develope
  • RGB 颜色不正确 Unity C#

    所以我有一个 2D 对象 您可以使用按钮更改颜色 每个按钮都会更改对象的精灵 我有一个红色 橙色 黄色 绿色 蓝色 紫色的精灵 现在我有一个粒子系统 前面提到的对象的子对象 我想将其 startColor 属性更改为与 2D 对象的精灵相同
  • Scipy.cluster.hierarchy.fclusterdata + 距离测量

    1 我正在使用 scipy 的 hcluster 模块 所以我可以控制的变量是阈值变量 我如何知道每个阈值的表现 即在 Kmeans 中 该性能将是所有点到其质心的总和 当然 这必须进行调整 因为通常更多的簇 更短的距离 我可以用 hclu
  • TortoiseMerge 中的等号是什么意思?

    In TortoiseMerge 文档 http tortoisesvn net docs release TortoiseMerge en tmerge dug icons html 等号的意思是 通过恢复到该行的原始内容 已撤消更改 该
  • 对 AngularJS $window 服务进行单元测试

    我想对以下 AngularJs 服务进行单元测试 factory httpResponseInterceptor q location window CONTEXT PATH function q location window conte
  • Sencha Touch 2 事件:绘制与展示?

    我有一个关于show事件 在我的应用程序中我正在处理painted我的小组的事件是这样的 Ext define mvcTest controller Test extend Ext app Controller config refs pa
  • 在 ie 8 中打印浮点图

    我目前正在使用http www flotcharts org http www flotcharts org 对于一个绘图插件 我正在尝试实现从内容包围的页面上打印流程图的能力 我正在尝试打开一个新窗口并打印一个画布对象 这样我就可以只打印
  • 更改方法重写中的参数修饰符

    我知道一个params修饰符 将数组类型的一个参数转换为所谓的 参数数组 特别不是方法签名的一部分 现在考虑这个例子 class Giraffid public virtual void Eat int leaves Console Wri
  • 如何让 Django-Ajax-Selects 在 Django Admin 中工作?

    Django Ajax 选择 http code google com p django ajax selects 这是我所做的 但无济于事 Added ajax select to my INSTALLED APPS in setting
  • 6 个位置内 3 个元素的排列

    我正在寻找排列 或组合 c a b c 在始终具有具有替代元素的序列的条件下的六个位置内 例如abcbab 排列可以很容易地得到 abc lt c a b c permutations n 3 r 6 v abc repeats allow
  • 为什么使用分号时 JavaScript 不被解释为代码块?

    In Chrome版本 72如果我运行以下命令JavaScript没有错误 prop p prop prop gt gt prop prop 因此 这行代码意外地被解释为表达式语句 但是 如果我在末尾运行相同的代码并带有分号 它将按预期运行
  • 为什么我们不能检查react-native应用程序的样式属性?

    我想检查元素的颜色是否为白色 如下所示 if styles background white console log ok console log styles background white gt was false 1 为什么 1 返
  • DBMS_STANDARD 包的过程和/或函数是否应该在 PL/SQL 代码中使用?

    最近 我遇到了一个BEFORE INSERT OR UPDATE在桌子上触发 在这个触发器中 作者依赖于INSERTING and UPDATING函数 都返回一个BOOLEAN 的DBMS STANDARD包来确定触发器是在插入之前还是更
  • Typekit 脚本缓慢/无响应/卡住

    我在我的网站上安装了 typekit 通常在开头的 head 标签后面有两行 js 但加载字体非常慢 无响应 这可以通过刷新页面来完全解决 之后 typekit 字体完美地加载迅速地 但从用户的角度来看 他们永远不会知道要这样做 因此他们将