如果一次网页操作本身就只会触发一次回流/重绘，那么虚拟 dom 还有优势吗?
按照我目前的理解,虚拟dom的优势在于把当前的变化打包给浏览器,让浏览器一次性更新,而不是来一个更新一个,减少页面的回流和重绘.
但是如果只有一个按钮, 点一下文字变色或者改变某个元素的显隐性,那么这种操作浏览器应该本身就是只回流/重绘一次,这个时候虚拟dom还有优势吗?
#### 还有个小问题: 默认浏览器是怎么更新元素的?
如果我一次 display:none 了页面中的9个元素,那么在没有虚拟dom的情况下,浏览器会回流/重绘9次吗
Q1：
> 但是如果只有一个按钮, 点一下文字变色或者改变某个元素的显隐性，那么这种操作浏览器应该本身就是只回流/重绘一次，这个时候虚拟 DOM 还有优势吗？那肯定是原生直接操作 DOM 更快。
但问题是这种简单页面的场景为啥你要用 MVVM 框架？
Q2：
> 如果我一次 display:none 了页面中的 9 个元素，那么在没有虚拟 DOM 的情况下，浏览器会回流/重绘 9 次吗。
这里的“一次”，我理解为是一段代码里连续控制 9 个元素隐藏，类似：
```
el1.style.display = 'none';
el2.style.display = 'none';
el3.style.display = 'none';
// 略...
```
那么答案是不一定。
老浏览器的话是回流 9 次（没错，就说你呢，明天就要退休的 IE）。现代浏览器会有渲染队列来对这种场景做优化，一段时间内的重复回流操作会被合并（但要注意这里的队列可能会被另一些操作打断并清空，比如 `getBoundingClientRect`、`getComputedStyle` 等等，这也很好理解，这些操作是要获取当前 DOM 状态的，自然要必须强制触发一次回流才可以拿到实时状态）。
而回流必然会重绘，重绘不一定回流。所以次数这里两者是一样的。