Geek Answers Handbook

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

I am trying to set the height of absolutely positioned elements according to the height of their container element. The problem is that there are hundreds of these elements. The standard code in the header works fine in chrome, but in IE it looks like crazy. How can I mitigate this problem?

//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 that just setting the height is not that much, but setting the height from .height () of something else really makes IE suffocate.

I am trying .css () instead to boost a bit, but not so much.

Here is the fiddle: Fiddle AWAY !!!

+4
source share
4 answers

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

A working example with detach () (the fastest, but will cause layout problems if you delay re-inserting the table, that is, if you allow re-rendering of the page without the table in the DOM).

Working example with a simple 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). Height calculations have been performed, replace the original table with the cloned table.

The .height() calculations didn't slow you down, it's the fact that you went through and manipulated the DOM in a big loop. Of the three large browsers, Internet Explorer is the slowest when manipulating the DOM.

For some further reading, some time ago I put together several DOM tests that give a good estimate of the relative performance of the browser with the DOM. John Resig also wrote about using DocumentFragments and DOM manipulations: http://ejohn.org/blog/dom-documentfragments/

+3
source

Avoid creating a separate object for the line and caching line height:

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

It seems that the preliminary algorithms alone are enough to really speed up the process, and are useful without worrying about any complications when disconnecting

  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

0
source

What is wrong with setting height:100% on an absolutely positioned element?

Updated script

0
source

More articles:


All Articles