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 中。最后大家可以看我的博客是不是页面可以很快渲染出来。 🙂

热门文章