Question

Google Chrome浏览器页面效果审核建议在标头中输入JS之前放入CSS导入，以便并行下载CSS和JS文件。

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

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

Answer 1

您所描述的内容听起来像FOUC（Flash of Unstyled Content）。我制作了一个剧本来对抗它。

正文有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>

JS之前的CSS和Firefox中的白色闪烁？

1 个答案: