CSS 在 HTML 之后渲染

Question

我遇到一个问题，我的网站在 HTML 一秒左右后呈现 CSS，所以在样式呈现之前基本上有一个白色无样式页面出现一秒钟. FireFox 上的问题更严重。我怎样才能解决这个问题？

Answer 1

我不熟悉wordpress不知道如何实现这个，但我确实遇到了类似的问题Laravel。经过一些阅读和开发后，我想出了这个。效果很好。

将其放在标题部分：

<script type="text/javascript">
    document.documentElement.style.opacity = 0;
    window.addEventListener('load', function () {
        document.documentElement.classList.add("showhtml");
    });
</script>

创建一个 CSS 条目：

html.showhtml {
  opacity: 1 !important;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}

它的作用是强制页面在 HTML-tag 上以不透明度 0 呈现。加载添加的侦听器后，'load' 开始行动并将 CSS class showhtml 添加到 HTMl-tag。 CSS 然后将页面设置为不透明度为 1 的动画。这是一个优雅的解决方案，您可以控制动画的速度，如果有人关闭了他们的 javascript，您的页面也会显示。

CSS 在 HTML 之后渲染

CSS Rendering After HTML

html

css

wordpress

pagespeed