页面加载后向<正文>添加元素时出现问题

Issue with adding element to <body> after page load

本文关键字：元素 添加 问题 正文 加载      更新时间：2023-09-26

我们正在向"body"标签添加背景图像。图像是动态的，因此必须最后加载以允许将变量传递给它。

问题是，我们正在尝试改进我们的PageSpeed，并且在添加背景图像时，PageSpeed报告将大量脚本标记为渲染块。甚至我们的页脚中也有一个。

据我所知，这不应该是渲染阻塞，因为没有它的内容可以很好地加载 - 它确实如此 - 但是当调用背景图像时，它变成了渲染阻塞。

以前有人做过这样的事情吗？有什么解决方法吗？

我还花费了大量时间尝试在页面完成加载后加载脚本，并且我已经让它在页面加载后加载，但呈现阻止内容仍然在报告中标记。

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

谢谢高泰

更新 

<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 文件也会变得渲染阻塞。

这是正在发生的事情的一个非常愚蠢的版本 - 但有点说明了我正在经历的事情。

更新

我已将以下代码添加到页面底部，该代码写入正文标签并添加背景图像。这是简单的jQuery。

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

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

我建议尝试一个名为head.js的脚本。它异步和并行加载 JS。在尝试提高 PageSpeed 分数和初始页面加载时间时，我取得了出色的结果。

你可以下载头.js在这里。

用法：

<head>
 <script src="/head.load.min.js"></script>
 <script>
  head.js("/header.js");
  head.js("/footer.js");
  head.js("/loadbodyimage.js");
 </script>
</head>
相关文章：