如何解决图片显隐操作导致的LCP性能问题？

要解决这个问题，核心是在浏览器开始渲染图片之前就确定它的显示状态，而非等到DOMContentLoaded事件触发后再修改。下面是几个可行的落地方案：

方案1：前置内联脚本（DOM解析前执行） #

把Cookie判断逻辑直接放在图片元素上方，让浏览器在解析图片标签前就完成显示状态设置。图片从一开始就处于正确状态，既不会因后期显示拖慢LCP，也不会出现闪烁。

<script>
// 同步执行，无需等待DOMContentLoaded
if (document.cookie.split(';').some(item => item.trim().startsWith('userEntered='))) {
  // 非首次访问，提前注入隐藏样式
  document.write('<style>#c_img { display: none; }</style>');
}
</script>
<div id="content" style="height: 100vh;">
  <img id="c_img" src='button.png' style="height: 70px; width:70px;" />
</div>
<script>
// 首次访问时设置Cookie，放在图片后避免阻塞渲染
if (!document.cookie.split(';').some(item => item.trim().startsWith('userEntered='))) {
  document.cookie = 'userEntered=1; path=/; max-age=31536000';
}
</script>

生效原因 #

• 内联脚本在DOM解析过程中同步运行，会在图片开始渲染前注入样式，浏览器直接按最终状态渲染，没有后续修改动作。
• 图片默认显示，能被LCP正常捕获，不会因初始隐藏再显示导致指标延迟。

方案2：服务器端条件渲染 #

如果页面由服务器生成（如PHP、Node.js、Python后端），直接在服务端读取Cookie，动态输出图片的HTML代码或样式。这是最彻底的解决方式，完全规避客户端脚本的延迟问题。

以PHP为例：

<?php
$isFirstVisit = !isset($_COOKIE['userEntered']);
if ($isFirstVisit) {
  setcookie('userEntered', '1', time() + 31536000, '/');
}
?>
<div id="content" style="height: 100vh;">
  <img 
    id="c_img" 
    src='button.png' 
    style="height: 70px; width:70px; <?php echo $isFirstVisit ? '' : 'display: none;' ?>" 
  />
</div>

生效原因 #

• 页面发送到客户端时，图片已处于正确显示状态，浏览器直接渲染，没有任何客户端脚本修改的过程，彻底消除LCP异常和闪烁。

方案3：CSS类配合前置内联脚本 #

用CSS类管理显示状态，通过前置脚本动态添加/移除类，兼顾样式与逻辑分离，同时保证渲染时机正确。

<style>
.hidden { display: none; }
#c_img { height: 70px; width:70px; }
</style>
<script>
// 前置判断Cookie，动态添加类
const isFirstVisit = !document.cookie.split(';').some(item => item.trim().startsWith('userEntered='));
if (!isFirstVisit) {
  document.write('<script>document.getElementById("c_img").classList.add("hidden");</' + 'script>');
}
</script>
<div id="content" style="height: 100vh;">
  <img id="c_img" src='button.png' />
</div>
<script>
// 设置Cookie
if (isFirstVisit) {
  document.cookie = 'userEntered=1; path=/; max-age=31536000';
}
</script>

生效原因 #

• 在DOM解析前就确定了图片的类，浏览器渲染时直接应用类的样式，没有后期修改的延迟，同时保持代码的可维护性。

内容的提问来源于stack exchange，提问作者Devb