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/