为什么 Javascript 会导致 FOUC答案

【问题标题】：Why is Javascript causing FOUC为什么 Javascript 会导致 FOUC
【发布时间】：2012-12-31 04:29:48
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：