时间戳

首页 > 解决方案 > 为什么可以通过同步脚本测量刚刚附加的 DOM 元素？

javascript - 为什么可以通过同步脚本测量刚刚附加的 DOM 元素？

问题描述

根据事件循环基础知识和视频，在所有 JS 脚本完成后执行重新渲染任务。像素流水线

但是，如果将元素同步添加到 DOM 并测量宽度或高度，而无需等待重新渲染 - 它可以工作！甚至可以更改元素的内容并再次测量 - 仍然有效。

那么，为什么会这样呢？

let element = document.createElement('div');
Object.assign(element.style, {
  'position': 'absolute',
  'float': 'left',
  'whiteSpace': 'nowrap',
  'visibility': 'hidden',
  'font': '12px arial',
  'display': 'inline-block'
});

element.innerText = 'some text';
document.querySelector('body').appendChild(element);

// Why does it work? According to the video, 
// I need to wait when async render task be completed, isn't it?
console.log(element.offsetWidth);

标签： javascriptdomsynchronousevent-loop

解决方案

确实，浏览器通常会批量更改 dom 并在动画帧出现时一次性应用它们。但是，如果您要求一个取决于该渲染是否完成的值（例如获取宽度），浏览器可能会被迫立即进行重排以便为您提供答案。这通常应该避免，因为它可能是一个性能问题。

推荐阅读