css在加载时闪屏

CSS在加载时的闪屏现象是指页面在加载完成之前，会短暂地出现一段无样式的文本内容，然后才会应用CSS样式进行渲染。这个现象可能会给用户带来不好的体验，因为页面一开始显现的内容就显得不太自然，显得比较突兀。

为了避免这种闪屏现象的出现，我们可以采用一些优化技巧，让CSS在加载的时候更为快速、有效。

/* 首先让页面绝对定位 */
body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 然后设置一个页面加载完的 class，避免闪屏 */
body.loading {
  visibility: hidden;
}

/* 在 CSS 加载结束后再移除 class，让页面渲染 */
body.loading main {
  visibility: visible;
}

通过以上方法，我们可以使用 JavaScript 在页面开头加上一个 "loading" 的 class，然后在 CSS 加载完成后再移除这个 class。这样就可以避免闪屏了。当然，如果你使用的是一些比较快速的服务器、CDN、或者使用了缓存之类的方法，就可以更好地避免这个现象。