是否有'元素渲染”？事件？

Question

我需要准确测量网络应用程序中文本的尺寸，这是通过创建一个元素（具有相关CSS类）、设置其innerHTML然后使用appendChild将其添加到容器中来实现的。执行此操作后，在渲染元素之前需要等待一段时间，并且可以读取其offsetWidth以了解文本的宽度。目前，我正在使用setTimeout(processText,100)等待渲染完成。是否有任何我可以监听的回调，或者更可靠的方式来判断我创

P粉924915787 · Answer

接受的答案是 2014 年的，现在已经过时了。 setTimeout 可能可以工作，但它不是最干净的，并且不一定保证元素已添加到 DOM 中。

截至 2018 年，MutationObserver 是您应该使用什么来检测元素何时添加到 DOM。 MutationObservers 现在在所有现代浏览器（Chrome 26+、Firefox 14+、IE11、Edge、Opera 15+ 等）中得到广泛支持。

将元素添加到 DOM 后，您将能够检索其实际尺寸。

这是一个简单的示例，说明如何使用 MutationObserver 来侦听何时将元素添加到 DOM。

为了简洁起见，我使用 jQuery 语法来构建节点并将其插入到 DOM 中。

var myElement = $("hello world")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.log("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.log: It's in the DOM!

只要在 document 中添加或删除任何节点，observer 事件处理程序就会触发。然后，在处理程序内，我们执行 contains 检查以确定 myElement 现在是否位于 document 中。

您不需要迭代存储在 mutations 中的每个 MutationRecord，因为您可以直接对 myElement 执行 document.contains 检查。

为了提高性能，请将 document 替换为 DOM 中将包含 myElement 的特定元素。

P粉314915922 · Answer

当前没有 DOM 事件表明元素已完全呈现（例如应用和绘制附加的 CSS）。这可能会使某些 DOM 操作代码返回错误或随机结果（例如获取元素的高度）。

使用setTimeout给浏览器一些渲染开销是最简单的方法。使用

setTimeout(function(){}, 0)

可能是最实际准确的，因为它将您的代码放在活动浏览器事件队列的末尾，没有任何延迟 - 换句话说，您的代码在渲染操作（以及当时发生的所有其他操作）之后立即排队）。