软件库

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

站长小智

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

这些包括由WordPress添加的标准脚本以及由使用wp_enqueue_scripts函数的主题和插件添加的一些脚本。 根据脚本的类型，它可能位于网页的头部，正文或页脚部分。

位于页面头部和主体部分内的脚本可能会导致页面加载延迟，因为浏览器甚至在页面内容之前尝试加载和执行这些脚本。

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

解决此问题的最直接的方法是将所有脚本移动到页面的页脚，但如果这种办法不可行，则可以考虑为这些脚本添加延迟或异步属性标记，就是我们常常挂在挂在嘴边的延迟加载、异步加载。

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

什么是异步和延迟属性？

以下是async和defer属性的作用：

所有现代主流浏览器都支持这两个属性，包括Firefox，Chrome和Internet Explorer。 自IE10以来，Internet Explorer也已经添加了对这些属性的支持。

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

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

 

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

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

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

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

如果您想毫无例外地将async或defer属性添加到所有脚本，则可以使用以下代码。

打开主题的functions.php页面，将此代码添加到页面底部。

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

 

注意：上面的函数会将async属性添加到所有脚本中。 如果您想使用defer属性，请使用defer =“defer”替换async =“async”。

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

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

  1. /*function to add async to all scripts*/
  2. function js_async_attr($tag){
  3. # 不添加异步加载属性的例外列表（修改js文件名为你的网站js文件名）
  4. $scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js');
  5. foreach($scripts_to_exclude as $exclude_script){
  6. if(true == strpos($tag, $exclude_script ) )
  7. return $tag;
  8. }
  11. # 添加异步加载属性到其余js文件
  12. return str_replace( ' src', ' async="async" src', $tag );
  13. }
  14. add_filter( 'script_loader_tag', 'js_async_attr', 10 );

 

注意：如果您想使用defer，请在上面的代码中使用defer =“defer”替换async =“async”。

将script-name1.js，script-name2.js等替换为要排除的脚本的名称。

关于WordPress的脚本延时加载和异步加载技术的分享，到此结束，如果你对这一块还是有不了解的地方，欢迎留言交流。如果你觉得手动设置WordPress脚本文件的延迟加载或者异步加载属性比较麻烦，你也可以借助一些插件来实现。

退出移动版