关于DOM操做是异步的仍是同步的相关理解

时间 2019-11-07

标签关于 dom 异步仍是同步相关理解栏目 HTML 繁體版

原文原文链接

做者：心叶
时间：2019-03-08 09:45html

个人理解

先列出个人理解，而后再从具体的例子中说明：ajax

DOM操做自己应该是同步的（固然，我说的是单纯的DOM操做，不考虑ajax请求后渲染等）
DOM操做以后致使的渲染等是异步的（在DOM操做简单的状况下，是难以察觉的）

证实存在异步

DOM从操做到渲染结束，我想先用一个具体的例子来讲明。canvas

例子说明：把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上面是有内容的（也就是「这是一个例子」这段文字）。svg

接着，在img添加到页面后，绘制canvas前添加一个延迟，咱们修改一下第二步地方的代码以下：spa

window.setTimeout(function () {
      document.getElementById('canvas')
        .getContext('2d')
        .drawImage(document.getElementById('img'), 0, 0);
    }, 100);

再次运行，查看效果：
线程

内容出来了。3d

所以，异步是存在的，只不过是在DOM操做仍是渲染上就不清楚了。code

证实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操做」却不必定是同步的，包括调用外设（外设要看具体设备，有的设备会阻塞浏览器执行，什么意思，就是浏览器的异步操做也会中止，结合这里的异步操做的理解，就能够解释一些奇怪现象了）等，须要在平常开发的时候注意。