CSS 在 JS 之前，在 Firefox 中闪烁白色

CSS before JS and white flashes in Firefox?

本文关键字：闪烁 白色 Firefox JS 之前 CSS      更新时间：2023-09-26

Google Chrome的页面性能审计建议将CSS导入放在JS导入之前，以允许并行下载CSS和JS文件。

但是，我注意到这会导致 Firefox 在导航到另一个页面时在渲染新页面之前清除窗口。因此，如果我在JS之前有CSS，Firefox将清除旧页面，显示白屏半秒钟，然后显示新页面。如果我把JS放在CSS之前，旧页面将保留在屏幕上，直到它被新页面替换。后者显然看起来要好得多，因为标题永久保留在屏幕上。Chrome似乎没有这些问题。

这是一个已知问题吗？这里推荐的行动方案是什么？

你所描述的听起来像FOUC（无样式内容的闪光）。我做了一个脚本来反驳它。

主体有 2 种状态，分别派生自在加载时切换的.invisible类和.visible类。.invisible类并不是真正必需的，除非您希望在页面退出时产生淡出效果。

function init(t) {
  if (!t) {
    t = 0;
  }
  setTimeout(show, t);
}
function show() {
  document.body.classList.add('visible');
  document.body.classList.remove('invisible');
}
.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.invisible {
  visibility: hiden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
<body class="invisible" onload="init(1000);">
  <section style="width: 80vw; height: 80vh; background: blue; padding:15px;">
    <h1 style="font-size: 40px; color: yellow">Title</h1>
    <p style="font-size: 16px; color: white;">Lorem ipsum dolor sit amet, nullam probatus id pri. Et platonem salutatus prodesset has, has vidit oblique feugait id. Tincidunt democritum posidonium quo te. Quo ne iudico saperet dissentias, ea vim expetenda repudiandae, ius id postea sententiae
      instructior. Ex porro explicari mei, nulla constituam sea no, eros adhuc quo id.</p>
  </section>
</body>

相关文章：