chrome如何计算重绘区域？

Question

chrome dev工具现在支持显示绘制矩形，这确实有帮助。但我发现一些奇怪的事情，有时重绘区域太大而无法理解。

这是我的代码

<style type="text/css">
    div { width:500px; height:30px; border:1px solid red; margin:20px;}
    div.inner { width:400px; height:20px; border:1px solid green; margin:5px;}
</style>
<div id="txt"></div>
<div></div>
<div>
    <div class="inner">

        <script> document.write(111);</script>
    </div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=9"></script>
<div>
    <div class="inner">

        <script> document.write(222);</script>
    </div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=10"></script>
<div>
    <div class="inner">

        <script> document.write(333);</script>
    </div>
</div>
<script src="http://chillrain.com/api/sleep.php?time=11"></script>
<div></div>
<div></div>
    <script> setTimeout( function(){ 
    document.getElementById('txt').innerHTML = "Hello World!"
} ,1000);
</script>

注意：sleep.php会休眠几秒钟，然后不返回任何内容，用它来阻止页面的渲染。

第一步，似乎没问题，它描绘了整个页面

第二步，你认为重绘区域太大了吗？

第三步，太大了......

第四步，似乎没关系，它重新整理了整个页面。 第五步，似乎没关系，它只重画'txt'div

为什么第二步和第三步重绘大面积？