如何在页面首次渲染前修改元素样式？避免样式闪烁

明确结论：完全可以实现页面渲染前应用动态背景色，彻底避免闪烁问题。你之前的方案出现闪烁，是因为脚本放在<body>内部时，浏览器已经开始渲染带默认背景的页面内容，脚本执行后才切换颜色，导致视觉上的闪烁。

下面是几种可靠的解决方式：

方法1：将脚本放在<head>中同步执行 #

把脚本放在<head>标签内，让它在浏览器开始渲染<body>之前执行，这样页面启动时就会直接用动态计算的颜色渲染，不会出现颜色切换过程。

HTML代码：

<head>
  <script src="script.js"></script>
</head>
<body>
  <!-- 页面内容 -->
</body>

script.js代码：

// 同步获取动态颜色
const color = dynamicData();
// 同时设置根元素和body的背景色，确保全页面覆盖
document.documentElement.style.backgroundColor = color;
document.body.style.backgroundColor = color;

方法2：动态插入全局样式表到<head> #

如果需要设置更复杂的关联样式，可动态创建样式表插入<head>，同样能在页面渲染前生效：

script.js代码：

const color = dynamicData();
const style = document.createElement('style');
style.textContent = `
  html, body {
    background-color: ${color} !important;
    margin: 0;
    padding: 0;
  }
`;
document.head.appendChild(style);

!important可以确保该样式覆盖任何默认的CSS规则，避免冲突。

方法3：服务器端直接注入样式（适合SSR场景） #

如果你的页面由服务器端生成，可以直接在服务器计算出颜色后，把样式写入<head>的<style>标签里：

<head>
  <style>
    html, body { background-color: ${serverCalculatedColor}; }
  </style>
</head>

这种方式完全消除客户端脚本执行的延迟，是最彻底的解决办法。

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