Vue3大屏项目优化白屏时间，这个方法简直无敌

欢迎关注 『开发必备』 专栏，专注于解决你在开发过程中遇到的各种问题，帮你快速找到解决方案，节省大量调试时间。内容持续更新中，保证每篇都值得收藏！

---

最近在做一个 Vue3 的可视化大屏项目时，遇到一个头疼的问题：首页加载时总会有一段白屏时间，尤其是在数据量较大的情况下，体验极差。琢磨了很久，终于找到了一种优雅的解决方案，用到了 requestAnimationFrame 和 Vue3 的 ref，效果简直超预期。

1. 为什么会有白屏？

白屏的主要原因是，页面在首屏渲染之前，需要等待数据加载和资源解析完成。如果页面结构复杂、数据量大，白屏时间会进一步拉长。特别是在可视化大屏中，大量的图表渲染对性能提出了更高要求。

2. 解决思路</