为什么Javascript导致FOUC

Question

我正在开发包含大量Javascript和jQuery的遗址 --据我所知，其中大部分都是在文档准备好后触发加载的。但是，当页面加载时，您将得到大约一秒的白色FOUC。但是如果您完全禁用Javascript，则根本没有白色闪存。

如何确保Javascript在页面加载之后才开始加载？它已经被广泛的使用了

 $(document).ready(function(){ /*. . .*/});

..。所以Javascript不应该在页面完成加载和呈现之前触发.对吗？但是不知怎么的，页面在呈现之前等待脚本完成--尽管它不需要，因为页面看起来仍然很好，Javascript完全禁用了。

Answer 1

我要尝试的第一件事是重新排序您的脚本和样式标记，以便所有外部css文件都包含在任何javascript文件之前。

我使用Chrome的开发工具进行了审计，发现了包含在javascript文件下面的13个样式表。因为浏览器通常只允许两个并发连接，所以如果html被加载，但是样式表下载在其他资源后面排队，您可以看到这个闪存。

这也解释了为什么在评论中，很多其他人很难复制你看到的东西--他们有不同的连接速度等等。

Answer 2

$(document).ready()意味着DOM已经准备好了，但不一定是页面已完全加载。如果要等到页面加载后，请使用body onload或window onload事件。