UI渲染和JS执行先后问题

Question

beginsetTimeout(function(){alert('ui已经渲染完毕了吗？');console.log('timeout1');newPromise(function(resolve){console.log('promise3');resolve();console.log('promise4');}).then(function(){alert('为什么这里ui已经渲染成finally了');console.log('then2');})div.innerHTML='finally';})newPromise(function(resolve){console.log('promise1');resolve();console.log('promise2');}).then(function(){console.log('then1');alert('ui开始渲染');})console.log('global1');div.innerHTML='end';ui在第一个事件循环之后innerHTML渲染成end我能理解，进入settimeout之后为什么渲染在微任务之前执行

Answer 1

因为Promise是个异步的操作。你的.then()本质上就是一个callback回调函数。执行完newPromise()之后，仅仅给你返回一个句柄，然后继续往下执行div.innerHTML='finally';。
js本来就是异步的。你想按正常的人脑逻辑执行的话，用async/await去做。但async本质上还是promise
                            

Answer 2

虽然在超时调用中，但本质是不会变的，newpromise()异步的，和同步放在一起当然是同步先执行，虽然说promise是解决回调深渊问题的，但还是会进行一个异步操作，.then()返回结果。补充一句，业务逻辑的问题，你最好自己亲自调试下。