I am creating a rendering engine for box2djs that uses elements on the page to render rather than canvas, because it is much easier to style and manipulate elements than it is to implement the same effects on Canvas.

Anyways, Chrome (best as always) renders it flawlessly at 60fps the whole time, where IE10 starts lagging once it is dealing with many elements (about 20+ on my machine).

The thing is IE10 beats V8 (Chrome's JS Engine) in the WebKit Sunspider, so I don't understand why it would be more laggy on IE10 than Chrome.

Why does IE10 start lagging when Chrome doesn't if is faster?

My only guess is that IE10 is slower at page rendering and can't handle that many redraws (60 times a second).

Here's my rendering code:

JS

function drawShape(shape) {
    if (shape.m_type === b2Shape.e_circleShape) {
        var circle = shape,
            pos = circle.m_position,
            r = circle.m_radius,
            ax = circle.m_R.col1,
            pos2 = new b2Vec2(pos.x + r * ax.x, pos.y + r * ax.y);
        var div = document.getElementById(shape.GetUserData());
        if (div != undefined) {
            var x = shape.m_position.x - shape.m_radius,
                y = shape.m_position.y - shape.m_radius,
                r = circle.m_radius;
            div.style.left = x + "px";
            div.style.top = y + "px";
        }
    } else {
        var poly = shape;
        var div = document.getElementById(shape.GetUserData());
        if (div != undefined) {
            var x = poly.m_position.x - (poly.m_vertices[0].x),
                y = poly.m_position.y - (poly.m_vertices[0].y);
            div.style.left = x + "px";
            div.style.top = y + "px";
        }
    }
}

If you are unfamiliar with box2d this function is called for each shape from drawWorld() and drawWorld() is called in each tick. I have my ticks set at 1000/60 miliseconds, or 60 frames per second.

My hunch is that IE10 is struggling with the repaint and reflow of your page. So when you render your elements on the page and move them around and what not (with their styling), it'll cause TONS of repaints. As to why it's performing worse than Chrome, it's probably because of the underlying layout/rendering engine.

• IE uses the Trident engine, developed by yours truly, Mircosoft, and has been around since IE4.

• Chrome on the other hand, uses Webkit, along with Safari and recently, Opera.

Nicole Sullivan has a good article explaining repaint/reflow process: http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

If you want to improve the performance of your page on IE10, maybe using canvas is your answer.