Louis Lazaris 演示 了一个非常简单的方法。
- 使用声明
opacity: 0的 CSS 类立即隐藏 body（使用 JavaScript）。 - 等待所有 JavaScript 执行。
- 通过将其过渡回
opacity: 1来取消隐藏 body。
就像这样
Louis 演示了回调方法，还提到了可以等待 window.load 或 DOM 就绪事件。我想你也可以像我上面那样，将设置 className 为 visible 的行作为最后运行的脚本行。
Louis 知道这不是特别流行。
我知道现在这个行业痴迷于在页面性能方面争取每一毫秒。但在最近重新设计的几个项目中，我添加了一个微妙而简洁的加载机制，我认为它让体验更好了，即使它确实最终稍微延迟了用户开始与我的页面交互的时间。
我认为像 font-display: swap; 这样的东西，它专用于尽可能快地渲染你的文本，无论 FOUT 是什么，而不是 更冷静的选择。
第一行说用 JavaScript 隐藏 body，但示例是用 css 隐藏的。
啊，这有点不清楚。它是用 CSS 隐藏的，但它是用 JS 应用的。刚更新了它！
您也可以将不透明度 0 添加到 style 标签中，并使用 JS 删除该属性，同时还可以添加一个 noscript 标签，其中包含强制显示 body 的样式，这样即使没有 javascript 也能正常工作。
这是一种有趣的技巧，当它起作用时，它确实看起来不错（我曾在客户的要求下使用过类似的东西），但我认为这篇关于 CSS Tricks 的链接文章本应该更好地突出这种技巧的危险，并指出它不适合所有网站。
这将对首屏绘制分数（https://webdev.ac.cn/fcp/）产生影响，并以负面方式影响网站的 Lighthouse 分数。这意味着现在核心 Web 指标是排名因素，可能会降低 Google 的排名。
也许有人不关心 Lighthouse 分数，并且认为他们不应该按照 Google 的要求构建网站。这是一个合理的批评！:)
但如果用于删除
opacity:0CSS 的 JS 无法执行，会发生什么？这可能是由于我们代码中的错误导致回调永远无法触发，也可能是由于用户下载的浏览器扩展程序中的错误造成的，甚至可能是由于过于热心的广告拦截器阻止了某些内容加载，因为它看起来与广告有关。网络是一个奇怪的环境，我们不知道用户下次会从什么硬件或软件访问我们的网站，因此，为我们构建网站，使其能够优雅地失败，而不是以空白状态失败，是有意义的。
即使 JS 没有因实际错误或错误而失败，很多事情也会使它变得非常慢。也许有人最终会延迟过渡，直到用于广告的第三方 JS 文件加载完毕，或者分析，或者一个大型的 CDN 托管库，这些库可能需要几分钟才能在断断续续的 3G 连接中加载完毕。或者，也许用户在火车或地铁或公共汽车上旅行时正在使用手机，而用户在页面开始加载时正好经过隧道？在那段时间内，用户只能盯着空白页面，或者更有可能，离开并去别处。
我认为，与这种技术相比，有更安全的技巧来解决作者提到的问题（未设置样式的文本闪烁、图像未在加载前预留空间导致的累积布局偏移等）。我们现在可以使用现代解决方案来解决这些问题，而不是将这些问题隐藏在一个缓慢的启动画面后面，从而为用户提供良好的体验，同时使我们的网站更能抵御不良网络或不可预见的错误等问题。
我喜欢它的简单性。我想知道它是否（以及如何）会改变 Lighthouse 测试期间的可访问性得分，例如整体对比度。
是的，我喜欢平滑的过渡！这纯属巧合：上周我正在构建一些基于相同原则的东西；并结合一些速度改进的其他 css 和 js 来弥补。 - 计划制作一个“如何构建”页面（英文），但首先我得制作（荷兰语）网站本身。:-)
首页的测试页面
* clba.nl/experiments/fadingtest
CLS（累积布局偏移：0.007）不差，Google 的页面速度洞察对于桌面来说很满意，得分为 100/100。