页面加载后向<body>添加元素的问题

问题描述：

我们正在为“body”标签添加背景图片。图像是动态的，因此必须最后加载才能将变量传递给它。页面加载后向<body>添加元素的问题

问题是，我们正在尝试改进我们的PageSpeed，并且在添加背景图片时，PageSpeed报告将一大堆脚本标记为渲染阻塞。即使我们有一个在我们的页脚。

据我所知，这不应该是渲染阻塞，因为内容可以没有它加载罚款 - 它会 - 但是当调用背景图像时，它会变成渲染阻塞。

有没有人做过这样的事情？任何解决方法？

我也花了大量的时间试图在页面加载完成后加载脚本，并且我在页面后加载了它，但呈现阻止内容仍在报表中标记。

我似乎无法理解这一切。任何指导将不胜感激。

感谢， bhtech

UPDATE

<html> 
<head> 
<script src="/header.js"></script> 
</head> 
<body> 
<script src="/footer.js"></script> 
<script src="/loadbodyimage.js"></script> 
</body> 
</html>

当不包括/loadbodyimage.js文件，只有/header.js文件是阻止呈现的 - 这是非常合情合理。

但是，当我包含/loadbodyimage.js（它向body标签添加背景图像）时，/ footer.js文件也会变成呈现模块。

这是一个非常愚蠢的版本正在发生 - 但种说明我正在经历。

UPDATE

我已经添加下面的代码到我的页面的底部，其写入body标签，并添加背景图像。这很简单的jQuery。

$(document).ready(function() { 
$('body').css('background', 'url(/images/bgImage.jpg)'); 
});

这使得页面上的脚本（甚至在它之后）被标记为渲染阻塞。如果我评论这一行，脚本不再呈现阻塞。我希望这有助于解释我的问题。

我看不出有什么毛病你的代码......哦，等一下，你忘了，包括你的问题中的任何代码。帮助我们通过提供您的问题代码的简化版本来帮助您 - 仅仅是证明问题的最低限度。 – nnnnnn 2015-01-21 03:29:21

答

我建议给一个名为head.js的脚本试试。它异步并行加载JS。尝试提高PageSpeed分数和初始页面加载时间时，我的结果非常好。

您可以下载head.js here。

用法：

<head> 
<script src="/head.load.min.js"></script> 
<script> 
    head.js("/header.js"); 
    head.js("/footer.js"); 
    head.js("/loadbodyimage.js"); 
</script> 
</head>

页面加载后向添加元素的问题

相关推荐