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

谷歌浏览器的页面性能审计建议将CSS导入放在标题中的JS导入之前，以允许并行下载CSS和JS文件。JS之前的CSS和Firefox中的白色闪烁？

不过，我已经注意到，这导致Firefox浏览到另一个页面时呈现新页面之前清除窗。所以如果我在JS之前拥有CSS，Firefox将清除旧页面，显示半秒钟的白色屏幕，然后显示新页面。如果我在CSS之前放置JS，旧页面将保留在屏幕上，直到它被新页面替换。后者显然看起来好多了，因为标题永久保留在屏幕上。 Chrome似乎没有这些问题。

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

来源

2016-03-02 Nils

我不能在我的网站，在那里CSS文件之前的JavaScript文件加载，总是重现此。 – KittMedia

http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file – nubinub

@nubinub你所描述一样FOUC声音（[无样式内容的闪光灯]（https：//开头stevesouders.com/hpws/css-fouc.php））。如果你有兴趣的话，我写了一个脚本来对付FOUC。 – zer00ne

你所描述的一样FOUC（Flash of Unstyled Content）的声音。我制作了一个脚本来对付它。

身体有两个状态是从.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>

来源

2016-03-02 15:22:27 zer00ne

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

回答

相关问题