WordPress异步加载和延迟加载js教程

渲染阻塞javascripts

这些包括由WordPress添加的标准脚本以及由使用wp_enqueue_scripts函数的主题和插件添加的一些脚本。 根据脚本的类型，它可能位于网页的头部，正文或页脚部分。位于页面头部和主体部分内的脚本可能会导致页面加载延迟，因为浏览器甚至在页面内容之前尝试加载和执行这些脚本。这些脚本被称为渲染阻塞javascripts。

什么是异步和延迟属性？

以下是async和defer属性的作用：文章源自玩技e族-https://www.playezu.com/114249.html

• 异步属性：async属性即异步加载脚本。 换句话说，确保脚本与页面的其他相关内容一起异步加载。
• 延迟属性：延迟属性即延迟加载脚本。 它确保仅在页面的所有内容完成加载后才执行脚本。

所有现代主流浏览器都支持这两个属性，包括Firefox，Chrome和Internet Explorer。 自IE10以来，Internet Explorer也已经添加了对这些属性的支持。文章源自玩技e族-https://www.playezu.com/114249.html

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

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

将“异步/延迟”属性添加到阻塞渲染脚本

在这个章节中，我们将介绍三种不同的方法，将这些属性添加到阻塞渲染javascripts中。 这些方法如下：文章源自玩技e族-https://www.playezu.com/114249.html

• 方法1：向所有脚本添加延迟/异步。
• 方法2：向大部分脚本添加延迟/异步，部分例外。
• 方法3：仅向选择性脚本添加延迟/异步。 （最灵活的方法，因为它允许因地制宜地为脚本添加延迟或者异步属性。）

您可以根据自己的实际情况使用适合您的方法。文章源自玩技e族-https://www.playezu.com/114249.html

方法1：向所有脚本添加延迟/异步属性。

如果您想毫无例外地将async或defer属性添加到所有脚本，则可以使用以下代码。文章源自玩技e族-https://www.playezu.com/114249.html

打开主题的functions.php页面，将此代码添加到页面底部。文章源自玩技e族-https://www.playezu.com/114249.html

/*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 );<code>
</code>

方法2：向大部分脚本添加延迟/异步属性，部分例外。

/*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 );<code>
</code>

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

步骤1：第一步是查找并列出要添加defer或async属性的所有阻塞渲染脚本的列表。文章源自玩技e族-https://www.playezu.com/114249.html

你可以使用Google Page Speed Tool或类似GTmetrix.com的工具来检测这些脚本。文章源自玩技e族-https://www.playezu.com/114249.html

访问这些工具中的任何一个，并输入任意一个页面的URL，然后单击“Analyze”。 稍等片刻，即会列出阻塞加载的javascript。文章源自玩技e族-https://www.playezu.com/114249.html

另一种方法是检查网页的HTML源代码，然后使用“查找”（CTRL + F）查找所有.js文件。文章源自玩技e族-https://www.playezu.com/114249.html

步骤2：第二步是找到需要添加延迟或异步属性的所有脚本的脚本名称。

您可以使用Google PageSpeed insights完成此操作。

只需在“移除会阻止内容呈现的 JavaScript”部分下检查您的脚本。 您可以使用脚本的名称作为唯一名称，让后将这些脚本名称在步骤3中找到。

步骤3：您还可以通过检查网站的HTML源代码来查找脚本名称：

要执行此操作，只需在浏览器中打开博客的页面并检查此页面的HTML源代码（您可以通过“CTRL + U”查看页面的HTML源代码）。 然后，使用浏览器的查找功能（CTRL + F）并搜索关键字，script type=’text/javascript’，即可查看所有脚本文件。

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

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

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

操作示例：

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

<script src='http://sitename.c/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.1.2'></script> 
<script src='http://sitename.c/wp-content/plugins/powerpress/player.min.js?ver=1429646074'></script>

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

<script src='http://sitename.com/wp-includes/js/comment-reply.min.js?ver=4.2'></script> 
<script src='http://sitename.c/wp-content/themes/twentytwelve/js/navigation.js?ver=20140711'></script>

标识前两个脚本的唯一名称是：contact-form-7和powerpress/player.min.js。 标识后两个脚本的唯一名称是：comment-reply.min.js和twentytwelve/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');