13

HTML5 キャンバスを使用して、一度に多数の画像を表示しています。

これはかなりうまくいっていますが、最近クロムに問題がありました。

キャンバスに画像を描画すると、パフォーマンスが急速に低下する特定のポイントに到達するようです。

これは遅い効果ではなく、60 fps から 2 ～ 4 fps にすぐに移行するようです。

ここにいくつかの再現コードがあります：

// Helpers
// https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })();
// https://github.com/mrdoob/stats.js
var Stats = function () { var e = Date.now(), t = e; var n = 0, r = Infinity, i = 0; var s = 0, o = Infinity, u = 0; var a = 0, f = 0; var l = document.createElement("div"); l.id = "stats"; l.addEventListener("mousedown", function (e) { e.preventDefault(); y(++f % 2) }, false); l.style.cssText = "width:80px;opacity:0.9;cursor:pointer"; var c = document.createElement("div"); c.id = "fps"; c.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002"; l.appendChild(c); var h = document.createElement("div"); h.id = "fpsText"; h.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; h.innerHTML = "FPS"; c.appendChild(h); var p = document.createElement("div"); p.id = "fpsGraph"; p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff"; c.appendChild(p); while (p.children.length < 74) { var d = document.createElement("span"); d.style.cssText = "width:1px;height:30px;float:left;background-color:#113"; p.appendChild(d) } var v = document.createElement("div"); v.id = "ms"; v.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none"; l.appendChild(v); var m = document.createElement("div"); m.id = "msText"; m.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px"; m.innerHTML = "MS"; v.appendChild(m); var g = document.createElement("div"); g.id = "msGraph"; g.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0"; v.appendChild(g); while (g.children.length < 74) { var d = document.createElement("span"); d.style.cssText = "width:1px;height:30px;float:left;background-color:#131"; g.appendChild(d) } var y = function (e) { f = e; switch (f) { case 0: c.style.display = "block"; v.style.display = "none"; break; case 1: c.style.display = "none"; v.style.display = "block"; break } }; var b = function (e, t) { var n = e.appendChild(e.firstChild); n.style.height = t + "px" }; return { REVISION: 11, domElement: l, setMode: y, begin: function () { e = Date.now() }, end: function () { var f = Date.now(); n = f - e; r = Math.min(r, n); i = Math.max(i, n); m.textContent = n + " MS (" + r + "-" + i + ")"; b(g, Math.min(30, 30 - n / 200 * 30)); a++; if (f > t + 1e3) { s = Math.round(a * 1e3 / (f - t)); o = Math.min(o, s); u = Math.max(u, s); h.textContent = s + " FPS (" + o + "-" + u + ")"; b(p, Math.min(30, 30 - s / 100 * 30)); t = f; a = 0 } return f }, update: function () { e = this.end() } } }
// Firefox events suck
function getOffsetXY(eventArgs) { return { X: eventArgs.offsetX == undefined ? eventArgs.layerX : eventArgs.offsetX, Y: eventArgs.offsetY == undefined ? eventArgs.layerY : eventArgs.offsetY }; }
function getWheelDelta(eventArgs) { if (!eventArgs) eventArgs = event; var w = eventArgs.wheelDelta; var d = eventArgs.detail; if (d) { if (w) { return w / d / 40 * d > 0 ? 1 : -1; } else { return -d / 3; } } else { return w / 120; }  }

// Reproduction Code
var stats = new Stats();
document.body.appendChild(stats.domElement);

var masterCanvas = document.getElementById('canvas');
var masterContext = masterCanvas.getContext('2d');

var viewOffsetX = 0;
var viewOffsetY = 0;
var viewScaleFactor = 1;
var viewMinScaleFactor = 0.1;
var viewMaxScaleFactor = 10;

var mouseWheelSensitivity = 10; //Fudge Factor
var isMouseDown = false;
var lastMouseCoords = null;

var imageDimensionPixelCount = 25;
var paddingPixelCount = 2;
var canvasDimensionImageCount = 50;
var totalImageCount = Math.pow(canvasDimensionImageCount, 2);

var images = null;

function init() {
    images = createLocalImages(totalImageCount, imageDimensionPixelCount);
    initInteraction();
    renderLoop();
}

function initInteraction() {
    var handleMouseDown = function (eventArgs) {
        isMouseDown = true;
        var offsetXY = getOffsetXY(eventArgs);

        lastMouseCoords = [
            offsetXY.X,
            offsetXY.Y
        ];
    };
    var handleMouseUp = function (eventArgs) {
        isMouseDown = false;
        lastMouseCoords = null;
    }

    var handleMouseMove = function (eventArgs) {
        if (isMouseDown) {
            var offsetXY = getOffsetXY(eventArgs);
            var panX = offsetXY.X - lastMouseCoords[0];
            var panY = offsetXY.Y - lastMouseCoords[1];

            pan(panX, panY);

            lastMouseCoords = [
                offsetXY.X,
                offsetXY.Y
            ];
        }
    };

    var handleMouseWheel = function (eventArgs) {
        var mouseX = eventArgs.pageX - masterCanvas.offsetLeft;
        var mouseY = eventArgs.pageY - masterCanvas.offsetTop;                
        var zoom = 1 + (getWheelDelta(eventArgs) / mouseWheelSensitivity);

        zoomAboutPoint(mouseX, mouseY, zoom);

        if (eventArgs.preventDefault !== undefined) {
            eventArgs.preventDefault();
        } else {
            return false;
        }
    }

    masterCanvas.addEventListener("mousedown", handleMouseDown, false);
    masterCanvas.addEventListener("mouseup", handleMouseUp, false);
    masterCanvas.addEventListener("mousemove", handleMouseMove, false);
    masterCanvas.addEventListener("mousewheel", handleMouseWheel, false);
    masterCanvas.addEventListener("DOMMouseScroll", handleMouseWheel, false);
}

function pan(panX, panY) {
    masterContext.translate(panX / viewScaleFactor, panY / viewScaleFactor);

    viewOffsetX -= panX / viewScaleFactor;
    viewOffsetY -= panY / viewScaleFactor;
}

function zoomAboutPoint(zoomX, zoomY, zoomFactor) {
    var newCanvasScale = viewScaleFactor * zoomFactor;

    if (newCanvasScale < viewMinScaleFactor) {
        zoomFactor = viewMinScaleFactor / viewScaleFactor;
    } else if (newCanvasScale > viewMaxScaleFactor) {
        zoomFactor = viewMaxScaleFactor / viewScaleFactor;
    }

    masterContext.translate(viewOffsetX, viewOffsetY);
    masterContext.scale(zoomFactor, zoomFactor);

    viewOffsetX = ((zoomX / viewScaleFactor) + viewOffsetX) - (zoomX / (viewScaleFactor * zoomFactor));
    viewOffsetY = ((zoomY / viewScaleFactor) + viewOffsetY) - (zoomY / (viewScaleFactor * zoomFactor));
    viewScaleFactor *= zoomFactor;

    masterContext.translate(-viewOffsetX, -viewOffsetY);
}

function renderLoop() {
    clearCanvas();
    renderCanvas();
    stats.update();
    requestAnimFrame(renderLoop);
}

function clearCanvas() {
    masterContext.clearRect(viewOffsetX, viewOffsetY, masterCanvas.width / viewScaleFactor, masterCanvas.height / viewScaleFactor);
}

function renderCanvas() {
    for (var imageY = 0; imageY < canvasDimensionImageCount; imageY++) {
        for (var imageX = 0; imageX < canvasDimensionImageCount; imageX++) {
            var x = imageX * (imageDimensionPixelCount + paddingPixelCount);
            var y = imageY * (imageDimensionPixelCount + paddingPixelCount);

            var imageIndex = (imageY * canvasDimensionImageCount) + imageX;
            var image = images[imageIndex];

            masterContext.drawImage(image, x, y, imageDimensionPixelCount, imageDimensionPixelCount);
        }
    }
}

function createLocalImages(imageCount, imageDimension) {
    var tempCanvas = document.createElement('canvas');
    tempCanvas.width = imageDimension;
    tempCanvas.height = imageDimension;
    var tempContext = tempCanvas.getContext('2d');

    var images = new Array();

    for (var imageIndex = 0; imageIndex < imageCount; imageIndex++) {
        tempContext.clearRect(0, 0, imageDimension, imageDimension);
        tempContext.fillStyle = "rgb(" + getRandomInt(0, 255) + ", " + getRandomInt(0, 255) + ", " + getRandomInt(0, 255) + ")";
        tempContext.fillRect(0, 0, imageDimension, imageDimension);

        var image = new Image();
        image.src = tempCanvas.toDataURL('image/png');

        images.push(image);
    }

    return images;
}

// Get this party started
init();

インタラクティブな楽しみのための jsfiddle リンク: http://jsfiddle.net/BtyL6/14/

これは、キャンバス上の 50 x 50 (2500) グリッドに 50px x 50px の画像を描画しています。また、25px x 25px と 50 x 50 (2500) の画像も試してみました。

より大きな画像とより多くの画像を処理する他のローカルの例があり、他のブラウザーはより高い値でこれらに苦労し始めます.

簡単なテストとして、js フィドルのコードを 100px x 100px および 100 x 100 (10000) の画像に調整しましたが、完全にズームアウトしても 16fps で実行されていました。(注: ズームアウトしたときにすべて収まるように、viewMinScaleFactor を 0.01 に下げる必要がありました。)

一方、Chrome は何らかの限界に達したようで、FPS は 60 から 2-4 に低下します。

試したことと結果に関する情報は次のとおりです。

requestAnimationFrame ではなく setinterval を使用してみました。

2500 枚の画像を 1 回ずつ描画するのではなく、10 個の画像を読み込んでそれぞれ 250 回描画すると、問題は解決します。これは、クロムがレンダリングに関して保存しているデータの量に関して、ある種の制限/トリガーに達していることを示しているようです。

より複雑な例では、カリング (視覚範囲外の画像をレンダリングしない) を使用していますが、すべての画像を一度に表示できるようにする必要があるため、これは解決策ではありません。

ローカルコードに変更があった場合にのみ画像がレンダリングされますが、これは(明らかに何も変更されていない場合) 役に立ちますが、キャンバスはインタラクティブでなければならないため、完全な解決策ではありません。

サンプル コードでは、キャンバスを使用して画像を作成していますが、コードを実行して Web サービスにアクセスして画像を提供することもできますが、同じ動作 (遅さ) が見られます。

この問題を検索することさえ非常に困難であることがわかりました。ほとんどの結果は数年前のものであり、ひどく古くなっています。

さらに情報が役立つ場合は、お問い合わせください。

編集:質問と同じコードを反映するようにjsフィドルURLを変更しました。コード自体は実際には変更されておらず、フォーマットのみが変更されています。でも一貫性を保ちたい。

編集: css を使用して jsfiddle とコードを更新し、レンダー ループが完了した後に選択を防止して requestAnim を呼び出します。

4

2 に答える 2

6

カナリアでは、このコードは私のコンピューターでフリーズします。これが Chrome で発生する理由については、単純な答えは、f.ex とは異なる実装を使用しているからです。FF。詳細はわかりませんが、この領域の実装を最適化する余地があることは明らかです。

ただし、特定のコードを最適化してChromeでも実行できるようにする方法について、いくつかのヒントを与えることができます:-)

