如何等待元素完全加载到 DOM 中？

Question

这是一个示例，我使用方法element.appendChild() 然后继续，就好像元素已被同步追加一样。

但正如日志显示的那样，事实并非如此。至少所有与其渲染相关的浏览器计算都没有完成。

如何在继续执行之前等待元素完全加载？当然在这种情况下睡眠 1000 毫秒是可行的，但在一般情况下这并不可靠。

const serializedSvg = `<svg style="width:100%;height:100%;">
  <line x1="25%" y1="25%" x2="75%" y2="75%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line>
</svg>`

const svgDom = new DOMParser().parseFromString(serializedSvg, 'text/html').querySelector('svg')
const container = document.querySelector("#container")
container.appendChild(svgDom)

const lineEl = document.querySelector('line')
console.log("fail:" + lineEl.x1.baseVal.value)
setTimeout(() => {
	console.log("success:" + lineEl.x1.baseVal.value)
}, 1000)

<div id="container">

</div>

Answer 1

为了澄清，并不是没有加载 svg，正如关于回流和 SVG 属性的两个链接所解释的那样。这些值的行为符合规范中所述的预期。

一种可能性，以便您可以复制 setTimeout(1000) 的准确性，同时考虑到由于操作顺序而导致的任何布局更改，并且完全“准确”而不是依赖于非标准行为，那就是使用 MutationObserver 或ResizeObserver:
https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

在实践中，我建议只使用建议的 setTimeout(0) 并使用它，因为基本上所有浏览器都会正确运行（有点像对象属性可以按顺序遍历）。您可以在更新布局时触发重排，以确保这些值在运行时是正确的，并确保 SVG 内容仅在所有内容都已呈现并且您已触发布局后运行。
我猜 setTimeout(1000) 对你有用，因为之后会运行一些其他影响代码的布局，就像控制台/预览被隐藏/显示时这些 sn-ps 上的值如何在此处关闭几个像素一样隐藏或显示控制台/预览 div 时布局会发生变化。

什么迫使布局/回流：https://gist.github.com/paulirish/5d52fb081b3570c81e3a
SVG 属性：https://trac.webkit.org/wiki/SVG%20properties

根据关于 SVG 属性的文档，属性会延迟计算直到需要，并基于“撕下”快照（x1 是 SVGAnimatedLength 对象）获取。

在下面强制回流，这满足“直到需要”，以便在访问它们之前计算和更新百分比。

const serializedSvg = `<svg style="width:100%;height:100%;"">
  <line x1="25%" y1="25%" x2="75%" y2="75%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line>
</svg>`

const svgDom = new DOMParser().parseFromString(serializedSvg, 'text/html').querySelector('svg')
const container = document.querySelector("#container")
container.appendChild(svgDom)

const lineEl = svgDom.querySelector('line')

// force layout/reflow
lineEl.getBBox()

console.log("fail:" + lineEl.x1.baseVal.value)

setTimeout(() => {
	console.log("success:" + lineEl.x1.baseVal.value)
}, 1000)

<div id="container">

</div>

Answer 2

您可以使用Promise.resolve().then() 获取async 值。 .resolve() 将在完成后将数据传递到 .then()。您可以执行以下操作：

const lineEl = document.querySelector('line');

Promise.resolve(lineEl).then(res => {
    console.log(res.x1.baseVal.value);
});

Answer 3

您需要等待要插入的文档的加载事件。

const serializedSvg = `<svg style="width:100%;height:100%;">
  <line x1="25%" y1="25%" x2="75%" y2="75%" style="stroke: rgb(234, 243, 234);stroke-width: 5;"></line>
</svg>`

const svgDom = new DOMParser().parseFromString(serializedSvg, 'text/html').querySelector('svg')
const container = document.querySelector("#container")
container.appendChild(svgDom)

window.addEventListener("load", function(){
const lineEl = document.querySelector('line')
console.log("success:" + lineEl.x1.baseVal.value)
}); 

<div id="container">

</div>

Answer 4

已经在其中一个 cmets 中提到过：事件循环

阅读：https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

基本上归结为浏览器引擎优化写入 DOM 的内容。

这意味着某些语句是捆绑在一起的，您无法在写入 DOM 后立即读取某些内容

所以你的代码是等待事件循环完成的有效方式

setTimeout(() => {
    console.log("success:" + lineEl.x1.baseVal.value)
}, 1000)

AND您可以将 1000 更改为 0 !!!

您也可以使用requestAnimationFrame，它的作用相同：等待事件循环