<div id="div">
begin
</div><script>
setTimeout(function() {
alert(" ui ");
console.log("timeout1");
new Promise(function(resolve) {
console.log("promise3");
resolve();
console.log("promise4");
}).then(function() {
alert(" uifinally ");
console.log("then2");
})
div.innerHTML = "finally";
})
new Promise(function(resolve) {
console.log("promise1");
resolve();
console.log("promise2");
}).then(function() {
console.log("then1");
alert(" ui ");
})
console.log("global1");
div.innerHTML = "end";
</script>ui renders innerHTML to end after the first event loop. I can understand why rendering executes before microtasks after entering settimeout