.height（item.height（））jquery在IE太慢了！备择方案？ [英] .height(item.height()) jquery too slow in IE! Alternatives?

问题描述

我试图设置绝对定位的项目的高度，以匹配其容器元素的高度。问题是有上百个这些元素。标题中的标准代码在chrome中运行得很好，但在IE中却像疯了一样。如何缓解这个问题？

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

看起来好像只是设置高度does not sloe它doen那么多， .height（）的东西真的会导致IE窒息。

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.

我尝试了.css（）而不是稍微提升，但不是太多。

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

小提琴AWAY !!!

推荐答案

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

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

具有detach（）的工作示例 （最快，但如果您延迟重新插入表格，则会导致布局问题 - 也就是说，如果您允许页面重新呈现没有DOM中的表格）。

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

关键是将表格克隆为DocumentFragment使用 detach（）从DOM中移除它，并操作克隆表的单元格高度（即在表是DOM的一部分之前），然后在所有高度计算

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.

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

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.

一些进一步的阅读，一段时间后，我把一些 DOM插入基准 ，可以很好地衡量DOM的相对浏览器性能。 John Resig还撰写了关于使用DocumentFragments和DOM操作的信息： http://ejohn.org/blog/ dom-documentfragments /

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/

这篇关于.height（item.height（））jquery在IE太慢了！备择方案？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！