我们的产品需要提高 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 资产包含以下四个规则:
无论 Platform Launch 库何时完成加载,都会保证执行所有规则,并且这些规则将按以下顺序执行:
规则 A → 规则 B → 规则 C → 规则 D
尽管始终强制按照此顺序执行,但某些规则可能会在 Platform Launch 库完成加载时立即执行,而其他规则可能会在稍后执行。Platform Launch 库完成加载时会发生以下情况:
DOMContentLoaded
浏览器事件 (DOM Ready) 已经发生,则会立即执行规则 B 和规则 C。否则,规则 B 和规则 C 稍后在发生 DOMContentLoaded
浏览器事件时执行。load
浏览器事件(已加载窗口),则会立即执行规则 D。否则,将在稍后发生 load
浏览器事件时执行规则 D。请注意,如果您已按照相关说明安装了 Platform Launch 库,则 Platform Launch 库始终会在 load
浏览器事件发生之前完成加载。将这些原则应用于您自己的网站时,请考虑以下事项:
如果您发现这些事件发生的顺序混乱,则可能需要处理一些计时问题。在进行需要精确计时的部署时,可能需要使用事件侦听器和 Custom Event 或 Direct Call 事件类型以确保进行更可靠且一致的实施。
配置环境时,Platform Launch 会在创建嵌入代码时提供一个用于开启异步加载的切换开关。您还可以自行配置异步加载:
向 <script>
标记中添加 async 属性以异步加载脚本。
对于 Platform Launch 嵌入代码,这表示将以下内容:
<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js"></script>
更改为以下内容:
<script src="//www.yoururl.com/launch-EN1a3807879cfd4acdc492427deca6c74e.min.js" async></script>
移除您之前可能在标记底部添加的任何代码:
<script type="text/javascript">_satellite.pageBottom();</script>
此代码用于告知 Platform Launch,浏览器解析器已到达页面底部。由于在此之前可能未加载和执行 Platform Launch,因此调用 _satellite.pageBottom()
会导致错误,并且 Page Bottom 事件类型可能无法按预期运行。