实时服务器、动画和开发工具（动画在 FP 到达之前开始）

Question

我在页面上有预加载器（这是一个动画），可以隐藏重要内容，直到准备好为止。预加载器必须执行 1.5 秒的动画，但是有一个问题，动画在浏览器在屏幕上输出任何像素之前就开始了。如果某些东西会延迟 FP（第一次绘制 - 开发工具中的术语），那么我将看到声明的动画的一部分，例如 978 毫秒，而不是 1.5 秒，这不是我想要的期望。

另一个问题涉及实时服务器，即 VSCode 的扩展。 如果我运行具有完全相同预加载器的页面，我将看到以下内容： 这些紫色短绳是

Pre-paints

和

Layerise

。我试图找到什么是

Pre-paints

的任何答案，但没有成功，什么也没找到。

如果我在没有实时服务器的情况下运行相同的内容，我会看到以下内容：

您可以注意到，与未运行时不同，实时服务器会破坏预期的动画 1.5 秒，但当实时服务器离线时，动画会在 FP 之前开始。这也是一个问题，我不能指望为任何动画设置的时间，因为它取决于延迟 FP 的因素。

这里，当我在没有实时服务器的情况下运行页面时显示得更准确

开始条纹动画和 FP 之间的时间约为 6 毫秒（几乎立即），但与实时服务器相比，约为 500 毫秒。

总共：

1. 如何解决这个问题，我的意思是如何控制 FP 并消除页面上第一个动画的时间与 FP 之间的延迟
2. 当我使用实时服务器时，为什么会出现（大量）

   Pre-paints

   和

   Layerise

   ？是什么导致它们出现（我们可以控制它们）吗？

Answer 1

在处理首次绘制 (FP) 延迟等因素以及本地开发环境（例如实时服务器和常规浏览器渲染）之间的行为差异时，工具本身可能存在固有的滞后。为了确保动画在首次绘制后开始，您需要动画应该开始直到浏览器绘制完第一帧内容。 一种常见的方法是使用 DOMContentLoaded 事件。 您还可以考虑使用带有动画延迟的 CSS 动画，以确保动画在所需时间后开始。尽管您需要考虑第一次绘制发生所需的时间。

document.addEventListener("DOMContentLoaded", function() {
  // Delay the start of the animation
  setTimeout(function() {
    // Trigger the animation by adding a class
    document.getElementById("content").classList.add("fadeIn");
  }, 1000); // Adjust the delay time as needed
});