共计 1547 个字符，预计需要花费 4 分钟才能阅读完成。
作者：心叶时间：2019-03-08 09:45
我的理解
先列出我的理解，然后再从具体的例子中说明：
DOM 操作本身应该是同步的（当然，我说的是单纯的 DOM 操作，不考虑 ajax 请求后渲染等）
DOM 操作之后导致的渲染等是异步的（在 DOM 操作简单的情况下，是难以察觉的）
证明存在异步
DOM 从操作到渲染结束，我想先用一个具体的例子来说明。
例子说明：把 img 标签先追加到页面，然后把 img 里面的内容绘制到 canvas 上，代码如下：
<body>
<div id=’target’></div>
<canvas id=’canvas’></canvas>
<script>
var template = ‘<img ‘
+ ‘id=”img” ‘
+ ‘width=”300″ ‘
+ ‘height=”150″ ‘
+ ‘src=”data:image/svg+xml;charset=utf-8,<svg xmlns=\’http://www.w3.org/2000/svg\’><foreignObject ‘
+ ‘width=\’120\’ ‘
+ ‘height=\’50\’ ‘
+ ‘><body xmlns=\’http://www.w3.org/1999/xhtml\’>’ +
‘<p> 这是一个例子 </p>’ +
‘</body></foreignObject></svg>” />’;
// 第一步，添加到页面
document.getElementById(‘target’).innerHTML = template;
// 第二步：绘制到 canvas 上
document.getElementById(‘canvas’)
.getContext(‘2d’)
.drawImage(document.getElementById(‘img’), 0, 0);
</script>
</body>
看看运行效果：
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 是同步的，那么渲染就是异步的。
例子结束，代码地址：https://github.com/yelloxing/…
总结
DOM 操作只是结点操作，而页面最终的效果还会有 render 渲染树等参与，因此，虽然 DOM 操作是同步的，而你期望的「DOM 操作」却不一定是同步的，包括调用外设（外设要看具体设备，有的设备会阻塞浏览器执行，什么意思，就是浏览器的异步操作也会停止，结合这里的异步操作的理解，就可以解释一些奇怪现象了）等，需要在日常开发的时候注意。
