浏览器可以在下载完整个HTML代码之前就开始渲染页面。（如果你不相信我，可以阅读在关键渲染路径上有哪些资源？这篇文章的第五句，或者对你的Web服务器进行限流。）

因此，两个元素并非总是在同一时刻渲染。怎样才能确保它们真的同时渲染呢？

这种情况可能有多种原因：

• 一个元素在另一个还未出现时，单独出现可能显得丑陋或产生误导。
• 添加内容往往会耗费用户的精力（他们已经开始熟悉第一次渲染的内容，然后又要重新调整）。
• 用户可能把逐步出现误解为故意的动画，在某些情况下可能会产生误导。
• 我们可能想要追求艺术自由，或满足客户的需求。
• 这可以避免布局偏移（在某些场景下，这比在逐步出现某些元素时采用避免布局偏移的技术更容易实现、也更轻量）。

解决方案

在实际操作中，你无法保证两个独立的元素会在完全相同的时刻渲染，因为浏览器控制着渲染过程。
然而，你可以通过先把两个元素都准备好，然后在一次更新中把它们加入到DOM，从而实现它们的同时出现。另一种常见做法是将父容器保持隐藏状态，直到所需的内容都就绪后再显示它。从用户的角度看，两个元素一起出现，这样可以避免部分渲染，并有助于防止布局偏移。