javascript - Stackoverflow 如何防止页面加载之间出现 "white flash"？

Question

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

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

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

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

Answer 1

我实际上为此苦苦挣扎，所以我会尽我所能分享我在杀死白色闪光怪物的过程中学到的东西。

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

• 这是第一个技巧的原因是因为使用这些工具您实际上不需要重新加载页面，而这是“白色闪光”的罪魁祸首。在一天结束时，你只有一个页面包含 React 或 Angular(除非你使用服务器端渲染或类似的东西)。

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

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

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

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

提示 #4:提高性能(即缩小 CSS 文件)

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

总而言之，如果您重新加载网页，您总是会看到一个白色的闪光灯。但是，即使您没有使用 React 或 Angular 加载内容，您也肯定可以做一些事情来减少这种情况。你会注意到你列出的网站有一个白色背景是有原因的;)

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

[编辑] 添加后备建议