如何使用 defer 或 async 延迟加载 WordPress JavaScript 代码以提高页面加载速度？

在 WordPress 网站中，JavaScript 的使用很普遍。然而，如果不小心处理脚本的加载顺序，可能会导致页面加载时间变慢。为了优化网站性能，可以使用 defer 或 async 属性来延迟 JavaScript 代码的加载。

defer 和 async 属性

defer 和 async 属性是 HTML5 中引入的两个属性，用于控制脚本的加载方式。

defer 属性

defer 属性告诉浏览器该脚本将被延迟到文档完成解析后再执行。这意味着脚本将按照它们在 HTML 中出现的顺序进行下载，但是不会阻止文档的解析和渲染。

async 属性

async 属性告诉浏览器此脚本将异步地下载和执行，也就是说当脚本可用时会立即下载并执行，不会阻碍其他页面操作。但是，脚本的执行顺序可能会受到下载速度等因素的影响。

如何使用 defer 或 async 属性加载 WordPress JavaScript？

下面是一个示例，在 WordPress 网站中加载 jQuery 库的方法。请注意，这只是一种通用的方法，其他 JavaScript 脚本的加载可能需要适当的修改。

function my_scripts() {
    // 加载 jQuery 库
    wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-3.6.0.min.js', array(), null, true );
      
    // 加载其他 JavaScript 脚本
    wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/js/my-script.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

在上述示例中，我们使用 wp_enqueue_script() 函数来加载 jQuery 库和其他 JavaScript 脚本。该函数有五个参数：

1. $handle - 脚本的唯一标识符。
2. $src - 脚本的 URL。
3. $deps - 脚本所依赖的其他脚本。
4. $ver - 脚本版本号。
5. $in_footer - 布尔值，指示脚本是否应该放在 HTML 文档的底部。

注意，在上述示例代码中，我们将最后一个参数 $in_footer 设置为 true，这意味着脚本将在文档解析完成后被加载。但是，这并不保证脚本的执行顺序。为了确保脚本以正确的顺序加载，我们需要进一步修改代码。

如果我们希望 jQuery 库尽可能晚地被加载，可以使用 defer 或 async 属性。例如，下面是使用 defer 属性加载 jQuery 库的示例代码：

-- -------------------- ---- -------
-------- ------------ -
   -- -- ------ -
   ------------------ --------- ---------------------------------------- -------- ----- ---- --
   ------------------- --------- -------- ---- --
      
   -- ---- ---------- --
   ------------------ ------------ ------------------------------ - ------------------- -------- ----- ---- --
-
----------- --------------------- ------------ --

在上面的示例代码中，我们使用 wp_script_add_data() 函数将 defer 属性添加到 jQuery 库的标签中。这意味着该脚本将被延迟到文档完成解析后再执行。

如果我们希望 jQuery 库尽可能快地被加载并执行，可以使用 async 属性。例如，下面是使用 async 属性加载 jQuery 库的示例代码：

function my_scripts() {
   // 加载 jQuery 库
   wp_enqueue_script( 'jquery', '//code

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/26424) ，转载请注明来源
[https://www.javascriptcn.com/post/26424](https://www.javascriptcn.com/post/26424)