.height（item.height（））jquery在IE中速度太慢！備擇方案？

我想設置絕對定位項目的高度以匹配其容器元素的高度。問題是有數百個這樣的元素。標題中的標準代碼在Chrome中運行良好，但在IE中非常瘋狂。我應該如何緩解這個問題？.height（item.height（））jquery在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);

看來，如果只設置犯規SLOE它DOEN，大部分的高度，而是別的東西從.height設置高度（）真的會導致IE嗆。

我已經嘗試.css（），而不是有點提升，但不是很多。

這裏是亂動小提琴：Fiddle AWAY!!!

來源

2013-01-18 jumpdart

的.css（）肯定要快很多，但是你可以可能使這整個過程要快得多通過它，你循環之前分離的表，然後重新連接它時，你就大功告成了。 http://jsfiddle.net/hnZxn/2/ –

您還可以通過將'thisRow.height（）'存儲在一個變量中來提高性能。 –

行高是否高度動態？你的腳本依賴於找出* computed *高度值，如果你可以忽略它（通過使用固定高度或預先計算的值），它應該是更快的方式。 – bfavaretto

隨着IE9，我從1.6秒到0.031秒。使用Chrome，我從0.302秒變爲0.018秒。（最快，但如果您延遲了表的重新插入 - 也就是說，如果允許頁面在沒有DOM中的表的情況下重新呈現）將導致佈局問題。

Working example with a plain DocumentFragment clone

的關鍵是克隆表作爲一個的DocumentFragment（或暫時從DOM與detach()刪除它和操縱克隆的表（即，細胞的高度，之前該表是部分然後在完成所有高度計算後，將原始表格替換爲克隆表格

.height()的計算並沒有減慢你的速度，這是你正在遍歷和操縱DOM的事實大循環IE瀏覽器，Internet Explorer是DOM操作最慢的。

對於一些進一步的閱讀，前陣子我把一些DOM insertion benchmarks，讓與DOM相對瀏覽器性能的一個很好的措施。約翰Resig的也寫了關於使用DocumentFragments和DOM操作：http://ejohn.org/blog/dom-documentfragments/

來源

2013-01-18 17:41:47

我喜歡克隆的東西，分離絕對是一個優點，但首先獲得所有的大小真的有幫助。 – jumpdart

如果您正在執行DOM遍歷以事先獲取大小，那麼這也會讓您放慢速度。爲了獲得最佳性能，您希望將DOM遍歷和操作降至最低。 –

試試吧！ http://jsfiddle.net/jumpdart/hnZxn/13/！對不起，我有小提琴的問題...需要更少的時間有第一個尺寸 – jumpdart

避免給該行一個單獨的對象，並緩存行的高度：

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

來源

2013-01-18 16:30:09

@KevinB - 他們都完全刪除它們。唯一的區別是'remove'也爲您執行GC：它將刪除所有事件監聽器和數據。 –

@KevinB - 我決定不分離，因爲結果很可能不會一樣。 –

看起來對自己的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);

FIDDLE

來源

2013-01-18 17:23:12 jumpdart

您需要將'var starttime = new Date（）。getTime（）;'移到函數的頂部。如果預計算是解決方案的一部分，那麼它應該被添加到總時間。當你這樣做時，速度會慢一點。 –

哈哈有道理 – jumpdart

。確定，所以也許不是SUPERDUPER快，但它仍然是最快的一個貼 – jumpdart

出了什麼問題只是絕對定位的元素上設置height:100%？

Updated Fiddle

來源

2013-01-18 18:02:31

滾動到底部並查看。我第一次嘗試用css解決這個問題，並不能做到這一點 – jumpdart