uniapp 的vue页面长列表渲染过程中会有一瞬间的白屏怎么办

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

根据知识库内容，vue 页面长列表渲染出现白屏通常是由于页面 DOM 节点过多导致的渲染压力问题。当数据量达到 180 条左右时，一次性渲染过多节点会造成浏览器/渲染引擎的短暂卡顿或白屏。

解决方案

1. 改用页面级滚动（关键优化）

根据知识库文档，scroll-view 不适合放长列表，有性能问题。webview 渲染时，建议改用 webview 的页面滚动（即不使用 scroll-view，直接让页面自然滚动），这样 webview 会对不可见部分自动回收渲染资源。

2. 使用虚拟列表组件

对于超长列表，建议使用实现了 DOM 复用的虚拟列表组件，只渲染可视区域内容：

• 推荐插件市场方案：虚拟列表，长列表优化 - 针对 APP、H5 超长列表优化，支持 Vue2
• 或者 微信小程序长列表，h5长列表，可视范围，虚拟dom - 采用可视范围渲染，减少渲染节点

3. 分页组件化（数据隔离）

根据性能优化建议，长列表中单个组件存在大量数据时，数据更新会消耗较多时间。建议：

• 将列表数据分页处理，每页数据使用独立组件隔离
• 参考示例：长列表优化示例

4. 添加骨架屏/占位组件

如果白屏发生在联网加载数据期间，可在 template 中添加骨架屏或 loading 组件作为占位，让本地先显示内容，避免空白等待：

"在 pages.json 里配置原生导航栏和背景色...在 template 里做一些简单占位组件，比如 loading 组件、骨架屏，让本地先显示一些内容" (详见)

5. 检查组件性能

检查列表中是否有组件写得不好（如过度嵌套、复杂计算）拖累整体页面，特别是点赞、状态变更等交互组件，必须单独引用以实现差量更新，避免整列表重载。

不推荐做法：避免在 scroll-view 中做长列表区域滚动，这在小数据量时没问题，但数据达到 100+ 条时很容易出现性能瓶颈和白屏。

简直胡扯，我找到问题了，我来看看有没有人回答，结果看到了AI在这里胡扯。
狗屎玩意儿，整个AI在这里敷衍工作。

我的问题是 卡片文案中在180条左右的时候这个词 “譺?” 导致重新渲染的，我把这个词换掉之后就好了

这个字 你们的评论区都显示不出来，我还得截图给你们看