javascript - Chrome怎么没有绘制部分DOM更新？

我正在努力更好地了解Chrome（和其他浏览器）如何呈现网页。我现在对DOM和CSSOM的构建方式有了一些很好的理解。另外，我对执行布局和绘制阶段的过程有所了解。

我尝试了以下想法：

JS Fiddle可用here。很抱歉这个例子的质量，但我赶紧起草这个。

根据时间线分析，我发现每个<div>都是在第一个Paint出现之前布局的。这肯定不是我想要的，因为页面加载后屏幕上只能看到前10个。

所以我想我将首先渲染最初的10个项目，我希望这些项目会导致Paint。就在那之后（将呼叫包裹在setTimeout(function(){},0)中）我将剩余的990个项目附加到正文中。

我希望在最初的10个项目布局之后立即进行Paint方法，但这不会发生。我可以看到两个Layout阶段，Paint在所有1000个项目布局后发生。任何想法我在哪里出错？

Timeline output