JavaFX提高插入图形节点的速度

在JavaFX中，如果想要大量的插入图形节点（node），一定要注意插入的方法。应该是先把大量的图形节点插入到节点序列（sequence ）中，然后再一起插入到场景（scene）；如果直接把一个一个的节点插入到场景中，将会让你等到花儿都谢了:)

 

举例说明，快速方式：

var stage: Stage = Stage {
    title: "快速插入图形节点"
    width: 640
    height: 480
    scene: Scene {}
}

function run(args:String[]) {
    var i = 0;
    var n = 300;

    var startTime = java.lang.System.currentTimeMillis();
    var lines: Line[];
    while (i < n) {
        insert addLine() into lines;
        i++;
    }
    stage.scene.content = lines;
    var endTime = java.lang.System.currentTimeMillis();
    println("用时{endTime-startTime}ms");
}

function addLine(): Line {
    var x1: Number = Math.random()*640;
    var x2: Number = Math.random()*640;
    var y1: Number = Math.random()*480;
    var y2: Number = Math.random()*480;

    return Line {
        startX: x1, startY: y1
        endX: x2, endY: y2
        strokeWidth: 2
        stroke: Color.BLACK
    };
}

 结果：用时328ms

 

费时的方式：

var stage: Stage = Stage {
    title: "缓慢插入图形节点"
    width: 640
    height: 480
    scene: Scene {}
}

function run(args:String[]) {
    var i = 0;
    var n = 300;

    var startTime = java.lang.System.currentTimeMillis();
    var lines: Line[];
    while (i < n) {
        addLine();
        i++;
    }
    var endTime = java.lang.System.currentTimeMillis();
    println("用时{endTime-startTime}ms");
}

function addLine() {
    var x1: Number = Math.random()*640;
    var x2: Number = Math.random()*640;
    var y1: Number = Math.random()*480;
    var y2: Number = Math.random()*480;

    insert Line {
        startX: x1, startY: y1
        endX: x2, endY: y2
        strokeWidth: 2
        stroke: Color.BLACK
    } into stage.scene.content;
}

结果：用时22469ms

 

差距那是相当的大啊！所以如果要插入大量（百个以上）的图形节点，一定要注意这个问题。