元素隐藏和显示导致最大内容绘制 8000ms

Question

我想最初隐藏图像，然后仅在第一个页面加载时显示它，这通过检查 cookie 来确定。然而，这种方法可能会导致最大内容绘制指标出现问题。您对如何避免这个问题有什么建议吗？

以下是有问题的代码：

document.addEventListener('DOMContentLoaded', function () {
  if (!document.cookie.split(';').some((item) => item.trim().startsWith('userEntered='))) {
    document.getElementById('c_img').style.display = 'block';
  }
});
<div id="content" style="height: 100vh;">
  <img id="c_img" src='button.png' style="height: 70px; width:70px; display: none" />
</div>

---

默认显示图像，然后在存在“userEntered”cookie 时隐藏图像，可以避免 LCP 问题。然而，这种方法会导致图像短暂出现然后消失。 示例：

document.addEventListener('DOMContentLoaded', function () {
  if (document.cookie.split(';').some((item) => item.trim().startsWith('userEntered='))) {
    document.getElementById('c_img').style.display = 'none';
  }
});
<div id="content" style="height: 100vh;">
  <img id="c_img" src='button.png' style="height: 70px; width:70px;/>
</div>

Answer 1

同意 Rick 的观点，做这个服务器端是最好的方法。

如果您必须在客户端执行此操作，那么最大限度地减少时间是您最好的选择。

您正在“DOMContentLoaded”上运行 JS，但如果您随后执行此操作（当您知道它在 DOM 中时），那么它会显示得更快，因此对 LCP 的影响要小得多：

<div id="content" style="height: 100vh;">
  <img id="c_img" src='button.png' style="height: 70px; width:70px; display: none" />
</div>
<script>
  if (!document.cookie.split(';').some((item) => item.trim().startsWith('userEntered='))) {
    document.getElementById('c_img').style.display = 'block';
  }
</script>

请注意，由于编译执行 JS 和读取 cookie 确实会花费少量时间，因此仍然会有延迟，但这是您可以做的最短时间。

此外，图像将以任何一种方式下载（这意味着如果不显示它就会被浪费），但这就是您想要减少 LCP 影响的方法。您可以添加

fetchpriority=high

来加快图像加载速度。