优化 WordPress 速度,异步加载JS代码分享

网站用了太多的 JS,网页载入慢咋办?除了可以用 「CDN公共库」 来加速外,还可以通过 异步加载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;
}

需要说明的是:有些JS异步加载后,会没有效果,这时候就需要排除了,$zm_exclusions = ‘jquery.min.js,script.js’;  这段代码里面添加需要排除的 JS 。

关于同步加载与异步加载的区别:

1.同步加载:同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像)、渲染、代码执行。

2.异步加载:异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。

为何使用异步加载原因:

优化脚本文件的加载提高页面的加载速度,一直是提高页面加载速度很重要的一条。因为涉及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载,因此更多的采用异步加载。