Javascript scrollHeight的可选DOM属性

有没有其他方法可以在不使用scrollHeight的情况下获取某个HTML元素的内部高度

问题是，我有一个包含100条记录的表，在每条记录中，我使用height=0然后height=scrollHeight调整列中某个文本区域的大小

问题是IE执行scrollHeight的时间至少为20~50ms，这取决于大小，我有大约100条记录。这意味着，IE要呈现所有记录，加载100条记录需要6秒钟以上，如果我需要加载100条记录呢？那会毁了我的网站

所以我在问是否有任何scrollHeight的替代方案，或者您是否可以提供任何调整textarea大小的替代代码

感谢是前进

更新

这是我从IE UI响应中得到的

更新2

第二幅图：如下图所示，IE仅获取某个元素（textarea）的滚动高度缓慢的原因是它计算整个布局（html正文），而不是仅获取该特定元素（textarea元素）的滚动高度

---

听起来像是一行一行地读

scrollHeight

，然后设置

height

。这是非常昂贵的，因为每次写入后读取都会触发回流，以便为您提供准确的答案（因为写入可能会改变页面上的某些内容，从而影响正在读取的值）。不是

height=scrollHeight

需要时间；这是回流焊，这是必要的，为了做到这一点

layout (write height of all: 0)

reflow
read scrollHeight
write height

reflow (!)
read scrollHeight
write height

reflow (!)
read scrollHeight
write height
...

reflow (!)
paint

（或者在每次迭代中将

height

设置为0；这无关紧要，因为连续写入不会触发回流。）

相反，试着一批一批地做。将所有

scrollHeight

值读入数组；然后，当你拥有了所有的时候，把它们都设置好。这样，您将只得到两次回流：一次是在开始阅读时，另一次是在您完成代码并且浏览器需要显示页面时，因为只要您只是在阅读或只是在写入，就不需要回流-仅当您从写入值过渡到读取值时

layout (write height of all: 0)

reflow
read scrollHeight
read scrollHeight
...
write height
write height

reflow
paint

编辑：这是一种黑客行为；我在淘汰赛中还不是很好。但作为一个可能的最小例子，如果你不能用其他方法来做，它可能会做。您可能希望运行它并将其延伸到“完整页面”，否则您将无法看到任何内容：）

var-vm={
列表：ko.observearray（[“foo”、“bar\nbaz”、“1\n2\n3\n4”]）
};
var更新高度；
ko.bindingHandlers.autoresizeStart={
更新：函数（元素、值访问器）{
var data=ko.utils.unwrapobbservable（valueAccessor（））；
log（“启动更新；将updateheight设置为[]”）；
更新高度=[]；
}
};
ko.bindingHandlers.autoresize={
更新：函数（元素、值访问器）{
log（“mid update；”，elem，“已更新，所以让我们记住它的滚动高度”）；
updatedHeights.push（[elem，elem.scrollHeight]）；
}
};
ko.bindingHandlers.autoresizeEnd={
更新：函数（元素、值访问器）{
var data=ko.utils.unwrapobbservable（valueAccessor（））；
log（“结束更新；让我们为所有更新的元素设置高度：”）；
forEach（函数（elemWithHeight）{
console.log（“，elemWithHeight[1]，elemWithHeight[0]）；
elemWithHeight[0]。style.height=elemWithHeight[1]+“px”；
});
console.log（“全部完成：）”；
}
};
ko.virtualElements.allowedBindings.autoresizeStart=true；
ko.virtualElements.allowedBindings.autoresizeEnd=true；
ko.应用绑定（vm）；
setTimeout（函数（）{
vm.list.push（“a\nb\nc\nd\ne\nf\ng”）；
}, 1000);





听起来像是一行一行地读
scrollHeight
，然后设置
height
。这是非常昂贵的，因为每次写入后读取都会触发回流，以便为您提供准确的答案（因为写入可能会改变页面上的某些内容，从而影响正在读取的值）。不是
height=scrollHeight
需要时间；这是回流焊，这是必要的，为了做到这一点

layout (write height of all: 0)

reflow
read scrollHeight
write height

reflow (!)
read scrollHeight
write height

reflow (!)
read scrollHeight
write height
...

reflow (!)
paint

（或者在每次迭代中将
height
设置为0；这无关紧要，因为连续写入不会触发回流。）

相反，试着一批一批地做。将所有
scrollHeight
值读入数组；然后，当你拥有了所有的时候，把它们都设置好。这样，您将只得到两次回流：一次是在开始阅读时，另一次是在您完成代码并且浏览器需要显示页面时，因为只要您只是在阅读或只是在写入，就不需要回流-仅当您从写入值过渡到读取值时

layout (write height of all: 0)

reflow
read scrollHeight
read scrollHeight
...
write height
write height

reflow
paint

编辑：这是一种黑客行为；我在淘汰赛中还不是很好。但作为一个可能的最小例子，如果你不能用其他方法来做，它可能会做。您可能希望运行它并将其延伸到“完整页面”，否则您将无法看到任何内容：）


var-vm={
列表：ko.observearray（[“foo”、“bar\nbaz”、“1\n2\n3\n4”]）
};
var更新高度；
ko.bindingHandlers.autoresizeStart={
更新：函数（元素、值访问器）{
var data=ko.utils.unwrapobbservable（valueAccessor（））；
log（“启动更新；将updateheight设置为[]”）；
更新高度=[]；
}
};
ko.bindingHandlers.autoresize={
更新：函数（元素、值访问器）{
log（“mid update；”，elem，“已更新，所以让我们记住它的滚动高度”）；
updatedHeights.push（[elem，elem.scrollHeight]）；
}
};
ko.bindingHandlers.autoresizeEnd={
更新：函数（元素、值访问器）{
var data=ko.utils.unwrapobbservable（valueAccessor（））；
log（“结束更新；让我们为所有更新的元素设置高度：”）；
forEach（函数（elemWithHeight）{
console.log（“，elemWithHeight[1]，elemWi