内容简介:作者:心叶时间:2019-03-08 09:45先列出我的理解,然后再从具体的例子中说明:
作者:心叶
时间: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操作」却不一定是同步的,包括调用外设(外设要看具体设备,有的设备会阻塞浏览器执行,什么意思,就是浏览器的异步操作也会停止,结合这里的异步操作的理解,就可以解释一些奇怪现象了)等,需要在日常开发的时候注意。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。