4

我正在尝试设置绝对定位项目的高度以匹配其容器元素的高度。问题是有数百个这样的元素。标题中的标准代码在 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!!!

4

4 回答 4

3

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

使用 detach() 的工作示例（最快，但如果您延迟重新插入表格 - 即如果您允许页面在 DOM 中没有表格的情况下重新呈现，则会导致布局问题）。

使用普通 DocumentFragment 克隆的工作示例

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

计算.height()并没有让你慢下来，而是你在一个大循环中遍历和操作 DOM。在三大浏览器中，Internet Explorer 是 DOM 操作最慢的。

为了进一步阅读，不久前我整理了一些DOM 插入基准，这些基准可以很好地衡量浏览器与 DOM 的相对性能。John Resig 还写了关于使用 DocumentFragments 和 DOM 操作的文章： http: //ejohn.org/blog/dom-documentfragments/

于 2013-01-18T17:41:47.133 回答
0

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

 $('#grdSchedule > tbody > tr').each(function () {
    var height = $.css(this, height);
    $('.stickyCol', this).css('height', height );           
});
于 2013-01-18T16:30:09.887 回答
0

看起来 precalcs 本身就足以真正加快速度，并且带来的好处是不用担心分离带来的任何并发症

    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);

小提琴

于 2013-01-18T17:23:12.693 回答
0

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

更新小提琴

于 2013-01-18T18:02:31.410 回答