javascript - IE10 延迟呈现用于快速定位更改

Question

我正在为 box2djs 创建一个渲染引擎，它使用页面上的元素而不是 canvas 来渲染，因为与在 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 帧。

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 是您的答案。