IE10延迟渲染可以快速定位变化

Question

我正在为box2djs创建一个渲染引擎，它使用页面上的元素来渲染而不是画布，因为它比在Canvas上实现相同效果更容易设置和操作元素。

无论如何， Chrome （一如既往地最好）在整个时间以60fps的速度完美呈现它，其中 IE10 一旦处理了许多元素（约20+以上）就会开始滞后我的机器）。

在WebKit Sunspider中，IE10胜过V8（Chrome的JS引擎），所以我不明白为什么它在IE10上会比Chrome更加滞后。

为什么IE10开始滞后当Chrome没有时更快？

我唯一的猜测是IE10在页面渲染时速度较慢，无法处理那么多重绘（每秒60次）。

这是我的渲染代码：

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";
        }
    }
}

如果您不熟悉box2d，则会为drawWorld()中的每个形状调用此函数，并在每个刻度中调用drawWorld()。我的刻度设置为1000/60毫秒，或每秒60帧。

Answer 1

我的预感是，IE10正在努力应对您网页的repaint和reflow。因此，当您在页面上渲染元素并移动它们时（不管它们的样式），它会导致重新渲染。至于为什么它的性能比Chrome差，可能是因为底层的布局/渲染引擎。

• IE使用由您自己开发的 Trident engine ，Mircosoft，自IE4以来一直存在。

• 另一方面，Chrome使用 Webkit ，以及Safari和最近的Opera。

Nicole Sullivan有一篇很好的文章解释重绘/重排过程：http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

如果您想在IE10上提高页面效果，可以使用canvas作为答案。