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

作者 : 去看你博客 本文共2031个字,预计阅读时间需要6分钟 发布时间: 2019-08-24 共316人阅读

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

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

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

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

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

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

什么是异步和延迟属性?

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

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

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

具有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中。 这些方法如下:

  • 方法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 );

 

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

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

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

1. 本站付费资源来源于网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
去看你博客 » WordPress博客JavaScript脚本延迟和异步加载教程

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
评论后隐藏内容依旧不可见怎么办?
首次在本站评论需要经过审核通过后才可显示,为了您的评论能尽快通过审核请勿恶意评论,评论通过后会在第一时间通过邮件的方式发送到您在本站的注册邮箱内!
下载后无法正常运行如何提供售后支持?
每一个程序都经过严格的测试后发布上线,99%的问题都是安装方法错误或环境缺少扩展导致。普通用户不提供技术售后(可进行留言,我们收到之后尽可能去解答,但不保证马上解决),会员用户可随时随地享受优质的售后技术支持与问题解答。更多说明请参考 VIP介绍。

发表评论