1

コードにメモリ リークがあり、その原因がわかりません。WebSocket基本的に ID と X、Y 座標を含むからターゲット データを受信して​​います。データは関数に渡され、HandleDataターゲットごとに円が作成され、(更新された) 線が作成されて、ターゲットの移動元/移動先が示されます。

WebSocketターゲットがストリームに表示されなくなった場合、そのターゲットは削除されます。テストでは、これらのアイテムを削除したにもかかわらず、Web ページが数百 MB のデータをすばやく蓄積することがわかりました。Chrome のメモリ プロファイラーを使用すると、Raphael (または何か) がすべてのパス情報を削除しているにもかかわらず保持しているようです。

とにかく誰かが私を助けることができれば、私はとても感謝しています. ラファエルがデータを保持しているように見えますが、コードのどこかで間違いを犯した可能性があります:)

var arrayColours = ["#f33", "#3f3", "#33f", "#f66", "#6f6", "#66f"];

var targetStructArray = [];

function HandleTargetData(data) {

    //Go through all our existing targets and mark them as not updated
    for (var i = 0; i < targetStructArray.length; i++) {
        targetStructArray[i].updated = false;
    }

    for (var i = 0; i < data.targets.length; i++) {
        var targetData = data.targets[i];
        var targetStruct = undefined;

        //find our targetStruct
        for (var j = 0; j < targetStructArray.length; j++) {
            if (targetStructArray[j].id == targetData.id) {
                targetStruct = targetStructArray[j];
                break;
            }
        }

        //If it doesnt exist, create it
        if (!targetStruct) {
            var path = paper.path();

            path.attr({ "stroke-width": "2", "stroke": "#888" });
            path.addPart(['M', targetData.x, targetData.y]);

            var circle = paper.circle(targetData.x, targetData.y, 15, 15).attr({
                stroke: "none",
                fill: arrayColours[Math.floor(Math.random() * arrayColours.length)] //random colour
            });

            //Create our struct
            targetStruct = {
                circle: circle,
                path: path,
                id: targetData.id,
                updated: false
            };

            targetStructArray.push(targetStruct);
        }
        else {
            targetStruct.circle.attr({ cx: targetData.x, cy: targetData.y });
            targetStruct.path.addPart(['L', targetData.x, targetData.y]);
        }

        //ensure we are set as updated
        targetStruct.updated = true;
    }

    //Go through all our existing targets and delete any that werent updated
    for (var i = targetStructArray.length - 1; i >= 0; i--) {
        if (!targetStructArray[i].updated) {
            targetStructArray[i].circle.remove();
            targetStructArray[i].path.remove();

            targetStructArray[i].circle.removeData();
            targetStructArray[i].path.removeData();

            targetStructArray[i].circle = null;
            targetStructArray[i].path = null;

            targetStructArray[i] = null;
            targetStructArray.remove(i);
        }
    }
}

ここにリストされていない 2 つの関数を使用します。これは、John Resig の Array.Removeと、別の質問の Raphael ヘルパー関数です。

4

0 に答える 0