如何检测dom的重绘与重排？

Question

有什么合适的工具或是方法可以检测dom的重绘与重排？
或者检测一个dom的渲染时间？

Answer 1

谢邀

检测 Repaint 和 Reflow 可以从两个角度入手：

首先是检测页面的那些部分发生了 Repaint 和 Reflow，要实现这个目的只需要使用 DevTools 中 Rendering Tools 中的 Paint Flash 选项：

开启上面的选项后 Chrome 会在页面上将发生 Repaint 的部分高亮标出。

如果要检测 Repaint 和 Reflow 耗时，那就使用 Timeline（新版 Chrome 中已经改名为 Performance），点击录制按钮触发页面重拍重绘后点击停止，就可以看到相关的耗时数据。

Answer 2

谢邀。
@8只猪说的不错，timeline是加载各元素的时间线。基本上chrome就解决了。

Answer 3

Chrome - DevTools - Timeline

Answer 4

其实，没有什么合适的工具，就是看你代码，是否过多的dom操作或者动态修改样式

Answer 5

开启chrome的Paint Flashing选项

具体可以看这个回答的最后部分：
https://segmentfault.com/q/10...

Answer 6

谢邀，工具只能回答不知道，这有几点dom优化建议，希望有帮助：
1）使用element.style修改css的时候，尽量合并样式的修改，比如使用element.style.cssText
2)将DOM离线或者隐藏后修改，
--比如涉及大量修改的时候，先将元素设置为display:none，当修改完成后，在设置为可见。
--使用createDocumentFragment()方法
--使用cloneNode()方法将元素复制到内存中，然后修改完成后，在使用replaceChild()方法替换掉旧元素
3）将涉及到大量动画的元素使用absolute和fixed定位，使其脱离正常文档流，减少重绘
4）谨慎获取dom信息，获取dom信息也是会消耗内存的
5）使用时间委托来代替时间绑定