wordpress实现异步加载js的方法

小牛爱奋斗 | 2016/1/30 19:16

文章目录

什么是异步加载
js异步加载原理
WP实现异步加载

由于博客刚上线，要检查和分析的东西比较多，现在正值年关事情也比较多网站的维护时间也比较少实在是有心无力呀，之前听说js的异步加载功能很实用今天难得空闲测试了一下确实很不错可以把一些触发型或者不影响页面布局的js进行异步加载处理。不得不说效果那是杠杠滴设置完用用卡卡网站测速工具检测了一下发现设置有异步加载的js没有出现在网站加载资源的列表中这说明在网页渲染完成前浏览器直接忽略了设置有异步加载的js效果可想而知呀！

什么是异步加载

默认情况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异步加载
代码地址：http://www.chenxingweb.com/wordpress-async-js.html
**/
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是做什么用的影响到网页的布局，我是把我网站的js文件分成两个一个是需要渲染时加载的，一个是可以异步加载的，而且这个功能我会集成到我开发的AIPIC图片主题的下个版本中，喜欢这款主题的朋友可以关注下现在正值年关也搞了下优惠活动，原价198现价168RMB喜欢的抓紧时间了！