Element.setAttribute 是否触发回流？
Does Element.setAttribute trigger reflow?
我开始了解浏览器的内部工作原理并遇到了 reflow / repaint mechanism (and how it applies to React，但我不想离题）。
一般来说，我认为任何让浏览器计算值/可见变化的东西都会触发回流/重绘。
然而，我无法绕过Element.setAttribute。它会在 Chrome 中触发回流/重绘吗？在 dom 树中更新多个元素属性的最有效方法是什么？
However, I can't wrap my head around Element.setAttribute. Does it
trigger reflow/ repaint in Chrome?
setAttribute 与 repaint/reflow 没有直接关系。这取决于你设置什么属性和你设置它的元素类型。如果更改复选框的value，则不会发生重绘或回流，但如果更改<input type="button"> 的value，则会发生重绘和回流。
What is the most efficient way to update multiple element attributes
in dom tree?
"Most efficient" 很难回答，因为每个浏览器都可以优化以以不同的速度执行任务。但是，一般来说，您可以遵循以下准则：
永远不要在循环内更新 DOM 作为
循环会导致 repaint/reflow.
- 相反，您可以构建一个 HTML 的字符串，并且当循环为
完成，一次注入字符串并获取所有更新。
- 您还可以创建和使用尚未添加到 DOM 树中且仅存在于内存中的元素。然后，您可以将这些元素放在一个容器中，该容器本身还不是 DOM 的一部分。最后，您可以将容器添加到 DOM 并只接受一次 repaint/reflow 命中。
- 如果您正在进行许多 CSS 操作，并且遇到性能问题，您可能需要查看 will-change CSS property，这可以提高性能。
有许多资源可用于了解如何减少性能命中：
我开始了解浏览器的内部工作原理并遇到了 reflow / repaint mechanism (and how it applies to React，但我不想离题）。
一般来说，我认为任何让浏览器计算值/可见变化的东西都会触发回流/重绘。
然而，我无法绕过Element.setAttribute。它会在 Chrome 中触发回流/重绘吗？在 dom 树中更新多个元素属性的最有效方法是什么？
However, I can't wrap my head around Element.setAttribute. Does it trigger reflow/ repaint in Chrome?
setAttribute 与 repaint/reflow 没有直接关系。这取决于你设置什么属性和你设置它的元素类型。如果更改复选框的value，则不会发生重绘或回流，但如果更改<input type="button"> 的value，则会发生重绘和回流。
What is the most efficient way to update multiple element attributes in dom tree?
"Most efficient" 很难回答，因为每个浏览器都可以优化以以不同的速度执行任务。但是，一般来说，您可以遵循以下准则：
永远不要在循环内更新 DOM 作为 循环会导致 repaint/reflow.
- 相反，您可以构建一个 HTML 的字符串，并且当循环为
完成，一次注入字符串并获取所有更新。 - 您还可以创建和使用尚未添加到 DOM 树中且仅存在于内存中的元素。然后，您可以将这些元素放在一个容器中，该容器本身还不是 DOM 的一部分。最后，您可以将容器添加到 DOM 并只接受一次 repaint/reflow 命中。
- 相反，您可以构建一个 HTML 的字符串，并且当循环为
- 如果您正在进行许多 CSS 操作，并且遇到性能问题，您可能需要查看 will-change CSS property，这可以提高性能。
有许多资源可用于了解如何减少性能命中：