.height(item.height()) jquery too slow in IE! Alternatives?

问题

I am trying to set the height of absolutely positioned items to match the height of their container element. The problem is that there are hundreds of these elements. The standard code in the title runs great in chrome, but drags like crazy in IE. How should i mitigate this issue?

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

It seems as if just setting the height doesnt sloe it doen that much, but setting the height from a .height() of something else really causes IE to choke.

I have tries .css() instead with a little boost but not much.

Here is a fiddle to fiddle with: Fiddle AWAY!!!

回答1:

With IE9, I went from 1.6 seconds to 0.031 seconds. With Chrome, I went from 0.302 seconds to 0.018 seconds.

Working example with detach() (fastest, but will cause layout problems if you delayed the re-insertion of the table--that is, if you allow the page to re-render without the table in the DOM).

Working example with a plain DocumentFragment clone

The key is to clone the table as a DocumentFragment (or temporarily remove it from the DOM with detach() and manipulate the cell heights of the cloned table (i.e., before the table is part of the DOM). Then after all the height calculations have been made, replace the original table with the cloned table.

The .height() calculations weren't slowing you down, it's the fact you were traversing and manipulating the DOM in a big loop. Of the big three browsers, Internet Explorer is the slowest at DOM manipulation.

For some further reading, a while back I put together some DOM insertion benchmarks that give a good measure of relative browser performance with the DOM. John Resig has also written on the use the DocumentFragments and DOM manipulation: http://ejohn.org/blog/dom-documentfragments/

回答2:

Avoid creating a separate object for the row, and cache the row's height:

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

回答3:

What's wrong with just setting height:100% on the absolutely-positioned element?

Updated Fiddle

回答4:

Looks like the precalcs on their own is enough to really speed things up, and comes with the benefit of not worrying about any complications from detaching

    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

来源：https://stackoverflow.com/questions/14403064/heightitem-height-jquery-too-slow-in-ie-alternatives

标签

javascript

jquery

css

cross-browser