如何推迟或asynchronous此WordPress的JavaScript代码段加载最后更快的页面加载时间？
我有各种各样的javascripts是必要的插件在我的WordPress域之一，我知道在哪里从它的PHP文件调用。
为了加快页面加载速度，我正在采取一切措施，networking上的每个速度testing者都会尽可能推迟javascript的使用。
我已经阅读了关于defer ='defer'和javascript中的asynchronous函数，我认为其中的一个将完成我正在努力完成的任务。 但我不知道如何在一个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文件做到这一点。
我将如何完成延期或asynchronous此JavaScript代码片段加载最后加快页面加载时间 ？ 什么是增加所有浏览器的页面加载时间的理想方法？ 感谢任何人可以提供的任何指导！
这个博客文章链接到两个感兴趣的插件：
asynchronousJavascript
通过使用head.jsasynchronous加载JavaScript来提高页面加载性能
WP推迟的Javascripts
推迟使用LABJS（一个asynchronousJavaScript库）加载wp_enqueue_scripts的所有JavaScript的加载。
没有testing他们，但检查了代码，他们做WordPress的脚本入队过程漂亮的东西。
但是随后WPSE来拯救 ：
// 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 );
或者更普遍的方式：
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);
所以你可以添加asynchronous到任何脚本没有代码的变化，只需添加#asyncload到脚本URL为：
wp_enqueue_script('dcsnt', '/js/jquery.social.media.tabs.1.7.1.min.js#asyncload' )
另一个解决scheme使用不同的filter，可以用来定位特定的脚本句柄：
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 );
简化的方法。 添加到您的functions.php文件，使WordPress在Wordpress中asynchronous
// 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 );
为了使事物保持一定的模块化和包容性，下面的方法通过在$ handle名称后附加一个小的标识符来dynamic地select如何embedded标签与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鼓励我在这里回答。
要获得控制哪些js文件推迟并避免冲突，可以在wp_register_script函数的url中追加一个variables，如下所示。
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' ))
新的filter看起来像这样。
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 );
将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>
来源： 这里
为了添加clean_urlfilter解决scheme，确保仅在字体结束时使用它才可能使用if( ! is_admin() ){}像ACF这样的stream行插件可能让您头疼。
更新
这里是我的解决scheme的修改版本：
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"; } }
很less修改代码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>
我认为推迟/asynchronousWordPress jQuery是不好的做法。 更好的解决scheme是从filter中排除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
