innerHTML是异步的吗？ [英] Is innerHTML asynchronous?
问题描述
我希望我不会愚弄自己，但我试图理解这两行代码中发生了什么：
document.body.innerHTML ='something';
alert（'别的东西'）;
我观察的是HTML更新之前的警报显示（或者它可能只有页面没有刷新/重新绘制/不管）
结帐
正如您所看到的，所有的JavaScript都会先发生。然后页面被设计，布局，绘画和合成 - 渲染。并非所有的这个管道都会执行每一帧。它取决于哪些页面元素发生了变化（如果有），以及它们需要如何重新渲染。
注意： alert（）也是同步的，并在JavaScript步骤中执行，这就是为什么在看到网页更改之前出现警告对话框。
您现在可能会问管道中'JavaScript'步骤究竟运行了什么？我的代码每秒运行60次吗？答案是否，并回到JS事件循环的工作方式。 JS代码只能在堆栈中运行 - 从事件监听器，超时等等。请参阅以前的视频（真的）。
https://developers.google.com/web/fundamentals/performance/rendering /
I hope I won't make a fool of myself but I'm trying to understand what is happening in those two lines of code:
document.body.innerHTML = 'something';
alert('something else');
What I am observing is that alert shows before HTML has been updated (or maybe it has but the page hasn't been refreshed/repainted/whatever)
Checkout this codepen to see what I mean.
Please note that even putting alert in setTimeout(..., 0) does not help. Looks like it takes more event loops for innerHTML to actually update page.
EDIT:
I forgot to mention I am using Chrome and did not check other browsers. Looks like it's only visible in Chrome. Nevertheless I am still interested why is that happening.
Setting innerHTML is synchronous, as are most changes you can make to the DOM. However, rendering the webpage is a different story.
(Remember, DOM stands for "Document Object Model". It's just a "model", a representation of data. What the user sees on their screen is a picture of how that model should look. So, changing the model doesn't instantaneously change the picture - it take some time to update.)
Running JavaScript and rendering the webpage actually happen separately. To put it simplistically, first all of the JavaScript on the page runs (from the event loop - check out this excellent video for more detail) and then after that the browser renders any changes to the webpage for the user to see. This is why "blocking" is such a big deal - running computationally intensive code prevents the browser from getting past the "run JS" step and into the "render the page" step, causing the page to freeze or stutter.
Chrome's pipeline looks like this:
As you can see, all of the JavaScript happens first. Then the page gets styled, laid out, painted, and composited - the "render". Not all of this pipeline will execute every frame. It depends on what page elements changed, if any, and how they need to be rerendered.
Note: alert() is also synchronous and executes during the JavaScript step, which is why the alert dialog appears before you see changes to the webpage.
You might now ask "Hold on, what exactly gets run in that 'JavaScript' step in the pipeline? Does all my code run 60 times per second?" The answer is "no", and it goes back to how the JS event loop works. JS code only runs if it's in the stack - from things like event listeners, timeouts, whatever. See previous video (really).
https://developers.google.com/web/fundamentals/performance/rendering/
这篇关于innerHTML是异步的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
