WordPress博客JavaScript脚本延迟和异步加载教程

每次呈现页面时，WordPress都会加载一系列外部引用的JavaScript。

其中包括WordPress添加的标准脚本和一些主题和插件使用wp_enqueue_scripts函数添加的脚本。根据脚本的类型，它可能位于网页的页眉、正文或页脚。

位于页面标题和正文中的脚本可能会导致页面加载延迟，因为浏览器甚至会在页面内容之前尝试加载和执行这些脚本。

这就是为什么这些脚本被称为渲染阻塞javascripts。

解决这个问题最直接的方法就是把所有的脚本都移到页面的页脚，但是如果这个方法不可行，可以考虑给这些脚本添加延迟或者异步的属性标签，也就是我们常说的延迟加载和异步加载。

让我们深入了解一下这些属性，以及它们如何帮助您改善页面加载时间。

什么是异步和延迟属性？

以下是async和defer属性的功能:

Async属性:Async属性是异步加载脚本。换句话说，确保脚本与页面的其他相关内容异步加载。

Delay属性:Delay属性是延迟加载脚本。它确保只有在页面的所有内容都加载完毕后才执行脚本。

所有现代主流浏览器都支持这两种属性，包括Firefox、Chrome和Internet Explorer。从IE10开始，Internet Explorer也增加了对这些属性的支持。

具有async和defer属性的脚本标记示例如下:

将异步/延迟属性添加到阻塞呈现脚本中。

在本章中，我们将介绍三种不同的方法来将这些属性添加到阻塞渲染javascripts中。这些方法如下:

1:向所有脚本添加延迟/异步。

2:除了一些例外，为大多数脚本添加延迟/异步。

方法3:仅向选择性脚本添加延迟/异步。(最灵活的方法，因为它允许根据本地条件向脚本添加延迟或异步属性。)

可以根据自己的实际情况使用适合自己的方法。

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 );

注意:如果要使用defender，请将上面代码中的async =”async “替换为defender =” defender “。

替换script-name1.js、script-name2.js等。排除脚本的名称。如果不知道如何找到脚本名，请参考下面的方法3。

方法3:仅向可选脚本添加延迟/异步属性。

根据脚本及其功能，您可能希望延迟或异步加载它们。

如前所述，延迟脚本仅在页面完全加载后执行，因此，如果您的脚本需要在页面加载期间执行，异步属性更合适。

考虑到这一点，下面的函数将允许您向选择性脚本添加延迟或异步属性。

让我们看看如何实现它:

步骤1:第一步是找到并列出所有要添加延迟或异步属性的阻塞渲染脚本。

您可以使用Google Page Speed工具或类似GTmetrix.com的工具来检测这些脚本。

访问这些工具中的任何一个，输入任何页面的URL，然后单击分析。稍等一下，阻止加载的javascript就会列出来。

还有一种方法是检查网页的HTML源代码，然后用“查找”(CTRL+F)查找全部。js文件。

第二步:第二步，找到所有需要添加延迟或异步属性的脚本的脚本名。

你可以通过使用Google PageSpeed insights来做到这一点。

只需在“删除将阻止内容呈现的JavaScript”一节下检查您的脚本。您可以使用脚本的名称作为唯一的名称。

脚本示例:

‘https://sitename.com/wp-content/plugins/thrive/js/compat.min.js?ver=1.500.18

那么上述脚本的惟一名称就是compat.min.js .

可以参考下面Google PageSpeed insights分析的截图进一步了解:

您也可以通过检查网站的HTML源代码来找到脚本名称:

为此，只需在浏览器中打开博客的页面，检查该页面的HTML源代码(可以通过“CTRL+U”检查页面的HTML源代码)。然后，使用浏览器的搜索功能(CTRL+F)并搜索关键字，脚本类型=’text/javascript ‘，就可以查看所有脚本文件。(见下图)

只需复制标记脚本的名称作为延迟或异步加载属性的脚本名称。

步骤3:打开主题的functions.php文件，并将下面的代码添加到文件的末尾。

$scripts_to_defer变量需要包含所有要延迟的脚本名，而$scripts_to_async变量需要包含所有要延迟的脚本名。确保使用脚本名称编辑代码。

/*function to add async and defer attributes*/ function defer_js_async($tag){ ## 2: 延时加载js列表.  (将js名称改为你的js名称) $scripts_to_defer = array(‘script-name1.js’, ‘script-name2.js’, ‘script-name3.js’); ## 2: 异步加载js列表.  (将js名称改为你的js名称) $scripts_to_async = array(‘script-name1.js’, ‘script-name2.js’, ‘script-name3.js’); #defer scripts foreach($scripts_to_defer as $defer_script){ if(true == strpos($tag, $defer_script ) ) return str_replace( ‘src’, ‘ defer=”defer” src’, $tag ); } #async scripts foreach($scripts_to_async as $async_script){ if(true == strpos($tag, $async_script ) ) return str_replace( ‘src’, ‘ async=”async” src’, $tag ); } return $tag; } add_filter( ‘script_loader_tag’, ‘defer_js_async’, 10 );

代码描述:这个函数通过向WordPress的script_loader_tag添加一个过滤器来为script标签添加defer或async属性。

我们首先在数组中保存需要使用延迟和异步的脚本的唯一名称，然后使用foreach循环来运行这些数组。每次循环运行时，它都会尝试使用strpos(字符串位置)函数来查找脚本标记中唯一文件名的位置。如果strpos函数返回TRUE(表示在脚本标记中找到了唯一的字符串位置)，则使用PHP的str_replace函数添加defer或async属性。如果没有，标签将被返回，不做任何修改。

操作示例:

假设您想要将延迟属性添加到以下脚本中:

并将async属性添加到以下脚本中:

标识前两个脚本的唯一名称是:contact-form-7和powerpress/player.min.js。标识后两个脚本的唯一名称是:comment-reply.min.js和twentytwenty/js/navigation.js。

获得这些脚本的名称后，可以安装相应的位置，并将它们添加到上面的代码中，如下所示:

## 1: 延时加载js列表. $scripts_to_defer = array(‘contact-form-7’, ‘powerpress/player.min.js’); ## 2: 异步加载js列表. $scripts_to_async = array(‘twentytwelve/js/navigation.js’, ‘comment-reply.min.js’);

注意:确保用单引号将脚本名括起来，并用逗号分隔。您可以使用此方法添加任意数量的名称。

如果您没有任何脚本来延迟加载，那么您可以将它们保存为空白色数组，如下所示，反之亦然:

## 1: 延时加载js列表. $scripts_to_defer = array(); ## 2: 异步加载js列表. $scripts_to_async = array(‘twentytwelve/js/navigation.js’, ‘comment-reply.min.js’);

WordPress脚本延迟加载和异步加载技术的分享到此结束。如果你还是对这一块一无所知，请留言。如果你觉得手动设置WordPress脚本文件的延迟加载或异步加载属性很麻烦，也可以借助一些插件来完成。在这方面，关于如何实现Google PageSpeed Insights测试满分/100去除块化渲染，在资源章节有详细的解释。

如果想了解图片或视频的懒加载技术，可以阅读《如何在WordPress中实现图片和视频的懒加载》进行深入了解。