我怎么能推迟这些JS文件？

时间：2018-12-19 作者：Vishwa

在我的网站上，我使用了GTmetrix，在以下两个文件上出现了JS defer错误。

在初始页面加载期间，将解析92.5KiB的JavaScript。延迟分析JavaScript以减少页面呈现的阻塞。

http://mysite.url/wp-includes/js/jquery/jquery.js?ver=1.12.4 （87.0千磅）

http://mysite.url/ （5.5KB内联JavaScript）

在我的功能中。php文件我有以下代码来延迟js，但对于主题文件夹之外的js文件似乎没有影响。

这是我在函数中的一段代码。php文件

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, \'.js\' ) ) return $url;
        if ( strpos( $url, \'jquery.js\' ) ) return $url;
        // return "$url\' defer ";
        return "$url\' defer onload=\'";
    }
    add_filter( \'clean_url\', \'defer_parsing_of_js\', 11, 1 );
}
如何消除该错误并推迟对上述项目的解析？

1 个回复
最合适的回答,由SO网友:vikrant zilpe 整理而成

What Are Async And Defer Attributes?

以下是async和defer属性的作用：

Async属性：Async属性异步加载脚本。换句话说，确保脚本沿着页面的其他内容异步加载，然后执行。

延迟属性：延迟属性延迟脚本的加载。它确保只有在页面的所有内容完成加载后才执行脚本。

所有现代浏览器都很好地支持这两个属性，包括Firefox、Chrome和Internet explorer。自IE10以来，Internet explorer已经添加了对这些属性的支持。

具有async和defer属性的脚本标记示例如下：

<script src=\'http://sitename.com/js/scripts.js\' async=\'async\' type=\'text/javascript\'> 
</script>
<script src=\'http://sitename.com/js/scripts.js\' defer=\'defer\' type=\'text/javascript\'> 
</script>
Function To Add \'Async/Defer\' Attribute To Your Render Blocking Scripts在本文中，我们将研究三种不同的方法，将这些属性添加到渲染阻塞Javascript中。这些方法如下：

方法1：毫无例外地向所有脚本添加延迟/异步。方法2：向除少数脚本之外的所有脚本添加延迟/异步。方法3：仅向选择性脚本添加延迟/异步。（最灵活的方法，因为它允许您将异步添加到某些脚本，并遵从其他脚本。）你可以使用任何适合你需要的方法。你可以使用任何适合你需要的方法。

Method 1: Adding Async or Defer to All Scripts

如果希望将async或defer属性毫无例外地添加到所有脚本中，那么可以使用以下代码。

打开主题的功能。php页面，并将此代码添加到页面底部。

/*function to add async to all scripts*/
    function js_async_attr($tag){

# Add async to all remaining scripts
    return str_replace( \' src\', \' async="async" src\', $tag );
    }
    add_filter( \'script_loader_tag\', \'js_async_attr\', 10 );
有关更多信息，请查看链接https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/

标签： customization   theme-development   jquery   include   小码农  

相关推荐

如何将jQuery包含到我的插件中，以便在插件页面上使用？

如何将jQuery文件包含到插件中，以便在插件页面上使用它？