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

Question

我需要准确测量网络应用程序中文本的尺寸，这是通过创建一个元素（具有相关 CSS 类）、设置其 innerHTML 然后使用 appendChild 将其添加到容器中来实现的。

执行此操作后，在渲染元素之前需要等待一段时间，并且可以读取其 offsetWidth 以了解文本的宽度。

目前，我正在使用 setTimeout(processText, 100) 等待渲染完成。

是否有任何我可以监听的回调，或者更可靠的方式来判断我创建的元素何时已被渲染？

Answer 1

接受的答案是 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 的特定元素。

Answer 2

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

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

setTimeout(function(){}, 0)

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