什么是异步加载

默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。

异步加载就是当浏览器加载到需要异步加载的内容时直接忽略,直到页面其他内容加载完成之后在做加载该内容

js异步加载原理

利用特定的异步加载的属性让浏览器识别并处理,最终实现异步加载的效果,今天给大家介绍两种常用的异步加载属性以及用法,这种方法不局限于wordpress,只不过后面我会教大家用WP过滤器的方式把这个功能集成到主题中非常方便。

1、defer,只支持IE
defer 属性规定是否对脚本执行进行延迟,直到页面加载为止。

用法:


//没有设置异步加载的js引入
<script type='text/javascript' src='js/javascript.js?ver=1.3'></script>
//添加defer="defer" 属性实现js异步加载
<script type='text/javascript' src='js/javascript.js?ver=1.3' defer='defer'></script>
//利用defer="defer" 属性异步加载javascript
<script type='text/javascript' src='js/javascript.js?ver=1.3' defer='defer'></script>

2、async,html5属性
如果你的浏览器支持html5并且你的网页也是html5协议那么async 属性便可用会异步执行。现在html5已经普及而且老版本的浏览器也可以通过html5.js实现html5的支持,所以推荐使用这个属性来实现异步加载功能。

用法:


//没有设置异步加载的js引入
<script type='text/javascript' src='js/javascript.js?ver=1.3'></script>
//添加async="async" 属性实现js异步加载
<script type='text/javascript' src='js/javascript.js?ver=1.3' async='async'></script>
//利用defer="defer" 属性异步加载javascript
<script type='text/javascript' src='js/javascript.js?ver=1.3' async='async'></script>

WP实现异步加载

大家都是在wordpress的过滤器非常强大几乎可以实现大多数需求,今天分享的异步加载的功能也可以通过wp过滤器的方式实现,只需在主题functions.php中添加下面的代码即可:


/**
代码功能:实现js异步加载
**/
add_filter( 'clean_url', 'chenxing_async_script',11,1);
function chenxing_async_script( $url ){
    if(strpos($url, '.js') === false){
        return $url;
    }
    return "$url' async='async";
};

如果你想优化你的网站的话,这个方法非常实用,不过用的时候你可能要知道那个js是做什么用的影响到网页的布局。