确定文档中不存在的某些 DOM 元素的实际渲染高度的最快方法答案

【问题标题】：fastest way to determine actual rendered height of some DOM element that not exists in document确定文档中不存在的某些 DOM 元素的实际渲染高度的最快方法
【发布时间】：2018-01-11 09:05:04
【问题描述】：

我需要创建一些 DOM 元素并计算它们的实际渲染高度。我编写了一些代码来首先创建所有它们并将它们插入到文档中，然后使用 getBoundingClientRect 方法计算它们的高度。但是元素的数量很大，这个过程的时间对于我的应用来说太长了。有没有更快的方法来做到这一点？

// first create all element -> list
// insert all of them to document
console.time("for");
for(var i = 0; i < length; i++) {
    heights[i] = list[i].getBoundingClientRect().height;
}
console.timeEnd("for");

【问题讨论】：

标签： javascript jquery html css getboundingclientrect

【解决方案1】：

您正在获取元素的大小，如果您只想要高度可以尝试这些，我不知道它们是否更快。

document.getElementById('myDiv').clientHeight;
document.getElementById('myDiv').offsetHeight;

clientHeight 包括填充。 offsetHeight 包括内边距、边框和滚动条

【讨论】：