正文:
每次渲染页面时,WordPress 都会加载一系列外部引用的JavaScript。这些脚本包括 WordPress 添加的标准脚本,以及主题和插件使用 wp_enqueue_scripts函数添加的一些脚本。根据脚本的类型,它们可能位于页面的头部、正文或页脚部分。 然而,位于页面头部和主体部分的脚本可能会导致页面加载延迟,因为浏览器会在加载和执行这些脚本之前尝试加载页面内容。因此,这些脚本被称为渲染阻塞的 JavaScript。 解决这个问题的最直接方法是将所有脚本移动到页面的页脚。但如果这种方法不可行,可以考虑为这些脚本添加延迟或异步属性标记,即延迟加载或异步加载。 延迟加载属性(defer)确保脚本在页面的所有内容完成加载后才执行。异步加载属性(async)则确保脚本与页面的其他相关内容一起异步加载。 所有现代主流浏览器都支持这两个属性,包括 Firefox、Chrome 和 Internet Explorer。自从 IE10 以后,Internet Explorer 也已经添加了对这些属性的支持。 具有 async 和 defer 属性的脚本标记示例如下:
< script src='http://sitenam e.com/js/scripts.js' async='async' type='text/javascript'></ script>
< script src='http://sitenam e.com/js/scripts.js' defer='defer' type='text/javascript'></ script>
将“异步/延迟”属性添加到阻塞渲染脚本 在这个章节中,我们将介绍三种不同的方法,将这些属性添加到阻塞渲染 javascripts 中。
这些方法如下:
您可以根据自己的实际情况使用适合您的方法。 方法 1:向所有脚本添加延迟/异步属性。 如果您想毫无例外地将 async 或 defer 属性添加到所有脚本,则可以使用以下代码。 打开主题的functions.php页面,将此代码添加到页面底部。
/*function to add async to all scripts*/
function js_async_attr($tag){
# 添加异步加载属性到所有 js 脚本
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );
注意:上面的函数会将 async 属性添加到所有脚本中。如果您想使用 defer 属性,请使用 defer=“defer”替换 async=“async”。 方法 2:向大部分脚本添加延迟/异步属性,部分例外。
上述方法为所有脚本添加了 async 或 defer 属性。如果您希望将这些属性添加到大部分脚本中,但有例外的,则可以使用以下代码:
/*function to add async to all scripts*/
function js_async_attr($tag){
# 不添加异步加载属性的例外列表(修改 js 文件名为你的网站 js 文件名)
$scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js');
foreach($scripts_to_exclude as $exclude_script){
if(true == strpos($tag, $exclude_script ) )
return $tag;
}
# 添加异步加载属性到其余 js 文件
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );
注意:如果您想使用 defer,请在上面的代码中使用 defer=“defer”替换 async=“async”。将 script-name1.js,script-name2.js 等替换为要排除的脚本的名称。
关于 WordPress 的脚本延时加载和异步加载技术的分享,到此结束,如果你对这一块还是有不了解的地方,欢迎留言交流。如果你觉得手动设置 WordPress 脚本文件的延迟加载或者异步加载属性比较麻烦,你也可以借助一些插件来实现。
转载请注明:汇站网 » WordPress 博客中实现 JavaScript 脚本的延迟和异步加载教程