每种应用的样式都会发生一次回流吗?

发布于 2024-11-27 00:30:29 字数 338 浏览 1 评论 0原文

当我在 javascript 中执行此操作时:

element.style.width="100px";
element.style.height="100px";

我说文档中有 2 次回流是否正确?

如果我这样做:

element.setAttribute("style","width:100px;height:100px;") 只有 1 次回流?

(我知道后者只会覆盖所有其他先前设置的样式)

附带问题:有什么方法可以停止猜测并准确检查浏览器(Chrome / FF /等)中发生了多少次回流?

When i do this in javascript:

element.style.width="100px";
element.style.height="100px";

Am i right to say that there are 2 reflows in the document?

And if i do this:

element.setAttribute("style","width:100px;height:100px;") there is only 1 reflow?

(I am aware that the latter will simply override all other previously set styles)

Side question: is there any way we can stop the guessing and inspect exactly how many reflows is happening in the browser (Chrome / FF / etc)?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

蓝眼睛不忧郁 2024-12-04 00:30:29

是的,第一个示例中会有两次回流,第二个示例中只有一次。查看DOM 环境中什么时候会发生重排?

Yes, there will be two reflows in the first example, and only one in the second. Check out When does reflow happen in a DOM environment?.

秋风の叶未落 2024-12-04 00:30:29

当我在 javascript 中执行此操作时:

element.style.width="100px";
element.style.height="100px";

我说的文档中有 2 次重排对吗?

最不可能的。相对而言,回流需要花费大量时间,因此它们往往只在需要时才会在 JavaScript 执行期间发生,例如,当一段 JavaScript 读回依赖于其布局的属性时,例如 offsetWidth。

但细节将取决于实施。

When i do this in javascript:

element.style.width="100px";
element.style.height="100px";

Am i right to say that there are 2 reflows in the document?

Most unlikely. Reflows take (comparatively) a lot of time so they tend to only happen during JavaScript execution when they need to, for example when a piece of JavaScript reads back a property that depends on it's layout, e.g. offsetWidth.

But the details will be implementation dependent.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文