每种应用的样式都会发生一次回流吗?
当我在 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
是的,第一个示例中会有两次回流,第二个示例中只有一次。查看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?.
最不可能的。相对而言,回流需要花费大量时间,因此它们往往只在需要时才会在 JavaScript 执行期间发生,例如,当一段 JavaScript 读回依赖于其布局的属性时,例如 offsetWidth。
但细节将取决于实施。
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.