Question

我正在尝试设置绝对定位项的高度以匹配其容器元素的高度。问题是这些元素有数百个。标题中的标准代码在chrome中运行得很好，但在IE中拖得很疯狂。我该如何缓解这个问题？

    //Too SLOW in IE
    var starttime = new Date().getTime();
    $("#grdSchedule > tbody > tr").each(function(i) {
        thisRow = $(this);
        thisRow.children(".stickyCol").height(thisRow.height());
        //thisRow.children().slice(0, 1).css('height', thisRow.css('height'));            
    });
        var taskTime = (new Date().getTime() - starttime) / 1000;
        alert("cell height stretch: " + taskTime);

似乎只是设置高度并不会让它变得那么多，但是从其他东西的.height（）设置高度确实会导致IE窒息。

我试过.css（）而不是一点点提升但不多。

这是一个小提琴：Fiddle AWAY!!!

Answer 1

使用IE9，我从1.6秒变为0.031秒。使用Chrome，我从0.302秒变为0.018秒。

Working example with detach() （速度最快，但如果您延迟重新插入表格会导致布局问题 - 也就是说，如果您允许页面在没有表格的情况下重新渲染在DOM中。

<强> Working example with a plain DocumentFragment clone

关键是将克隆表作为DocumentFragment（或者使用detach()暂时将其从DOM中删除，并操纵克隆表的单元格高度（即，在表格之前）在完成所有高度计算之后，将原始表替换为克隆表。

.height()计算并没有减慢你的速度，这是你在一个大循环中遍历和操纵DOM的事实。在三大浏览器中，Internet Explorer是DOM操作中最慢的。

对于一些进一步的阅读，前段时间我将一些 DOM insertion benchmarks 放在一起，它可以很好地衡量DOM的相对浏览器性能。 John Resig还撰写了使用DocumentFragments和DOM操作的文章：http://ejohn.org/blog/dom-documentfragments/

Answer 2

避免为行创建单独的对象，并缓存行的高度：

 $('#grdSchedule > tbody > tr').each(function () {
    var height = $.css(this, height);
    $('.stickyCol', this).css('height', height );           
});

Answer 3

看起来他们自己的预处理能够真正加快速度，并且不会担心任何分离的复杂性

    var starttime = new Date().getTime();
    var stickyCols = 1;
    //get row heights
    var rowHeights = new Array();
    $("#grdSchedule > tbody > tr").each(function(i) {
        rowHeights[i] = $(this).css('height');
    });

    //Now SUPERDUPERFAST in IE
    //var $table = $("#grdSchedule").detach();            
    $("#grdSchedule > tbody > tr").each(function(i) {
    //$(" > tbody > tr", $table).each(function(i) {
        thisRow = $(this);
        thisRow.children("td").slice(0, stickyCols).css('height', rowHeights[i]);              
    });
    //$("#scrollDiv_top").append($table);
    var taskTime = (new Date().getTime() - starttime) / 1000;
    alert("cell height stretch: " + taskTime);

FIDDLE

Answer 4

在绝对定位的元素上设置height:100%有什么问题？

Updated Fiddle

.height（item.height（））在IE中jquery太慢了！备择方案？

4 个答案: