如何在WordPress中延迟JavaScript解析（4种方法）

图形解释异步与延迟

Varvy的Patrick Sexton推荐的另一种选择是，仅在初始页面加载完成后才使用脚本调用外部JavaScript文件。这意味着在初始页面加载完成之前，访问者的浏览器不会下载或执行任何JavaScript。

最后，您将看到的另一种方法是将JavaScript移动到页面底部。但是，这种方法并不是一个很好的解决方案，因为即使您的页面将很快可见，访问者的浏览器仍会将页面显示为正在加载，直到所有脚本完成。这可能会阻止一些访问者与您的页面进行交互，因为他们认为内容没有完全加载。

如何在WordPress中延迟JavaScript解析（4 种方法）

要在WordPress中延迟JavaScript的解析，您可以采取三种主要途径：

Async JavaScript是来自Frank Goossens的免费WordPress插件，他是流行的Autoptimize插件背后的同一个人。

它为您提供了一种使用异步或延迟延迟解析JavaScript的简单方法。

首先，您可以从WordPress.org安装并激活免费插件。然后，转到设置 → Async JavaScript以配置插件。

在顶部，您可以启用插件的功能并在异步和延迟之间进行选择。记住：
- Async下载JavaScript，同时仍解析HTML ，但随后暂停HTML解析以执行 JavaScript。
- Defer在仍然解析HTML的同时下载JavaScript并等待执行它，直到HTML解析完成。
如何使用异步JavaScript插件

再往下，你还可以选择如何处理jQuery。许多主题和插件严重依赖jQuery，因此如果您尝试推迟解析jQuery脚本，您可能会破坏您网站的一些核心功能。最安全的方法是排除jQuery，但您可以尝试推迟它。只要确保彻底测试您的网站。

再往下，您还可以手动包含或排除特定的脚本被延迟，包括一个很好的用户友好功能，让您可以定位在您的网站上活跃的特定主题或插件：

异步JavaScript包含/排除规则

2.使用WP Rocket插件

除了一堆其他性能优化技术外，WP Rocket还可以帮助您在WP Rocket仪表盘的“File Optimization”选项卡中延迟JavaScript的解析。在JavaScript Files部分中查找Load JavaScript deferred选项。

与Async JavaScript插件一样，WP Rocket还允许您排除jQuery以避免网站内容出现问题：

如何使用WP Rocket延迟解析JavaScript

3. 使用Varvy推荐的方法（代码）

早些时候，我们提到Varvy的Patrick Sexton建议使用一个代码片段，该代码片段会等待下载和执行JavaScript，直到您的网站完成初始页面加载。

您可以通过调整Varvy提供的代码片段，然后将脚本添加到您的主题中，紧接在结束</body>标记之前来实现此方法。

这是来自Varvy的代码：
```
<script type=\"text/javascript\">
function downloadJSAtOnload() {
var element = document.createElement(\"script\");
element.src = \"defer.js\";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(\"load\", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(\"onload\", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
```
确保将“defer.js”替换为您要延迟的JavaScript文件的实际文件名/路径。然后，您可以使用wp_footer钩子通过子主题的functions.php文件注入代码。

使用这种方法，您可以将Varvy的代码包装成这样：
```
/**
Defer parsing of JavaScript with code snippet from Varvy
*/
add_action( \'wp_footer\', \'my_footer_scripts\' );
function my_footer_scripts(){
?>
REPLACE_WITH_VARVY_SCRIPT
<?php
}
```
4.通过functions.php文件延迟JavaScript

最后，您还可以通过将以下代码片段添加到您的functions.php文件中，将defer属性添加到您的JavaScript文件中，而无需插件：
```
function defer_parsing_of_js( $url ) {
if ( is_user_logged_in() ) return $url; //don\'t break WP Admin
if ( FALSE === strpos( $url, \'.js\' ) ) return $url;
if ( strpos( $url, \'jquery.js\' ) ) return $url;
return str_replace( \' src\', \' defer src\', $url );
}
add_filter( \'script_loader_tag\', \'defer_parsing_of_js\', 10 );
```
本质上，这个片段告诉WordPress将defer属性添加到除jQuery之外的所有JavaScript文件。

它既快速又简单，但它并没有像Async JavaScript插件提供的那样为您提供细粒度的控制。

小结

推迟WordPress网站上的JavaScript解析是一个重要的性能考虑因素。

一旦您使用上述方法之一来延迟WordPress中的JavaScript解析，我们建议您做两件事：
1. 测试您的网站以确保推迟某些脚本不会破坏首屏内容的关键。同样，这通常发生在jQuery中，这就是为什么很多工具允许您排除jQuery.js。但是，它也可能发生在其他脚本中。
2. 再次通过GTmetrix运行您的站点，以确保您的站点延迟了尽可能多的脚本（如果排除jQuery，您可能无法获得完美的分数——但您的分数应该会更好）。