how does the chrome calculate the repaint area? - html

Question

the chrome dev tools now support to show paint rectangles,it really helps.but i found some strange thing that sometimes the repaint area is too large to understand.
this is my code
<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>
notice:sleep.php will sleep seconds and then return nothing, using it to block the page's rendering.
the first step,seems ok,it paints the whole page
the second step,donot u think the repaint area is too large?
the third step,too large ...
the fourth step, seems okay , it repaint the whole page again.
the fifth step,seems okay, it only repaint the 'txt' div
why the second and the third steps repaint so large area?