Блог

У меня есть лабиринт, и я хочу создать круг в каждой его ячейке, а затем переместить эти круги в правую часть лабиринта в виде дерева. Я использую переходы d3 и холст html5. Мой вопрос в том, есть ли какие-либо оптимизации, которые я могу сделать. Я не знаю производительности canvas, поэтому я не знаю, сколько я могу ожидать.

Для 1600 элементов (600 пикселей x 600 пикселей и размер ячейки 15 пикселей) анимация плавная. Для 3600 элементов это не так.

 mazeSelection.selectAll('cell')
    .data(root.descendants())
    .enter()
    .append('cell')
    .attr('radius', 0)
    .attr('cx', d => d.data.ix * cellSize   0.5 * cellSize,)
    .attr('cy', d => d.data.iy * cellSize   0.5 * cellSize)
    .transition().duration(2000)
    .attr('radius', cellSize/2)
    .transition().duration(3000)
    .attr('radius', cellSize/4)
    .tween('position', function(d) {
        const i = d3.interpolate([this.getAttribute('cx'), this.getAttribute('cy')], [width   d.x, cellSize * 0.5   d.y]);
        return (t) => {
            [d.cx, d.cy] = i(t);
            this.setAttribute('cx', d.cx);
            this.setAttribute('cy', d.cy);
        };
    });

context.fillStyle = "white";

let timer = d3.timer(function redraw() {
    // clear maze
    context.beginPath();
    context.fillRect(0, 0, width * 2, height);

    //drawMaze(grid, context, width, height, cellSize);
    context.beginPath();

    // here we must use a function to have access to "this"
    mazeSelection.selectAll('cell')
        .each(function (d) {
            const radius = this.getAttribute('radius'),
                x = this.getAttribute('cx'),
                y = this.getAttribute('cy');

            context.moveTo(x, y);
            context.arc(x, y, radius * 0.5, 0, 2 * Math.PI);

            (d.children || []).forEach(child => {
                context.moveTo(x, y);
                context.lineTo(child.cx, child.cy);
            });
        });

    context.stroke();
    context.fill();
});
 

Вы должны пойти по старой школе, чтобы получить максимальную производительность.

Я проигнорирую первую половину, поскольку я не уверен, что вы с ней делаете. И я предполагаю, что это такое в .each итерации

Что вы делаете неправильно с точки зрения производительности, как указано в вашем коде ниже

 // why use a let in global scope????
let timer = d3.timer(function redraw() {
    context.beginPath();
    context.fillRect(0, 0, width * 2, height);
    context.beginPath();

    // You wrote "here we must use a function to have access to "this""
    // What 'this'? I assume it is the iterated cell `this`. Just use the 
    // cell referance, you dont have to use `this`
    mazeSelection.selectAll('cell')
        .each(function (d) {     // dont use callbacks to iterate. For loops are much quicker
            // on chrome const and let are half the speed of var 
            const radius = this.getAttribute('radius'),  // why use getAttribute, a pointless and very CPU expensive way to get an object's property
                x = this.getAttribute('cx'),
                y = this.getAttribute('cy');
            // why even assign the above properties to a const when you can use them directly

            context.moveTo(x, y);
            context.arc(x, y, radius * 0.5, 0, 2 * Math.PI);

            // use a for loop and don't test for the existence of children 
            // by creating a new Array if they don't exist and then calling
            // the array method forEach, a complete waste of CPU time
            (d.children || []).forEach(child => {
                context.moveTo(x, y);
                context.lineTo(child.cx, child.cy);
            });
        });

    context.stroke();
    context.fill();
});
 

Если вы попробуете выполнить следующие итерации объектов, вы получите дополнительную производительность. Тем не менее, 3000 все еще могут быть недоступны.

 var timer = d3.timer(function redraw() {
    context.beginPath();
    context.fillRect(0, 0, width * 2, height);
    context.beginPath();

    var cells = mazeSelection.selectAll('cell')
    for(var i = 0; i < cells.length; i   ){
        var d = cell[i];
        var x = d.x;  // create a local referance as x amp; y may be used many times
        var y = d.y;
        context.moveTo(x, y);
        context.arc(x, y, d.radius * 0.5, 0, 2 * Math.PI);
        if(d.children){
            var c = d.children;
            for(var j = 0; j < c.length; j  ){    
                context.moveTo(x, y);
                context.lineTo(c[j].cx, c[j].cy);
            }
        }

        context.stroke();
        context.fill();
    };
 

Если отображаемые вами дуги имеют примерно одинаковый размер, вы можете получить некоторое увеличение производительности, отобразив дуги на внеэкранном холсте (листе спрайтов), а затем нарисовав дуги, drawImage(spriteSheet,... хотя в зависимости от оборудования / браузера это может быть незначительным или значительным увеличением производительности