WordPress 技巧：使用 defer 延迟加载 JavaScript 程序，加快页面渲染

什么是 JavaScript 的 Defer 属性

这种情况大家都可能遇到过：就是 head 中有 N 个脚本，当加载这些脚本的时候就会阻塞页面的渲染，也就是常说的空白，当然我们可以把源代码中的脚本放到 footer 来解决，但是一些复杂的开发环境让这个简单的工作变得异常复杂。

这个时候我们可以使用 Defer 属性，它是 JavaScript 中比较少用的一个属性，可能你从来都不会使用它，但是相信看完这里的介绍，相信你就不会离开它，它的主要功能就是让脚本在整个页面加载完之后再解析，而非边加载边解析，这对于只包含事件触发的 JavaScript 的脚本来说，可以提供整个页面的加载速度。

是的，如果一个 Script 标签加了 defer 属性，即使放在 head 里面，它也会在 HTML 页面解析完毕之后再去执行，也就是类似于把这个 script 放在了页面的底部。

当然 defer 使用也有局限性，一般要注意两点：

1. 不要在 defer 型的脚本程序段中调用 document.write 命令，因为 document.write 将产生直接输出效果。
2. 不要在 defer 型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

给 WordPress 中使用的脚本加上 Defer 属性

那么在 WordPress 中，我们怎么给 WordPress 使用的脚本自动加上 Defer 属性呢？我们可以在当前主题的 functions.php 文件中加入下面的代码：

add_filter( 'clean_url', 'wpjam_defer_script',11,1);
function wpjam_defer_script( $url ){
    if(strpos($url, '.js') === false){
        return $url;
    }

    return "$url' defer='defer";
};

注意的时上面的代码只有在按照 WordPress 方式引入的 JavaScript 代码才有效。

该功能已经整合到 WPJAM Basic 中。最后大家可以看我的博客是不是页面可以很快渲染出来。 🙂