ここにはいくつかのことがあります：

  • 色の各ブロックを画像として保存しています。これは、Canary / Chrome のパフォーマンスに大きな影響を与えるようです。
  • requestAnimationFrameループの先頭で呼び出しています
  • 変更がない場合でも、クリアしてレンダリングしています

（ポイントに対処する）を試してください：

  • 単色のブロックのみが必要な場合は、fillRect()代わりに を使用して直接描画し、カラー インデックスを (画像ではなく) 配列に保持します。それらをオフスクリーン キャンバスに描画する場合でも、複数の画像描画操作ではなく、メイン キャンバスに 1 つの描画を実行するだけで済みます。
  • requestAnimationFrameスタックを避けるために、コード ブロックの最後に移動します。
  • 不必要なレンダリングを防ぐためにダーティ フラグを使用します。

コードを少し変更しました。Chrome / Canary でパフォーマンスへの影響がどこにあるかを示すために、無地の色を使用するように変更しました。

グローバル スコープでダーティ フラグを true (最初のシーンをレンダリングするため) に設定します。これは、マウスの移動が発生するたびに true に設定されます。

//global
var isDirty = true;

//mouse move handler
var handleMouseMove = function (eventArgs) {

    // other code

    isDirty = true;

    // other code
};

//render loop
function renderLoop() {
    if (isDirty) {
        clearCanvas();
        renderCanvas();
    }
    stats.update();
    requestAnimFrame(renderLoop);
}

//in renderCanvas at the end:
function renderCanvas() {
    // other code
    isDirty = false;
}

もちろん、他の場所でフラグの警告を確認する必要がありますisDirty。また、フラグが間違ったタイミングでクリアされた場合は、より多くの基準を導入する必要があります。マウスの古い位置を保存し、それが変更された場合にのみ（マウスの移動で）ダーティフラグを設定します-ただし、この部分は変更しませんでした。

ご覧のとおり、これを Chrome と FF でより高い FPS で実行できます。

clearCanvas()また、キャンバス全体をクリアするのではなく、パディング/ギャップのみを描画することで関数を最適化できると想定しています (私はテストしていません) 。しかし、それはテストする必要があります。

マウスの使用時にキャンバスが選択されないようにする CSS ルールを追加しました。

このようなイベント駆動型のケースでさらに最適化する場合、実際にはアニメーション ループはまったく必要ありません。座標またはマウスホイールが変更されたときに再描画を呼び出すことができます。

修正:
http://jsfiddle.net/BtyL6/10/

于 2013-05-24T19:37:17.610 に答える