渐进式渲染怎么做才能不闪屏？

一世杰提问于 2026-03-22 22:30:21 阅读 59

优化

我在做首屏优化，尝试用渐进式渲染先显示骨架屏再加载真实内容，但页面老是闪一下白屏或者布局跳动，体验很不好。

我现在的做法是用 visibility: hidden 隐藏内容区域，等数据回来再切 visibility，但好像没解决问题。有没有更稳的方案？

这是我的关键代码：

.skeleton {
  display: block;
}
.content.loaded {
  visibility: visible;
}
.content:not(.loaded) {
  visibility: hidden;
}

我来解答赞 5 收藏

反馈

2 条解答

Mr.子尧 Lv1

通用的做法是使用 opacity 来实现渐进式渲染，而不是 visibility。visibility 会导致内容在加载时突然出现，造成闪屏现象。

你可以试试这样改：

.skeleton {

  display: block;

}

.content {

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}

.content.loaded {

  opacity: 1;

}

另外，为了防止布局跳动，确保骨架屏和真实内容的布局结构尽量保持一致。特别是高度、宽度这些关键属性要匹配好。

还有个小技巧，在页面初始化时给 .content 加一个最小高度，比如 min-height: 200px;，这能进一步减少内容加载时的抖动。

最后提醒一下，别忘了在 JavaScript 中处理好加载完成后的样式切换时机，最好是等数据完全准备好再把 loaded 类加上去。这个过程最好放在 DOMContentLoaded 事件之后，避免过早触发显示。

2026-03-27 14:10

明明🍀 Lv1

visibility 切换有时候确实会闪屏，可以试试 opacity 和 transition 结合的方式，这样过渡会平滑一些。你这个情况可以改成：

.skeleton {

  display: block;

}

.content {

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

}

.content.loaded {

  opacity: 1;

}

这样内容加载完成后，通过 opacity 的变化来过渡，体验会好很多。拿去改改。

2026-03-22 23:01