Stackoverflow如何防止页面加载时出现“白屏”？

Question

我注意到在StackOverflow.com（以及其他大型专业网站，如Wikipedia.org）上，当您从一个页面导航到另一个页面时，每个页面加载之前没有"白色闪光"（即页面立即从一个转换到另一个）。我正在尝试在我的页面上做同样的事情，并且我已经尝试了所有我读过的内容：

1. 缓存CSS
2. 缓存JavaScript
3. 缓存图片
4. 将JavaScript放在页面底部

无论我尝试什么，每个新页面加载之前仍然会出现约10毫秒的白色“闪烁”。

StackOverflow是如何处理这个问题的？我知道这里还有其他类似的问题，但我想知道StackOverflow是如何做到的。

- user3163495

---

你是如何进行缓存的？你是否使用了Service Worker？ - Jonathan Rys

@JonathanRys 我正在发送一个带有“Cache-Control: max-age=60”头的CSS和JavaScript。这会产生一些影响，但即使我在浏览器的开发者工具中看到CSS和JavaScript资源明确地从内存加载，闪存仍然存在。 - user3163495

仍然有一个“白屏闪烁”的问题。你尝试过使用限速来测试这个网站吗？ - Jorjon

你的用户不会在意10毫秒，我向你保证。你应该关注更重要的事情和你的网站的性能考虑。 - Brad

@Jorjon，“仍然有一个白色闪光”，你是在说你个人在StackOverflow上看到了一个白色闪光吗？ - user3163495

是的，在Chrome Dev工具中使用节流并自己检查。在使用缓慢的3G网络时，我看到了大约1或2秒钟的白色内容。 - Jorjon

Answer 1

我在这方面确实遇到了很多困难，所以我会尽力分享我在消除白色闪烁怪物的旅程中学到的东西。

提示1：使用像React或Angular这样的客户端模板引擎

• 之所以这是＃1提示，是因为使用这些工具，您实际上永远不需要重新加载页面，这是“白色闪烁”的主要罪魁祸首。最终，您只有一个页面与React或Angular（除非您使用服务器端呈现或类似的东西）。

提示2：不要更改背景颜色/图像

• 如果您在整个应用程序中保持背景一致，则“白色闪烁”将极其微小

提示3：考虑使用背景图像。

• 这是我在这方面遇到的最大困难，因为我需要在页面已经加载完成后应用背景图片。由于这个原因，我仍然看到了白色闪烁，但是我采取了一些步骤来减少这种情况。
  • 使用备用背景颜色，在图像加载时使用。
  • 使用https://tinypng.com/压缩图像
  • 在图像加载完成后，使用酷炫的淡入效果将图像动画化

提示4：提高性能（即缩小CSS文件）

• 正如你已经发现的那样，这只在应用程序的初始加载时真正重要，但它仍然很重要。

总之，如果您重新加载网页，您总会看到白色闪烁。但是，即使您没有使用React或Angular加载内容，您仍然可以采取措施来减少这种情况。您会注意到，您列出的网站有一个白色背景的原因；）

再次强调，如果有其他建议，我很乐意看到它们，但这些是我在自己的研究中发现的。

[编辑]添加备用建议

- Michael Sorensen

---

过分膨胀网站实际上会使其变得更慢，仅仅因为你担心这个白屏闪烁可能是最糟糕的建议。将模板等客户端操作具有一定用途，但这不是唯一原因。 - Brad

此外，你的建议不应该是“不要使用背景图片”，而应该是“除了背景图片之外，还要使用备用背景颜色”。有些人的浏览器配置可能根本不加载背景图片。你需要确保你的文本在这种情况下也能够显示出来。 - Brad

@Brad 你说得对，如果决定使用背景图片，确实应该有一个备用颜色。我会进行修正。但是，关于你提到的第一个观点。使用客户端渲染完全消除了“白屏闪烁”问题，这也是问题所在。这个问题并不是在询问要使用哪种渲染模板。我从未声称它在所有情况下都是最好的选择。 - Michael Sorensen