WordPress加载JS文件是默认方式加载，并没有设置加载和执行顺序。defer一般是连接了很多js并且js有依赖关系时使用。
我举个简单的场景例子：
如果写一个bootstrap的前端，分别先后连接了jquery.min.js、boostrap.min.js、bootstrap-datepicker.min.js、all.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>
async、defer这两个如果你不太懂，可以查看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/
