关于event loop的一些疑惑

Question

以下这段代码按照事件循环机制，不应该是先打印出‘heap over'再打印xhr.readyState最后打印responseText吗，为什么最终结果是先打印了xhr.readyState的状态码1再打印’heap over'，再继续打印readyState的其他状态码，onreadystatechenge到底是同步还是异步？当我把open方法放到onreadystate之前又先打印‘heap over’，有点搞不懂

var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {

            console.log(xhr.readyState)

                if(xhr.readyState == 4 && xhr.status == 200){

                    console.log(xhr.responseText);

                }

            }

xhr.open("GET",'data.txt',true); 

    xhr.send(null);

    for(var i = 0; i < 1000000000; i ++) {}

    console.log('heap over')

Answer 1

调用xhr.open("GET",'data.txt',true); 的时候会改变readyState，所以先触发了一次onreadystatechange