Show Menu
主题×

异步部署

我们的产品需要提高 JavaScript 库的性能和对其进行无阻塞部署,这对于 Adobe Experience Cloud 用户而言越来越重要。诸如 Google PageSpeed 之类的工具建议用户更改他们在网站上部署 Adobe 库的方式。本文介绍了如何以异步方式使用 Adobe JavaScript 库。

同步与异步

同步部署

通常,库会在页面的 <head> 标记中同步加载。例如:
<script src="example.js"></script>

默认情况下,浏览器会解析文档并到达此行,然后开始从服务器获取 JavaScript 文件。接着,浏览器会等待文件返回,然后解析并执行 JavaScript 文件。最后,浏览器会继续解析 HTML 文档的其余部分。
如果解析器在渲染可见内容之前遇到 <script> 标记,则内容显示会出现延迟。在向用户显示内容时,如果所加载的 JavaScript 文件并非绝对必需,则不必要求访客等待内容显示。库越大,延迟时间越长。因此,Google PageSpeed 或 Lighthouse 等网站性能基准工具通常会标记同步加载的脚本。
如果要管理大量标记,Tag Management 库会快速增大。

异步部署

您可以通过向 <script> 标记添加 async 属性来异步加载任何库。例如:
<script src="example.js" async></script>

这可向浏览器指示,在解析此脚本标记时,浏览器应该开始加载 JavaScript 文件,但此时浏览器不是等待加载和执行库,而是应该继续解析并渲染文档的其余部分。

异步部署的注意事项

如上所述,在同步部署中,浏览器在加载和执行 Launch 库时会暂停解析和渲染页面。相反,在异步部署中,浏览器在加载库时会继续解析和渲染页面。必须考虑 Launch 库可能完成加载的时间相对于页面解析和渲染的可变性。
首先,因为 Launch 库可以在解析并执行页面底部之前或之后完成加载,所以您不应再从页面代码中调用 _satellite.pageBottom() (在库加载之后才可使用 _satellite )。 异步加载 Launch 嵌入代码 中对此进行了说明。
其次,Launch 库可在 DOMContentLoaded 浏览器事件(DOM 就绪)发生之前或之后完成加载。
由于这两点,因此在异步加载 Launch 库时,需要展示核心扩展中的 Library Loaded Page Bottom DOM Ready Window Loaded 事件类型如何运行。
假设 Launch 资产包含以下四个规则:
  • 规则 A:使用 Library Loaded 事件类型
  • 规则 B:使用 Page Bottom 事件类型
  • 规则 C:使用 DOM Ready 事件类型
  • 规则 D:使用 Window Loaded 事件类型
无论 Launch 库何时完成加载,都会保证执行所有规则,并且这些规则将按以下顺序执行:
规则 A → 规则 B → 规则 C → 规则 D
尽管始终强制按照此顺序执行,但某些规则可能会在 Launch 库完成加载时立即执行,而其他规则可能会在稍后执行。Launch 库完成加载时会发生以下情况:
  1. 立即执行规则 A。
  2. 如果 DOMContentLoaded 浏览器事件 (DOM Ready) 已经发生,则会立即执行规则 B 和规则 C。否则,规则 B 和规则 C 稍后在发生 DOMContentLoaded 浏览器事件时执行。
  3. 如果已发生 load 浏览器事件(已加载窗口),则会立即执行规则 D。否则,将在稍后发生 load 浏览器事件时执行规则 D。请注意,如果您已按照相关说明安装了 Launch 库,则 Launch 库​ 始终 ​会在 load 浏览器事件发生之前完成加载。
将这些原则应用于您自己的网站时,请考虑以下事项:
  • 使用 Library Loaded 事件类型的规则可能会在数据层完全加载之前执行。 ​这可能会导致执行规则的操作时缺少数据,因为页面上尚未提供数据。调整规则配置可减少这类问题。例如,您可以在数据层完成加载后立即使用由页面代码触发的 Custom Event 或 Direct Call 事件类型,而不是使用由 Library Loaded 事件类型触发的规则。
  • 异步加载库时,Page Bottom 事件类型不会特别提供值。 ​请改为考虑使用 Library Loaded、DOM Ready、Window Loaded 或其他事件类型。
如果您发现这些事件发生的顺序混乱,则可能需要处理一些计时问题。在进行需要精确计时的部署时,可能需要使用事件侦听器和 Custom Event 或 Direct Call 事件类型以确保进行更可靠且一致的实施。

异步加载 Launch 嵌入代码

配置 环境 时,Launch 会在创建嵌入代码时提供一个用于开启异步加载的切换开关。您还可以自行配置异步加载:
  1. <script> 标记中添加 async 属性以异步加载脚本。
    对于 Launch 嵌入代码,这表示将以下内容:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
    
    
    更改为以下内容:
    <script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
    
    
  2. 移除您之前可能在标记底部添加的任何代码:
    <script type="text/javascript">_satellite.pageBottom();</script>
    
    
    此代码用于告知 Launch,浏览器解析器已到达页面底部。由于在此之前可能未加载和执行 Launch,因此调用 _satellite.pageBottom() 会导致错误,并且 Page Bottom 事件类型可能无法按预期运行。