异步部署

我们的产品需要提高 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 文件，但此时浏览器不是等待加载和执行库，而是应该继续解析并渲染文档的其余部分。

异步部署的注意事项

如上所述，在同步部署中，浏览器在加载和执行 Adobe Experience Platform Launch 库时会暂停解析和渲染页面。相反，在异步部署中，浏览器在加载库时会继续解析和渲染页面。必须考虑 Platform Launch 库可能完成加载的时间相对于页面解析和渲染的可变性。

首先，因为 Platform Launch 库可以在解析并执行页面底部之前或之后完成加载，所以您不应再从页面代码中调用 _satellite.pageBottom()（在库加载之后才可使用 _satellite）。异步加载 Platform Launch 嵌入代码中对此进行了说明。

其次，Platform Launch 库可在 DOMContentLoaded 浏览器事件（DOM 就绪）发生之前或之后完成加载。

由于这两点，因此在异步加载 Platform Launch 库时，需要展示核心扩展中的 Library Loaded、Page Bottom、DOM Ready 和 Window Loaded 事件类型如何运行。

假设 Platform Launch 资产包含以下四个规则：

规则 A：使用 Library Loaded 事件类型
规则 B：使用 Page Bottom 事件类型
规则 C：使用 DOM Ready 事件类型
规则 D：使用 Window Loaded 事件类型

无论 Platform Launch 库何时完成加载，都会保证执行所有规则，并且这些规则将按以下顺序执行：

规则 A → 规则 B → 规则 C → 规则 D

尽管始终强制按照此顺序执行，但某些规则可能会在 Platform Launch 库完成加载时立即执行，而其他规则可能会在稍后执行。Platform Launch 库完成加载时会发生以下情况：

立即执行规则 A。
如果 DOMContentLoaded 浏览器事件 (DOM Ready) 已经发生，则会立即执行规则 B 和规则 C。否则，规则 B 和规则 C 稍后在发生 DOMContentLoaded 浏览器事件时执行。
如果已发生 load 浏览器事件（已加载窗口），则会立即执行规则 D。否则，将在稍后发生 load 浏览器事件时执行规则 D。请注意，如果您已按照相关说明安装了 Platform Launch 库，则 Platform Launch 库始终会在 load 浏览器事件发生之前完成加载。

将这些原则应用于您自己的网站时，请考虑以下事项：

使用 Library Loaded 事件类型的规则可能会在数据层完全加载之前执行。这可能会导致执行规则的操作时缺少数据，因为页面上尚未提供数据。调整规则配置可减少这类问题。例如，您可以在数据层完成加载后立即使用由页面代码触发的 Custom Event 或 Direct Call 事件类型，而不是使用由 Library Loaded 事件类型触发的规则。
异步加载库时，Page Bottom 事件类型不会特别提供值。请改为考虑使用 Library Loaded、DOM Ready、Window Loaded 或其他事件类型。

如果您发现这些事件发生的顺序混乱，则可能需要处理一些计时问题。在进行需要精确计时的部署时，可能需要使用事件侦听器和 Custom Event 或 Direct Call 事件类型以确保进行更可靠且一致的实施。

异步加载 Platform Launch 嵌入代码

配置环境时，Platform Launch 会在创建嵌入代码时提供一个用于开启异步加载的切换开关。您还可以自行配置异步加载：

向 <script> 标记中添加 async 属性以异步加载脚本。

对于 Platform Launch 嵌入代码，这表示将以下内容：

<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js?lang=zh-Hans"></script>

更改为以下内容：

<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js?lang=zh-Hans" async></script>

移除您之前可能在标记底部添加的任何代码：
```
<script type="text/javascript">_satellite.pageBottom();</script>
```
此代码用于告知 Platform Launch，浏览器解析器已到达页面底部。由于在此之前可能未加载和执行 Platform Launch，因此调用 _satellite.pageBottom() 会导致错误，并且 Page Bottom 事件类型可能无法按预期运行。