当浏览器中的 HTML DOM 发生变化时,是否能保证 UI 的更新?或者是否有一种机制可以通知浏览器更新 UI 以反射(reflect)更改?
浏览器是否有规范来实现当 html dom 更改以更新 UI 时的这种行为?
最佳答案
不,您可以很好地修改 DOM,而不会导致任何重新绘制。
以一个显示设置为none
的元素为例。它仍然在 DOM 中,但被 CSSOM 丢弃,并且如果修改也不会导致任何重绘:
setTimeout(() => {
content_div.textContent = 'I got modified';
console.log(content_div.outerHTML) // "<div id="content">I got modified</div>"
}, 1000);
#hidden {
display: none;
}
<div id="wrapper">
some hidden content below
<div id="hidden">
<div id="content_div">I will get modified</div>
</div>
<div>
现在,我觉得您需要了解该主题的基础知识,因此请参阅 this Q/A它解释了浏览器重绘操作的三个阶段:
- DOM 更新(同步)
- 回流(通常是异步的,但可以强制同步)
- 重新绘制(异步 @60 FPS 最大值)
对于规范,it's here.
关于javascript - Javascript 改变 DOM 是否总是导致 UI 更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56177958/