WordPress博客中实现JavaScript脚本的延迟和异步加载教程

正文：

每次渲染页面时，WordPress 都会加载一系列外部引用的JavaScript。这些脚本包括 WordPress 添加的标准脚本，以及主题和插件使用 wp_enqueue_scripts函数添加的一些脚本。根据脚本的类型，它们可能位于页面的头部、正文或页脚部分。 然而，位于页面头部和主体部分的脚本可能会导致页面加载延迟，因为浏览器会在加载和执行这些脚本之前尝试加载页面内容。因此，这些脚本被称为渲染阻塞的 JavaScript。 解决这个问题的最直接方法是将所有脚本移动到页面的页脚。但如果这种方法不可行，可以考虑为这些脚本添加延迟或异步属性标记，即延迟加载或异步加载。 延迟加载属性（defer）确保脚本在页面的所有内容完成加载后才执行。异步加载属性（async）则确保脚本与页面的其他相关内容一起异步加载。 所有现代主流浏览器都支持这两个属性，包括 Firefox、Chrome 和 Internet Explorer。自从 IE10 以后，Internet Explorer 也已经添加了对这些属性的支持。 具有 async 和 defer 属性的脚本标记示例如下：

< script src='http://sitenam e.com/js/scripts.js' async='async' type='text/javascript'></ script>
< script src='http://sitenam e.com/js/scripts.js' defer='defer' type='text/javascript'></ script>

将“异步/延迟”属性添加到阻塞渲染脚本 在这个章节中，我们将介绍三种不同的方法，将这些属性添加到阻塞渲染 javascripts 中。

这些方法如下：

您可以根据自己的实际情况使用适合您的方法。 方法 1：向所有脚本添加延迟/异步属性。 如果您想毫无例外地将 async 或 defer 属性添加到所有脚本，则可以使用以下代码。 打开主题的functions.php页面，将此代码添加到页面底部。

/*function to add async to all scripts*/
function js_async_attr($tag){
# 添加异步加载属性到所有 js 脚本return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

注意：上面的函数会将 async 属性添加到所有脚本中。如果您想使用 defer 属性，请使用 defer＝“defer”替换 async＝“async”。 方法 2：向大部分脚本添加延迟/异步属性，部分例外。

上述方法为所有脚本添加了 async 或 defer 属性。如果您希望将这些属性添加到大部分脚本中，但有例外的，则可以使用以下代码：

/*function to add async to all scripts*/
function js_async_attr($tag){
# 不添加异步加载属性的例外列表（修改 js 文件名为你的网站 js 文件名） 
$scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js');
foreach($scripts_to_exclude as $exclude_script){
        if(true == strpos($tag, $exclude_script ) )
        return $tag;
}


# 添加异步加载属性到其余 js 文件
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

注意：如果您想使用 defer，请在上面的代码中使用 defer＝“defer”替换 async＝“async”。将 script-name1.js，script-name2.js 等替换为要排除的脚本的名称。
关于 WordPress 的脚本延时加载和异步加载技术的分享，到此结束，如果你对这一块还是有不了解的地方，欢迎留言交流。如果你觉得手动设置 WordPress 脚本文件的延迟加载或者异步加载属性比较麻烦，你也可以借助一些插件来实现。

转载请注明：汇站网 » WordPress 博客中实现 JavaScript 脚本的延迟和异步加载教程