javascript - 为什么 Javascript 会导致 FOUC

Question

我正在一个有很多 Javascript 和 jQuery 的网站上工作——据我所知，其中大部分是在文档准备好后触发加载的。但是，当页面加载时，您会得到大约一秒钟的白色 FOUC。但是如果你完全禁用 Javascript，根本就没有白闪。

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

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

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

Answer 1

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

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

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

Answer 2

$(document).ready()表示 DOM 已准备就绪，但不一定表示页面已完全加载。如果您想等到页面加载完毕，请使用正文 onload 或窗口 onload 事件。