document.write（）使循环卡住

Question

为什么当我添加document.write("2");时页面不会停止加载并且循环无法正常工作：

document.addEventListener('DOMContentLoaded', load);

function load(){
    for (var  x = 0; x < 10; x++) {
       document.querySelector('#posts').innerHTML += 'hi';
       document.write("2");
    }
}

<div id="posts"></div>