WordPress script defer

WordPress加载JS文件是默认方式加载,并没有设置加载和执行顺序。defer一般是连接了很多js并且js有依赖关系时使用。

script
script

我举个简单的场景例子:

如果写一个bootstrap的前端,分别先后连接了jquery.min.jsboostrap.min.jsbootstrap-datepicker.min.jsall.min.js,datepicker的配置js放在all.min.js中的。

源:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.min.js"></script>
<script src="dist/js/all.min.js"></script>

有时候你会发现页面中的datepicker无法使用,原因是all.min.js中datepicker方法依赖bootstrap-datepicker,bootstrap-datepicker依赖boostrap,boostrap依赖jquery。如果不设置defer属性就有可能出现这种情况。

现:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-datepicker.min.js" defer></script>
<script src="dist/js/all.min.js" defer></script>

asyncdefer这两个如果你不太懂,可以查看MDN上面的文章或者查考这篇文章。

怎么给WordPress中的script加上defer

function defer_parsing_of_js ( $url ) {
  if ( FALSE === strpos( $url, '.js' ) ) return $url;
  if ( strpos( $url, 'jquery.min.js' ) ) return $url;
  return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

上面代码方法比较简单,还有很多其他方法可以参考:
https://www.hostinger.com/tutorials/wordpress/how-to-defer-parsing-of-javascript-in-wordpress
https://wpshout.com/defer-parsing-javascript-wordpress/
https://wordpress.org/plugins/shins-pageload-magic/
https://wpengine.com/resources/defer-parsing-javascript-wordpress/

发表回复

您的电子邮箱地址不会被公开。