html事件是异步的吗,javascript – innerHTML是异步的吗？

设置innerHTML是同步的,您可以对DOM进行大多数更改.但是,呈现网页是一个不同的故事.

(请记住,DOM代表“文档对象模型”.它只是一个“模型”,一个数据表示.用户在屏幕上看到的是该模型应该如何看的图片.因此,更改模型不会立即改变图片 – 需要一些时间来更新.)

运行JavaScript并呈现网页实际上是分开进行的.简单地说,首先运行页面上的所有JavaScript(从事件循环 – 查看this excellent video以获取更多详细信息),然后浏览器呈现对网页的任何更改以供用户查看.这就是为什么“阻塞”是如此重要的原因 – 运行计算密集型代码会阻止浏览器通过“运行JS”步骤并进入“呈现页面”步骤,从而导致页面冻结或断断续续.

Chrome的管道如下所示：

如您所见,所有JavaScript都是先发生的.然后页面被样式化,布局,绘制和合成 – “渲染”.并非所有此管道都将执行每一帧.这取决于更改的页面元素(如果有)以及如何重新呈现它们.

注意：alert()也是同步的,并在JavaScript步骤中执行,这就是在您看到网页更改之前出现警告对话框的原因.

你现在可能会问：“坚持,管道中的’JavaScript’步骤究竟会运行什么？我的所有代码每秒运行60次吗？”答案是“不”,它可以追溯到JS事件循环的工作原理. JS代码只有在堆栈中才会运行 – 来自事件监听器,超时等等.见previous video(真的).