如何在WordPress中异步入队加载jQuery？

嘿，针对PageSpeed要求异步加载WordPress内置jQuery的需求，我给你整理了两种靠谱的实现方式，都是基于WordPress官方API，不会乱改核心文件，安全又合规：

方法一：重新注册jQuery并添加async属性 #

直接在主题的functions.php里添加这段代码，它会先取消默认的jQuery加载，然后重新注册并加上async标记：

function async_load_wordpress_jquery() {
    // 取消默认的jQuery注册
    wp_deregister_script('jquery');
    
    // 重新注册WordPress内置的jQuery，添加async属性
    wp_register_script(
        'jquery',
        includes_url('/js/jquery/jquery.min.js'),
        array(), // 无依赖
        get_bloginfo('version'), // 使用WordPress版本对应的jQuery版本
        true // 加载在页脚（可选，进一步优化加载顺序）
    );
    
    // 注册时给脚本添加async属性的过滤器
    add_filter('script_loader_tag', function($tag, $handle) {
        if ($handle !== 'jquery') {
            return $tag;
        }
        return str_replace(' src', ' async="async" src', $tag);
    }, 10, 2);
    
    // 重新加载jQuery
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'async_load_wordpress_jquery');

为啥这么做？ #

• 用WordPress内置的jQuery文件，避免额外引入第三方资源，安全且兼容官方更新
• 页脚加载（true参数）+ async，双重优化加载性能
• 通过过滤器精准给jQuery添加async属性，不影响其他脚本

方法二：给现有jQuery脚本添加async属性（更温和） #

如果你不想取消默认的jQuery注册，只想给它加async，用这个过滤器方法更稳妥，不会打乱原有依赖链：

function add_async_to_jquery($tag, $handle) {
    if ($handle === 'jquery' || $handle === 'jquery-core' || $handle === 'jquery-migrate') {
        return str_replace(' src', ' async="async" src', $tag);
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_to_jquery', 10, 2);

注意事项：async可能引发的依赖问题 #

异步加载后，有些依赖jQuery的脚本（比如主题的自定义脚本、插件脚本）可能会因为jQuery还没加载完成就执行而报错。解决办法：

• 确保所有依赖jQuery的脚本都在注册时设置了'jquery'作为依赖项，比如：

  wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0', true);
  

• 对于内联脚本（比如主题里直接写的<script>），要包裹在DOM加载完成的事件里：

  document.addEventListener('DOMContentLoaded', function() {
      // 这里写依赖jQuery的代码
      $(document).ready(function() {
          // ...
      });
  });
  

最后测试 #

改完代码后，记得：

1. 清空WordPress缓存和浏览器缓存
2. 用PageSpeed Insights重新检测，确认jQuery已经是异步加载状态
3. 测试网站所有功能（菜单、表单、交互效果），确保没有因为异步加载导致的报错

内容的提问来源于stack exchange，提问作者Drobesz