获取DOM节点的大小

Posted 2023-03-20

参考技术A 用来获取内容区的大小

PS：返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em

之类，它还是会返回px 的大小。(CSS 获取的话，是照着你设置的样式获取)。

1.增加边框，无变化，为200；

2.增加外边距，无变化，为200；

3.增加滚动条，最终值等于原本大小减去滚动条的大小，为184；

4.增加内边距，最终值等于原本大小加上内边距的大小，为220；

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，他会得到

计算后的宽度和高度。

1.增加边框，最终值会等于原本大小加上边框大小，为220；

2.增加内边距，最终值会等于原本大小加上内边距大小，为220；

3.增加外边据，无变化；

4.增加滚动条，无变化，不会减小；

PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，它会得到

计算后的宽度和高度。

1.增加边框，不同浏览器有不同解释：

a) Firefox 和Opera 浏览器会增加边框的大小，220 x 220

b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200

c) IE 浏览器只显示它本来内容的高度，200 x 18

2.增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为220 x 38

3.增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为184 x 18

4.增加外边据，无变化。

5.增加内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览

器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。

节点数量增加，但堆比较显示没有分离的 dom，并且 dom 大小稳定

【中文标题】节点数量增加，但堆比较显示没有分离的 dom，并且 dom 大小稳定

【英文标题】：increasing number of nodes, but heap comparison shows no detached dom, and dom size is stable

【发布时间】：2016-10-03 07:25:03

【问题描述】：

我正在探索 Angular js 应用程序的内存泄漏。我正在使用 chrome devtools 时间线和堆快照比较。我使用以下操作执行一个简单的场景： 1.添加一个新行 2. 删除新行

时间线显示节点数量增加。动作 (1) 添加 89 个节点。操作 (2) 不要像预期的那样删除它们。

当通过比较 2 个堆快照来分析相同的场景时，不会找到分离的 dom。

“正常”的 dom 大小保持稳定。我使用 $('*').length 检查了它。

我可以在哪里寻找时间线所示的这些额外的 dom 节点？ 还是可能是其中一个 devtools 功能在撒谎？

感谢任何提示。

edit：难道这个dom节点实际上包含在一些js var中，因此被时间线计算，但没有被堆快照比较记录？

【参考方案1】：

最后这有一个简单的答案。通过使用位于 devtool 窗口顶部的默认值为“Summary”的视图下拉菜单的“containment”选项。