Why does Chrome render JavaScript so slowly?

I have a page that contains a random number of rows, each row has 2 cols. The challenge is to make this two columns of the same height for each row. I do that with JS.

var len = document.getElementById("translateContainer").children.length;

for(var i = 0; i<len; i++)
{
    var height = document.getElementById("origin_"+i).offsetHeight + 'px',
        col1 = document.getElementById("column_"+i),
        col2 = document.getElementById("column_sec_"+i);

    console.log(i);

    col1.style.height = height;
    col2.style.height = height;
}

When on page are less then 30-40 rows it's all good. But, when there is more then 200 rows, chrome start to lag for a couple of secs.

I've created a demo page here http://jsfiddle.net/YSp76/.

In FF and IE it executes in about 2sec. In chrome I didn't count but is more then 10.

The problem is in my code or is a webkit bug?

Why does Chrome render JavaScript so slowly?

2 Answers