1

Canvas ではなくページ上の要素を使用してレンダリングする box2djs 用のレンダリング エンジンを作成しています。これは、Canvas に同じ効果を実装するよりも、要素のスタイルを設定して操作する方がはるかに簡単だからです。

とにかく、Chrome（いつものように最高）は常に60fpsで完璧にレンダリングします.IE10は、多くの要素（私のマシンでは約20以上）を処理すると遅れ始めます.

問題は、IE10 が WebKit Sunspider で V8 (Chrome の JS エンジン) を打ち負かすことです。そのため、Chrome よりも IE10 の方が遅れる理由がわかりません。

Chromeの方が速いのに、IE10が遅れ始めるのはなぜですか?

私の唯一の推測は、IE10 はページのレンダリングが遅く、それほど多くの再描画 (1 秒間に 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 ミリ秒、つまり 1 秒あたり 60 フレームに設定しています。

4

1 に答える 1

2

私の勘は、IE10があなたのページのrepaintとに苦労しているということです。reflowしたがって、ページ上で要素をレンダリングして移動すると、（スタイリングを使用して）要素を移動すると、大量の再描画が発生します。Chromeよりもパフォーマンスが悪い理由については、おそらく基盤となるレイアウト/レンダリングエンジンが原因です。

ニコールサリバンは、リペイント/リフロープロセスを説明する良い記事を持っています：http：//www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

IE10でページのパフォーマンスを向上させたい場合は、おそらくを使用することcanvasが答えです。

于 2013-03-11T17:53:01.943 に答える