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：请勿更改背景颜色/图像

• 如果您在整个应用中保持背景一致，则“白色闪光”将非常小

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

• 这是我为此最苦恼的地方，因为在技术上已经加载页面之后，我需要应用背景图片。 因此，我仍然看到白色闪烁，但是我采取了一些措施来减少这种情况。
  • 在加载图像时使用后备背景色。
  • 使用https://tinypng.com/压缩图像
  • 在图像加载了淡入淡出效果后，对图像进行动画处理

提示4：提高性能（例如，缩小CSS文件）

• 正如您已经发现的那样，这仅对应用程序的初始加载确实很重要，但是，它仍然很重要。

结束语，如果您重新加载网页，将始终出现白色闪烁。 但是，即使您没有使用React或Angular加载内容，也肯定可以做些减少它的事情。 您会注意到，由于某些原因，您列出的网站背景为白色；）

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

[编辑]添加了后备建议