老师，原生DOM的操作也是异步的

Question

var father = document.getElementsByClassName('father')[0]

 var child = document.createElement('div')、

child.innerText = "this is a child";

father.appendChild(demoNode);

alert('看child是否已渲染到页面')

老师，我看原生web-api的dom操作也是异步的，感觉用nextTick也有这个的原因

还是vue本身也做了一些合并，等数据变更积累到一定的程度才去触发已变更数据渲染到html，那么是有哪些时机就会触发已经变更了的数据渲染到html呢？比如积累了多少条数据，或者等待了多长时间，就会把已变更数据渲染到html

Answer 1

双越 2021-04-19 21:54:08

原生操作 DOM 是同步的。不知道你是怎么看出来异步的？

• 提问者 慕丝6452538 #1

  因为上面代码先append(child),在执行alert();实际结果是弹出alert的时候，页面上并没有渲染出child,所以我以为虽然append(child)已经执行，但会等到当前同步代码执行完，然后执行微任务之后，才会去渲染append里的操作，渲染完成，才去执行下一个宏任务。
  我这样理解感觉好像没问题，既然微任务已经算是异步了，那这里感觉也是异步啊

• 双越 回复 提问者 慕丝6452538 #2

  实际结果是弹出alert的时候，页面上并没有渲染出child —— 渲染，并不仅仅在于你眼睛看到。你试试能用 js 获取到这个新插入的 child 吧？只要 js 能获取到，就算是渲染成功了。

• 提问者 慕丝6452538 回复 双越 #3

  哦，明白了，感谢老师解答，太赞了，看来我还需要去了解下浏览器的渲染过程才行

点开查看后面1条评论