搜索并尝试了很多:是否有可能手动消除渲染阻塞

时间:2017-02-04 作者:kpmrpar

我想手动消除渲染阻塞以提高速度。

过去两天,我一直在谷歌搜索解决方案。

在功能方面尝试了以下3种解决方案。php。然而,这确实奏效了。。。。

从一半的js脚本中删除了,我仍然能收到其他js的相同消息没有从CSS中消除

Solution 1

add_filter( \'clean_url\', function( $url )
{
if ( FALSE === strpos( $url, \'.js\' ) )
{
return $url;
}
return "$url\' defer=\'defer";
}, 11, 1 );
Solutions 2 given here

add_action(\'customize_register\', \'customizer\');
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, \'.js\' ) ) return $url;
if ( strpos( $url, \'jquery.js\' ) ) return $url;
return "$url\' defer ";
}
add_filter( \'clean_url\', \'defer_parsing_of_js\', 11, 1 );

Solutions 3

// add async and defer to javascripts
function wcs_defer_javascripts ( $url ) {
if ( FALSE === strpos( $url, \'.js\' ) ) return $url;
if ( strpos( $url, \'jquery.js\' ) ) return $url;
return "$url\' async=\'async";
}
add_filter( \'clean_url\', \'wcs_defer_javascripts\', 11, 1 );
请不要推荐任何插件。我尝试过w3缓存、自动优化等等。

W3缓存完成了任务,但这不是永久解决方案。因为一旦w3缓存停用,站点就会变形(site does not return to normal even after reactivating).

Solution 4 之前添加了此代码

<script type="text/javascript">
function downloadJSAtOnload() {
    var links = ["wp-content/themes/TL/library/js/scriptsslider.js", "wp-content/themes/TL/library/js/scriptsslider.js"],
        headElement = document.getElementsByTagName("head")[0],
        linkElement, i;
    for (i = 0; i < links.length; i++) {
        linkElement = document.createElement("script");
        linkElement.src = links[i];
        headElement.appendChild(linkElement);
    }
}
if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

2 个回复
SO网友:Nathan Johnson

如果要延迟加载css,请参阅CSS delivery optimization: How to defer css loading?.

如果要延迟加载js,可以使用以下方法:

add_filter( \'script_loader_tag\', function( $tag, $handle ) {
  return str_replace( "<script type=\'text/javascript\'", 
    "<script type=\'text/javascript\' defer=\'defer\'", $tag );
}, 10, 2 );

SO网友:Alexander Holsgrove

遗憾的是,使用“延迟”并不能消除渲染块带。使用异步也是如此。您需要做的是卸载所有javascript文件,然后小心地将它们添加回您的页面window.onload. 这允许页面在包含任何javascript之前完全加载。您需要小心依赖关系,因为许多脚本都需要首先加载jQuery。

本文有助于how to really defer loading javascipt. 关键是要使用这样的东西:

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
}
if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
else 
   window.onload = downloadJSAtOnload;
</script>
我有一个js\\u loader()函数,您可以按顺序传递一组脚本路径,并将它们添加到页面中。

相关推荐

Calculations in functions.php

我为自己创建了一个发票主题,并试图在自定义列中获取发票总额。我已经尝试调整模板页面中使用的代码,以便在函数中显示这一点。php文件,但它不工作。我的乘法操作数出现了一个操作数错误,我不知道为什么。这是我的代码(如有任何帮助,将不胜感激)。if( $column_name == \'invoice_total\' ) { $hours = 0; // This allows counting of each sub_field //* Set repeater va