WordPress博客中实现JavaScript脚本的延迟和异步加载教程 - 汇站网

WordPress博客中实现JavaScript脚本的延迟和异步加载教程

2023-12-21 0 949

正文:

每次渲染页面时,WordPress 都会加载一系列外部引用的JavaScript。这些脚本包括 WordPress 添加的标准脚本,以及主题和插件使用 wp_enqueue_scripts函数添加的一些脚本。根据脚本的类型,它们可能位于页面的头部、正文或页脚部分。 然而,位于页面头部和主体部分的脚本可能会导致页面加载延迟,因为浏览器会在加载和执行这些脚本之前尝试加载页面内容。因此,这些脚本被称为渲染阻塞的 JavaScript。 解决这个问题的最直接方法是将所有脚本移动到页面的页脚。但如果这种方法不可行,可以考虑为这些脚本添加延迟或异步属性标记,即延迟加载或异步加载。 延迟加载属性(defer)确保脚本在页面的所有内容完成加载后才执行。异步加载属性(async)则确保脚本与页面的其他相关内容一起异步加载。 所有现代主流浏览器都支持这两个属性,包括 Firefox、Chrome 和 Internet Explorer。自从 IE10 以后,Internet Explorer 也已经添加了对这些属性的支持。 具有 async 和 defer 属性的脚本标记示例如下:

< script src='http://sitenam e.com/js/scripts.js' async='async' type='text/javascript'></ script>
< script src='http://sitenam e.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 脚本文件的延迟加载或者异步加载属性比较麻烦,你也可以借助一些插件来实现。

转载请注明:汇站网 » WordPress 博客中实现 JavaScript 脚本的延迟和异步加载教程

收藏 (0)

微信扫一扫

支付宝扫一扫

点赞 (0)

感谢您的来访,获取更多精彩资源请收藏本站。

本站声明

本资源仅用于个人学习和研究使用,禁止用于任何商业环境!

 1.  本网站名称:汇站网
 2.  本站永久网址:https://www.huizhanii.com/
 3.  本站所有资源来源于网友投稿和高价购买,所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习,本站不提供任何技术服务!
 4.  未经原版权作者许可,禁止用于任何商业环境,任何人不得擅作它用,下载者不得用于违反国家法律,否则发生的一切法律后果自行承担!
 5.  为尊重作者版权,请在下载24小时内删除!请购买原版授权作品,支持你喜欢的作者,谢谢!
 6.  若资源侵犯了您的合法权益, 请持您的版权证书和相关原作品信息来信通知我们请来信     通知我们我们会及时删除,给您带来的不便,我们深表歉意!
 7.  如下载链接失效、广告或者压缩包问题请联系站长处理!
 8.  如果你也有好源码或者教程,可以发布到网站,分享有金币奖励和额外收入!
 9.  本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
 10.  因源码具有可复制性,一经赞助 ,不得以任何形式退款。
 11.  更多详情请点击查看

汇站网 WordPress教程 WordPress博客中实现JavaScript脚本的延迟和异步加载教程 https://www.huizhanii.com/34139.html

汇站

站长资源下载中心-找源码上汇站

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

发表评论
暂无评论
  随机评论 表情开关按钮图片
表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情表情
登录后评论
联系官方客服

为您解决烦忧 - 24小时在线 专业服务

(汇站网)一个专注站长资源的平台网站,提供最新的网站模板和整站源码,内容包含各类精品网页模板,企业网站模板,网站模板,DIV+CSS模板,织梦模板,帝国cms模板,discuz模板,wordpress模板,个人博客论坛模板,上千种免费网页模板下载尽在汇站网.找源码上汇站.huizhanii.com