WordPress异步加载JS代码版和插件版:Async JavaScript

4周前 (02-04)

按惯例,所有JavaScript都放在页面的头部head中,必须等全部JavaScript代码都被下载、解析和执行完后,才能开始呈现页面的内容,对加载很多JavaScript代码的页面来说,会导致页面呈现出现明显示的延迟。我们可以通过为这些JavaScript添加“async”(异步)或“defer“(推迟)属性,加快页面呈现的速度。

至于“async”和“defer“属性的详细功能说明,大家可以网上自行搜索,两者大概的区别就是前者只有HTML5的现代浏览器支持,后者只有IE支持。

WordPress异步加载JS插件:Async JavaScript

Async JavaScript 是一款为WordPress主题加载JavaScript文件添加async”和“defer“属性的插件。

主要是针对使用标准的wp_deregister_script函数加载JavaScript文件的方法。

启用插件后可以选择“async”或者“defer“,如果启用后发现页面某些依赖  JQuery  运行的 Script有问题,可以在“Script Exclusion”中输入排除的 jquery.min.js

至于具体加速效果如何,只能自己体会了。

WordPress异步加载JS代码版本

如果有童鞋不喜欢用插件,可以用下面这段从插件中提取出来的代码,也能达到使用插件相似的功能。

将下面代码添加到当前主题functions.php中:

// 异步加载JS
add_filter( 'script_loader_tag', 'async_script', 10, 3 );
function async_script( $tag, $handle, $src ) {
    $zm_method = 'async';// 可将“async”改为“defer”
    $zm_exclusions = 'jquery.min.js,script.js';// 排除的JS
    $array_exclusions = !empty( $zm_exclusions ) ? explode( ',', $zm_exclusions ) : array();
    if ( false !== $zm_enabled && false === is_admin() ) {
        if ( !empty( $array_exclusions ) ) {
            foreach ( $array_exclusions as $exclusion ) {
                $exclusion = trim( $exclusion );
                if ( $exclusion != '' ) {
                    if ( false !== strpos( strtolower( $src ), strtolower( $exclusion ) ) ) {
                        return $tag;
                    }
                }
            }
        }
        $tag = str_replace( 'src=', $zm_method . "='" . $zm_method . "' src=", $tag );
        return $tag;
    }
    return $tag;
}

代码版只是将 Async JavaScript 插件核心功能提取出来,原插件其实用起来更加方便,能兼容著名网页压缩插件:Autoptimize ,并具备部分调试功能。

async属性是HTML 5新增的,只有在支持HTML 5的现代浏览器才会有效果,至于效果如何本人没实际测试过。

提示:

需要说明的是:这个异步或推迟加载JS,并不会对网页实际打开速度产生影响,只是让网页内容在JS文件加载完之前,呈现给浏览者,让用户有个更好的体验,并不能真的提高网页加载速度。

紧跟行业趋势,选择我们,让你的网站永不落伍!

比格主题bigetheme,是国内为数不多的WordPress网站建设开发团队,我们提供WordPress主题,WordPress企业主题,WordPress博客主题,WordPress模板,WordPress主题下载,WordPress插件下载,WordPress主题开发服务。


扫码加我微信


img
加入群聊一起交流吧
'); })();