摘要：关于异步应该很多地方都说过，是单线程的，严格的说，是指引擎中负责解释和执行代码的线程只有一个，除此之外，其实还有事件触发线程请求线程等，因此，应该说同步是单线程可能更准确些。
作者：心叶
时间：2019-03-08 09:45
先列出我的理解，然后再从具体的例子中说明：
DOM操作本身应该是同步的（当然，我说的是单纯的DOM操作，不考虑ajax请求后渲染等）
DOM操作之后导致的渲染等是异步的（在DOM操作简单的情况下，是难以察觉的）
证明存在异步DOM从操作到渲染结束，我想先用一个具体的例子来说明。
例子说明：把img标签先追加到页面，然后把img里面的内容绘制到canvas上，代码如下：
看看运行效果：
canvas上什么也没有绘制出来，而img上面是有内容的（也就是「这是一个例子」这段文字）。
接着，在img添加到页面后，绘制canvas前添加一个延迟，我们修改一下第二步地方的代码如下：
window.setTimeout(function () {
document.getElementById("canvas")
.getContext("2d")
.drawImage(document.getElementById("img"), 0, 0);
}, 100);
再次运行，查看效果：
内容出来了。
因此，异步是存在的，只不过是在DOM操作还是渲染上就不清楚了。
证明DOM操作是同步的接着上面的例子，想证明DOM操作是同步的很简单，依旧修改第二步的代码如下：
window.setTimeout(function () {
document.getElementById("canvas")
.getContext("2d")
.drawImage(document.getElementById("img22"), 0, 0);
}, 100);
我们修改drawImage方法查找结点的id为一个错误的"img22"，显然查找不到，运行结果如下：
我们看见浏览器报错了，因此，如果DOM操作是异步的，在没有添加延迟的时候不应该是什么都没有绘制出来，而是应该报错，因此DOM是同步的，那么渲染就是异步的。
例子结束，完整代码请见评论（方便大家阅读放到评论去）。
关于异步应该很多地方都说过，js是单线程的，严格的说，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，除此之外，其实还有事件触发线程、ajax请求线程等，因此，应该说：同步是单线程可能更准确些。
另外，同步会阻塞异步，看一下下面的代码：
setTimeout(function() {
console.log("异步执行了");
}, 0);
while(true);
因为同步代码while条件一直为真，你在看见『异步执行了』前估计先看见浏览器页面卡卡的。
总结DOM操作只是结点操作，而页面最终的效果还会有render渲染树等参与，因此，虽然DOM操作是同步的，而你期望的「DOM操作」却不一定是同步的，包括调用外设（外设要看具体设备，有的设备会阻塞浏览器执行，什么意思，就是浏览器的异步操作也会停止，结合这里的异步操作的理解，就可以解释一些奇怪现象了）等，需要在日常开发的时候注意。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109006.html
摘要：深入理解引擎的执行机制最近在反省，很多知识都是只会用，不理解底层的知识。在阅读之前，请先记住两点是单线程语言的是的执行机制。所以，是存在异步执行的，比如单线程是怎么实现异步的场景描述通过事件循环，所以说，理解了机制，也就理解了的执行机制啦。 深入理解js引擎的执行机制 最近在反省，很多知识都是只会用，不理解底层的知识。所以在开发过程中遇到一些奇怪的比较难解决的bug，在思考的时候就会收...
摘要：还请同学跟我多多探讨关于修改是异步还是同步的问题先来看代码上述代码的结果完全就是同步的表现，如果是异步的话，毫无疑问，第一个下的每个内容都应该是，第二个也应该是。 回 @bf 同学 本篇文章不是笔记也不是心得，而是关于一个问题的讨论，问题最初出现于https://segmentfault.com/q/1010000005630545?_ea=903562 由于 @bf 同学不方便...
摘要：深入理解引擎的执行机制灵魂三问为什么是单线程的为什么需要异步单线程又是如何实现异步的呢中的中的说说首先请牢记点是单线程语言的是的执行机制。 深入理解JS引擎的执行机制 1.灵魂三问 : JS为什么是单线程的? 为什么需要异步? 单线程又是如何实现异步的呢? 2.JS中的event loop(1) 3.JS中的event loop(2) 4.说说setTimeout 首先,请牢记2...
摘要：的精髓在于，用维护状态传递状态的方式使得回调函数能够及时调用，比传递要简单灵活的其他方法用于指定发生错误时的回调函数，等同于部分和的区别在发生异常，在中捕获不到能够捕获异常。 ES6是个啥 ECMAScript是国际通过的标准化脚本语言JavaScript由ES,BOM,DOM组成ES是JavaScript的语言规范，同时JavaScript是ES的实现和扩展6就是JavaScript...
摘要：本文将解释引起这个错误的内在原因，检测机制的内部原理，提供导致这个错误的共同行为，并给出修复这个错误的解决方案。这一次过程称为。这个程序设计为子组件抛出一个事件，而父组件监听这个事件，而这个事件会引起父组件属性值发生改变。 原文链接：Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedE...
阅读 1932·2021-11-24 09:39
阅读 3517·2021-09-28 09:36
阅读 3288·2021-09-06 15:10
阅读 3438·2019-08-30 15:44
阅读 1157·2019-08-30 15:43
阅读 1799·2019-08-30 14:20
阅读 2714·2019-08-30 12:51
阅读 2033·2019-08-30 11:04
