为什么有些网页有不稳定的渲染

Question

请参阅this link。请注意，搜索栏首先呈现在屏幕顶部附近。然后将其自身对准徽标。我认为一些css规则导致了这一点，但我无法弄明白。能否帮我解释一下原因。在代码中应该避免什么，以避免/最小化这种行为。

Answer 1

当你有一个覆盖前一个阻塞的css规则时，就会发生这种情况。最好的办法是让css文件中的第一件事就是阻塞normalizing。每当您需要某个地方或具有特定大小的某些内容时，您应该转到代码的阻止部分。

但是，您展示的网站中最重要的部分是加载fancybox css文件所需的时间。

Answer 2

这个问题可能就是每个浏览器加载和呈现内容的方式，以及网络下载内容的速度。由于有许多Javascript和CSS文件，因此只需缓慢解析它们并在网络和浏览器仍在下载和加载所有内容时配置网站。

我在Chrome和Firefox中看过它，它似乎对我来说很好。