我知道开发人员多次询问这个主题，并通过有关如何优化页面、优化脚本运行等的高质量答案多次回答，和/或建议选择不那么华丽的背景。不过我认为这是一个新的方面。
当然，我的网页并未完美优化，但事实仍然是:在测试我的页面时，这种非常用户不友好的空白页面闪烁(无论它是什么颜色)仅在 Chrome 中遇到。在 FF 和 IE 中测试时，无法在页面渲染之间看到任何空白页面。
- 有人可能会想:有一些条件逻辑，在我的代码/css 中检测 Chrome。嗯，没有。
- 此外，Chrome 中的页面加载速度实际上相同或更快...
- 请注意:Chrome 的这种渲染差异行为可以在许多外部世界的网站中轻松体验到，而不仅仅是在我的网站中。
我希望必须有一种方法可以强制 Chrome 像其他浏览器一样以大多数用户友好模式运行。有什么想法或经验可以分享吗？
演示:
- 转到google 、使用 Chrome
- 输入搜索“qwe”
页面呈现后按 Ctrl+F5。您应该会看到烦人的白色闪光
转到google ，使用FF
- 输入搜索“qwe”
- 页面呈现后按 Ctrl+F5。没有办法看到任何闪光。页面仍在重新加载，完全看到状态栏，或使用像 Fiddler 这样的 http 调试器进行证明。
如果有人想要此视频，请发表评论。
最佳答案
Chrome 就是这样 load-parse-render-etc流程有效。即使实际上没有内容可显示，它也会尽快开始渲染。所以你会看到白屏。
两个例子就清楚了。
1
html
<!DOCTYPE html>
<html>
<body>
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<h4>Header</h4>
</body>
</html>
当解析器遇到远程script ，它会停止 HTML 解析，直到加载并评估脚本。但与此同时，引擎尝试渲染它已经拥有的内容。它没有任何内容，因此您会看到一个白色页面，一段时间后，当脚本准备就绪时，它会继续进行 HTML 解析和渲染，因此您会看到文本。考虑这个加载时间线并注意 2 个 Paint 事件:
2
html
<!DOCTYPE html>
<html>
<body>
<script>
function showTimespan() {
var h4 = document.createElement('h4');
h4.textContent = Date.now();
document.body.appendChild(h4);
}
showTimespan();
</script>
<script src='https://code.jquery.com/jquery-2.1.4.js'></script>
<script>
showTimespan();
</script>
</body>
</html>
现在，当解析器在加载远程脚本时停止时，它已经有要显示的内容，该内容是在之前的script中生成的。标签。 而不是 script ，可能还有其他 html内容 再次，当加载并评估远程脚本时，引擎继续处理其余内容并渲染它。这里的时间线是相同的。
现在，如果您在 Firefox 中打开示例，您将看到 <h4>立即渲染。 Firefox 只是延迟第一次渲染而不清除页面。在时间轴中你只会看到一个 Paint事件。
我在这里使用 jQuery仅用于网络负载目的，因为我需要一些不小的远程库，以便您希望用肉眼注意到渲染。
我在第二个示例中使用了脚本生成的内容，以便您注意到 Firefox 实际渲染的时间。
但是哪种方法更好，很难说。就我个人而言，我喜欢当它真正展示它所拥有的东西时，正如我看到的那样，真正的进步。
关于javascript - 为什么只有Chrome在页面之间闪烁白色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31875773/