这种情况大家都可能遇到过:就是 head 中有 N 个脚本,当加载这些脚本的时候就会阻塞页面的渲染,也就是常说的空白,当然我们可以把源代码中的脚本放到 footer 来解决,但是一些复杂的开发环境让这个简单的工作变得异常复杂。
这个时候我们可以使用 Defer 属性,它是 JavaScript 中比较少用的一个属性,可能你从来都不会使用它,但是相信看完这里的介绍,相信你就不会离开它,它的主要功能就是让脚本在整个页面加载完之后再解析,而非边加载边解析,这对于只包含事件触发的 JavaScript 的脚本来说,可以提供整个页面的加载速度。
是的,如果一个 Script 标签加了 defer 属性,即使放在 head 里面,它也会在 HTML 页面解析完毕之后再去执行,也就是类似于把这个 script 放在了页面的底部。
当然 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 中。最后大家可以看我的博客是不是页面可以很快渲染出来。 🙂