我有各种javascripts，这是我的一个WordPress域中必需的插件，我知道它在php文件中的位置。
我正在采取一切措施来加快页面加载时间，并且网上的每个速度测试员都会说如果可能的话推迟javascripts。
我已经阅读了javascript中的 defer ='defer'和 async 函数，我认为其中一个将完成我想要完成的任务。但我不明白我是如何在php文件中这样做的。
例如，这是一个特定插件的php文件的片段，其中调用了javascript文件：
function add_dcsnt_scripts() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );
}
我已经读过，最好这样做，以加快页面加载时间：
<script defer async src="..."></script>
但我不知道如何在php文件中完成。我想用我的所有javascript文件执行此操作。
如何完成推迟或将此javascript片段推迟到最后加载并加快页面加载时间？在所有浏览器中增加页面加载时间的理想方法是什么？感谢任何人提供的任何指导！
答案 0 :(得分：41)
或更普遍的方式：
function add_async_forscript($url)
{
if (strpos($url, '#asyncload')===false)
return $url;
else if (is_admin())
return str_replace('#asyncload', '', $url);
else
return str_replace('#asyncload', '', $url)."' async='async";
}
add_filter('clean_url', 'add_async_forscript', 11, 1);
所以你可以在没有代码更改的情况下将async添加到任何脚本，只需将#asyncload添加到脚本url中：
wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )
答案 1 :(得分：27)
此blog post链接到两个感兴趣的插件：
Asynchronous Javascript
异步加载javascript来提高页面加载性能
通过使用head.js
WP Deferred Javascripts
使用LABJS（异步javascript库）推迟加载使用wp_enqueue_scripts添加的所有javascripts。
没有对它们进行测试，但检查了代码，并且它们使用WordPress脚本排队过程做了相当奇特的事情。
// Adapted from https://gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url )
{
if ( FALSE === strpos( $url, '.js' ) )
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}, 11, 1 );
答案 2 :(得分：22)
尝试保持模块化并且包含所有内容，以下方法通过在$ handle名称附加一个小标识符来动态选择如何使用async或defer属性嵌入标记：
/**
* Add async or defer attributes to script enqueues
* @author Mike Kormendy
* @param String $tag The original enqueued <script src="...> tag
* @param String $handle The registered unique name of the script
* @return String $tag The modified <script async|defer src="...> tag
*/
// only on the front-end
if(!is_admin()) {
function add_asyncdefer_attribute($tag, $handle) {
// if the unique handle/name of the registered script has 'async' in it
if (strpos($handle, 'async') !== false) {
// return the tag with the async attribute
return str_replace( '<script ', '<script async ', $tag );
}
// if the unique handle/name of the registered script has 'defer' in it
else if (strpos($handle, 'defer') !== false) {
// return the tag with the defer attribute
return str_replace( '<script ', '<script defer ', $tag );
}
// otherwise skip
else {
return $tag;
}
}
add_filter('script_loader_tag', 'add_asyncdefer_attribute', 10, 2);
}
使用示例：
function enqueue_my_scripts() {
// script to load asynchronously
wp_register_script('firstscript-async', '//www.domain.com/somescript.js', '', 2, false);
wp_enqueue_script('firstscript-async');
// script to be deferred
wp_register_script('secondscript-defer', '//www.domain.com/otherscript.js', '', 2, false);
wp_enqueue_script('secondscript-defer');
// standard script embed
wp_register_script('thirdscript', '//www.domain.com/anotherscript.js', '', 2, false);
wp_enqueue_script('thirdscript');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts', 9999);
输出：
<script async type='text/javascript' src='//www.domain.com/somescript.js'></script>
<script defer type='text/javascript' src='//www.domain.com/otherscript.js'></script>
<script type='text/javascript' src='//www.domain.com/anothercript.js'></script>
感谢@MattKeys @crissoca在这里激发了我的答案。
答案 3 :(得分：15)
使用不同过滤器的另一种解决方案，可用于定位特定的脚本句柄：
function frontend_scripts()
{
wp_enqueue_script( 'my-unique-script-handle', 'path/to/my/script.js' );
}
add_action( 'wp_enqueue_scripts', 'frontend_script' );
function make_script_async( $tag, $handle, $src )
{
if ( 'my-unique-script-handle' != $handle ) {
return $tag;
}
return str_replace( '<script', '<script async', $tag );
}
add_filter( 'script_loader_tag', 'make_script_async', 10, 3 );
答案 4 :(得分：11)
简化方法。添加到您的functions.php文件，以使Word在Wordpress中异步
// Make JavaScript Asynchronous in Wordpress
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if( is_admin() ) {
return $tag;
}
return str_replace( ' src', ' async src', $tag );
}, 10, 2 );
答案 5 :(得分：5)
要控制哪些js文件延迟并避免冲突，您可以将变量附加到wp_register_script函数中的url，如下所示。
wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('jquery'), '1.0', true );
然后更改行：
if ( FALSE === strpos( $url, '.js' ))
致：
if ( FALSE === strpos( $url, '.js?defer' ))
新过滤器看起来像这样。
add_filter( 'clean_url', function( $url )
{
if ( FALSE === strpos( $url, '.js?defer' ) )
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}, 11, 1 );
答案 6 :(得分：5)
很少修改代码 Mike Kormendy ，它允许您一次添加2个属性：
// Async load
function add_asyncdefer_attribute($tag, $handle)
{
$param = '';
if ( strpos($handle, 'async') !== false ) $param = 'async ';
if ( strpos($handle, 'defer') !== false ) $param .= 'defer ';
if ( $param )
return str_replace('<script ', '<script ' . $param, $tag);
else
return $tag;
}
结果：
<script async defer type='text/javascript' src='#URL'></script>
答案 7 :(得分：2)
我认为延迟/异步WordPress jQuery是不好的做法。更好的解决方案是从过滤器中排除jQuery ：
if (!is_admin()) {
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
if ( strpos( $tag, "jquery.js" ) || strpos( $tag, "jquery-migrate.min.js") ) {
return $tag;
}
return str_replace( ' src', ' async src', $tag );
}, 10, 2 );
}
您可以使用defer代替async
答案 8 :(得分：1)
将async属性合并到脚本中，以便只在加载整个页面后才加载它们
<script type="text/javascript">
function ngfbJavascript( d, s, id, url ) {
var js, ngfb_js = d.getElementsByTagName( s )[0];
if ( d.getElementById( id ) ) return;
js = d.createElement( s );
js.id = id;
js.async = true;
js.src = url;
ngfb_js.parentNode.insertBefore( js, ngfb_js );
};
</script>
来源：Here
答案 9 :(得分：1)
要添加clean_url过滤器解决方案的东西，请务必验证只在字体结尾使用它可能使用if( ! is_admin() ){}像ACF这样的热门插件可能会让您头疼。
<强>更新
以下是我修改后的解决方案版本：
if( ! is_admin() ){
add_filter( 'clean_url', 'so_18944027_front_end_defer', 11, 1 );
function so_18944027_front_end_defer( $url ) {
if ( FALSE === strpos( $url, '.js' ) )
{ // not our file
return $url;
}
// Must be a ', not "!
return "$url' defer='defer";
}
}