javascript - scrollHeight 的替代 DOM 属性

Question

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

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

问题是IE执行scrollHeight至少20~50ms取决于大小，我有大约100条记录。也就是说，仅仅让 IE 渲染所有记录，加载 100 条记录就需要 6 秒以上，如果我需要加载 100 条记录怎么办？这会毁掉我的网站。

所以我问是否有scrollHeight的替代方案，或者您可以提供任何调整文本区域大小的替代代码。

先谢谢了，

更新

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

更新2

第二张图片:如下图所示，IE 获取某个元素(textarea)的scrollHeight 速度慢的问题是因为它计算整个布局(html body)而不是仅仅获取scrollHeight该特定元素(textarea 元素)的

Answer 1

听起来您正在逐行读取scrollHeight，然后设置height。这是非常昂贵的，因为写入后的每次读取都会触发回流，以便为您提供准确的答案(因为写入可能会更改页面上的某些内容，从而影响正在读取的值)。并不是height=scrollHeight需要时间；而是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

编辑:这是一个黑客行为；我在 knockout 中还没有那么擅长。但作为可能性的一个最小例子，如果你不能以任何其他方式做到这一点，它可能会做到。您可能需要运行它并拉伸(stretch)到“整页”，否则您将看不到任何内容:)

var vm = {
  list: ko.observableArray(["foo", "bar\nbaz", "1\n2\n3\n4"])
};

var updatedHeights;

ko.bindingHandlers.autoresizeStart = {
  update: function(elem, valueAccessor) {
    var data = ko.utils.unwrapObservable(valueAccessor());
    console.log("start update; setting updateHeights to []");
    updatedHeights = [];
  }
};
ko.bindingHandlers.autoresize = {
  update: function(elem, valueAccessor) {
    console.log("mid update;", elem, "is updated, so let's remember its scrollHeight");
    updatedHeights.push([elem, elem.scrollHeight]);
  }
};
ko.bindingHandlers.autoresizeEnd = {
  update: function(elem, valueAccessor) {
    var data = ko.utils.unwrapObservable(valueAccessor());
    console.log("end update; lets set heights for all updated elements:");
    updatedHeights.forEach(function(elemWithHeight) {
      console.log("  ", elemWithHeight[1], elemWithHeight[0]);
      elemWithHeight[0].style.height = elemWithHeight[1] + "px";
    });
    console.log("all done :)");
  }
};

ko.virtualElements.allowedBindings.autoresizeStart = true;
ko.virtualElements.allowedBindings.autoresizeEnd = true;


ko.applyBindings(vm);

setTimeout(function() {
  vm.list.push("a\nb\nc\nd\ne\nf\ng");
}, 1000);

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>

<!-- ko autoresizeStart: list --><!-- /ko -->
<ul data-bind="foreach: list">
  <li >
    <textarea data-bind="text: $data, autoresize: $data"></textarea>
  </li>
</ul>
<!-- ko autoresizeEnd: list --><!-- /ko -->