html - chrome如何计算重绘区域？

Question

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

这是我的代码

<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 将休眠几秒钟，然后什么也不返回，用它来阻止页面的呈现。

第一步，看起来不错，它绘制了整个页面

在此处输入图像描述