gpt4 book ai didi

javascript - CSS 先于 JS,Firefox 中出现白色闪烁?

转载 作者:行者123 更新时间:2023-11-28 06:18:25 27 4
gpt4 key购买 nike

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

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

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

最佳答案

您所描述的内容听起来像 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>

关于javascript - CSS 先于 JS,Firefox 中出现白色闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35747465/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com