1

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

无论如何，Chrome（一如既往地最好）始终以 60fps 的速度完美呈现它，而IE10在处理许多元素（在我的机器上大约 20+）时开始滞后。

事情是 IE10 在 WebKit Sunspider 中击败了 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 帧。

4

1 回答 1

2

我的预感是 IE10 在你的页面repaint中挣扎。reflow因此，当您在页面上渲染元素并移动它们时（以及它们的样式），它会导致大量的重绘。至于为什么它的性能比 Chrome 差，可能是因为底层的布局/渲染引擎。

  • IE 使用真正由您开发的Trident 引擎，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是您的答案。

于 2013-03-11T17:53:01.943 回答