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 脚本缓慢/无响应/卡住 的相关文章

  • 使用 jquery 远程图像属性

    目前我正在尝试获取远程图像宽度 高度 我正在开发一个链接共享模块 就像当你在 Facebook 上粘贴链接时 你可以看到标题 描述和图像 所以我尝试使用 php getimagesize 来获取图像宽度 高度 但速度非常慢 所以我正在考虑使
  • 将鼠标悬停时的鼠标光标更改为锚状样式

    如果我将鼠标悬停在div鼠标光标将更改为 HTML 锚点中的光标 我怎样才能做到这一点 假设你的div has an id myDiv 将以下内容添加到您的 CSS 中 这cursor pointer指定光标应与用于锚点 超链接 的手形图标
  • 渲染货币和符号并与来自不同单元格的数据相结合

    我正在使用最新的 jQuery DataTables v1 10 7 我正在尝试将数字解析为以下格式 239 90 USD 我可以使用此命令使货币正常工作 columns data Price render fn dataTable ren
  • 是否存在 IsCallable 为 false 但 IsConstructor 为 true 的 JS 对象?

    ECMAScript 规范函数可调用 https www ecma international org ecma 262 6 0 index html sec iscallable当且仅当其参数具有 Call 内部方法时返回 true 它在
  • Chrome 中的性能问题

    我目前正在从事一个相对较大的项目 使用 AngularJs 构建 应用程序的一部分是一个表单 您可以向其中添加任意数量的页面 不幸的是 添加了很多不必要的垃圾 即表示表单模型的对象可能会变得非常大 在某些时候 Chrome 基本上无法处理它
  • 使用 JavaScript 禁用第三方 cookie

    我正在努力根据所有在欧盟运营的公司的数据保护规则实施新的 Cookie 政策合规性 根据该规则 用户在使用任何网站时必须能够拒绝 接受除必需的 Cookie 之外的所有内容 在我客户的网站中 我可以看到正在存储以下第三方 cookie ga
  • 隐藏 Div 的父级

    我只是想隐藏父divcomments section div class content content green div div div 我试过这个 document getElementById comments section pa
  • 有没有办法使用 Rspec/Capybara/Selenium 将 javascript console.errors 打印到终端?

    当我运行 rspec 时 是否可以让 capybara selenium 向 rspec 报告任何 javascript console errors 和其他异常 我有一大堆测试失败 但当我手动测试它时 我的应用程序正在运行 如果不知道仅在
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 如何纠正流警告:解构(缺少注释)

    我正在编写一个小型 React Native 应用程序 并且正在尝试使用 Flow 但我无法在任何地方真正获得有关它的正确教程 我不断收到错误 destructuring Missing annotation 有关 station 这段代码
  • Chrome 扩展程序在代码中使用 client_secret

    我正在开发具有自己的 oAuth 授权的 Google Chrome 扩展 当然 我必须使用 client id 和 client secret 作为请求令牌 有什么办法可以向用户隐藏这些数据吗 由于此请求只是 javascript 源代码
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • 有没有办法在 onclick 触发时禁用 iPad/iPhone 上的闪烁/闪烁?

    所以我有一个有 onclick 事件的区域 在常规浏览器上单击时 它不会显示任何视觉变化 但在 iPad iPhone 上单击时 它会闪烁 闪烁 有什么办法可以阻止它在 iPad iPhone 上执行此操作吗 这是一个与我正在做的类似的示例
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 如何使用 crypto-js 解密 AES ECB

    我正在尝试将加密数据从 flash 客户端 发送到服务器端的 javascript 在 asp 中作为 jscript 运行 有几个 javascript Aes 库 但它们实际上没有文档记录 我正在尝试使用 crypto js 但无法让代
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何确定所有角度2分量都已渲染?

    当所有 Angular2 组件完成渲染时 是否会触发一个角度事件 For jQuery 我们可以用 function 然而 对于 Angular2 当domready事件被触发 html 只包含角度组件标签 每个组件完成渲染后 domrea

随机推荐

  • 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 字体完美地加载迅速地 但从用户的角度来看 他们永远不会知道要这样做 因此他们将