DOM阻塞是很多人不熟悉
JavaScript严格的单线程同步执行模型的事情,但是它通常只是我们想以某种方式解决的问题(使用超时,网络工作者等).一切都很好.
但是,我想知道阻止实际的用户可见渲染是否可以实际依赖.我90％肯定在大多数浏览器中事实上都是如此,但我希望这不仅仅是一个快乐的一致事故.我似乎无法从DOM规范或MDM等供应商文档中找到任何明确的陈述.
令我担心的是,虽然看到页面的DOM更改确实不可见,但内部DOM几何(包括CSS转换和过滤器)在同步执行期间确实会更新.例如：
console.log(element.getBoundingRect().width);
element.classList.add("scale-and-rotate");
console.log(element.getBoundingRect().width);
element.classList.remove("scale-and-rotate");
…确实会报告两个不同的宽度值,但页面似乎不会闪烁.在添加类(使用while循环)后同步等待也不会使临时更改可见.在Chrome中执行时间轴跟踪显示内部绘制和重新绘制正在发生相同,这是有道理的……
我担心的是,缺乏一个特定的原因,一些浏览器,比如那些处理动力不足的移动cpu的浏览器,可能会选择在该功能的执行过程中实际反映用户可见布局中的那些内部计算,从而导致丑陋在这种临时行动期间“闪光”.所以,更具体地说,我要问的是：他们有特定的理由不这样做吗？
(如果你想知道为什么我会关心这一点,我有时需要使用getBoundingRect为某个状态的元素测量计算尺寸,以计划间距或动画或其他类似的东西,而不是实际将它们置于该状态或首先为它们设置动画…)
