如何让WordPress延迟加载JavaScript加速页面渲染？

原文链接：https://www.chenweiliang.com/cwl-954.html

文章目录

• 1 什么是JavaScript的Defer属性？
• 2 将Defer属性添加到WordPress中使用的脚本

WordPress延迟加载JavaScript，来加速页面渲染方法。

什么是JavaScript的Defer属性？

每个人都可能遇到过这种情况：

head中有N个脚本，在加载脚本时，会阻塞页面渲染，这通常是空白的。

当然，我们可以将源代码中的脚本放入页脚来解决这个问题。

但是，一些复杂的开发环境，会让这个简单的工作变成特别复杂。

此时我们可以使用Defer属性，这是JavaScript中相对少见的属性。

你可能永远不会使用它，但我相信在阅读这篇介绍后，我相信你不会离开它。

它的主要功能是让脚本在加载整个页面后再解析，而不是在加载时解析它，这为仅包含事件触发的JavaScript的脚本提供了完整的页面加载速度。

是的，如果Script脚本标记具有延迟defer属性，即使它被放置在head中，它也会在解析HTML页面后执行，这类似于将Script脚本放在页面底部。

当然，延迟的使用也是有限的，通常要注意2点：

1）不要在延迟defer类型脚本块中，调用 document.write 命令；

• 因为 document.write 将产生直接输出效果。

2）不要在Defer脚本中，包括任何立即执行脚本，将使用全局变量或函数。

将Defer属性添加到WordPress中使用的脚本

在WordPress中，我们如何自动将Defer属性添加到WordPress使用的脚本？

我们可以将以下代码添加到当前主题的functions.php文件中 ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url )
if(strpos($url, '.js') === false)
return $url;


return "$url' defer='defer";
;

• 请注意：上述代码仅适用于，根据WordPress方式引入的JavaScript代码才会有效。

欢迎转载《如何让WordPress延迟加载JavaScript加速页面渲染？》
陈沩亮版权所有，转载请注明出处链接：https://www.chenweiliang.com/cwl-954.html


网站地址：https://www.chenweiliang.com/



欲学更多秘技，请关注微信公众号：cwlboke