Stackoverflow如何防止页面加载之间出现“白色闪烁”？

Question

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

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

无论我尝试什么，在每个新页面加载之前仍然会出现~10ms的白色“闪光”。

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

Answer 1

我实际上已经为此付出了很多努力，所以我会尽我所能分享我在杀死白色闪光怪物的过程中学到的东西。

提示＃1：使用客户端模板引擎，如React或Angular

• 这就是＃1提示的原因是因为使用这些工具你实际上不需要重新加载页面，这是“白色闪光”的主要元凶。在一天结束时，您只有一个页面具有React或Angular（除非您使用服务器端渲染或类似的东西）。

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

• 如果您在整个应用中保持背景一致，则可以使用白色闪光灯＆＃39;将是极其微不足道的

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

• 这是我最挣扎的地方，因为我需要在页面技术上已经加载后应用背景图像。因为这个，我仍然看到一个白色闪光但是，我采取了一些措施来减少这种情况。
  • 使用后备背景颜色在图片加载时使用。
  • 使用https://tinypng.com/
  压缩图像
  • 在图像加载了很酷的淡入效果后，将图像设置为动画

提示＃4：提高效果（即缩小CSS文件）

• 正如您已经发现的那样，这只对您应用的初始加载非常重要，但它仍然很重要。

总之，如果您重新加载网页，您将始终获得白色闪光。但是，即使您没有使用React或Angular加载内容，也可以做一些事情来减少这种情况。您会注意到您列出的网站有白色背景的原因;）

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

[编辑]添加后备建议