javascript - 为什么 Javascript 会导致 FOUC

Question

我正在研究 a site有很多 Javascript 和 jQuery——据我所知，其中大部分是在文档准备好后触发加载的。但是，当页面加载时，您会看到大约一秒钟的白色 FOUC。但是，如果你完全禁用 Javascript，则根本不会出现白色闪光。

如何确保 Javascript 在页面加载后才开始加载？它已经在大量使用

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

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

Answer 1

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

我使用 Chrome 的开发人员工具进行了审核，发现 13 个样式表包含在一个 javascript 文件下。由于浏览器通常只允许 2 个并发连接，因此如果 html 已加载但样式表下载排在其他资源后面，您可能会看到此闪烁。

这也可以解释为什么在评论中有那么多其他人难以重现您所看到的内容——他们的连接速度不同等等。