Что легче: многоугольник или путь?

Question

Я рендерил карту, составленную из 600+ элементов SVG, выровненных в декартовой плоскости. Мне нужно, чтобы они были отдельными элементами, потому что я хочу, чтобы они индивидуально реагировали на события мыши и т. Д.

У меня такой вопрос: например, с целью применения большого количества преобразований, таких как «translate» (изменение их позиций), какая опция «легче» для браузеров?

Визуализация полигонов, подобных этому шестиугольнику:

<polygon points="43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50"></polygon>

... или создать их в виде путей, подобных этому:

<path d="M43.301270189221924,55L43.301270189221924,65L51.96152422706631,70L60.6217782649107,65L60.6217782649107,55L51.96152422706631,50Z"></path>

Answer 1

Я сомневаюсь, что будет большая разница, но если таковая будет, я бы ожидал, что polygon будет немного быстрее, поскольку он специально предназначен для, вы знаете, полигонов.

Фактически, после запуска двух скриптов профилирования (см. Ниже), моя оценка выше кажется правильной. Полигоны немного быстрее, чем пути во всех браузерах, но разница вряд ли существенная. Поэтому я сомневаюсь, что вам действительно нужно беспокоиться об этом К счастью, polygon звучит как логичный выбор.

Профилирование path:

<svg xmlns="http://www.w3.org/2000/svg">
    <g id="paths"></g>

    <text x="20" y="20" id="out"></text>

    <script><![CDATA[
    var d = "M43.301270189221924,55 L43.301270189221924,65 L51.96152422706631,70 L60.6217782649107,65 L60.6217782649107,55 L51.96152422706631,50 Z";

    var paths = document.getElementById('paths');
    var path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
    path.setAttribute('d', d);

    var start = new Date();
    for (var i = 0; i < 20000; i++)
    {
        var el = path.cloneNode(true);
        el.setAttribute('transform', 'translate(' + ((i * 20) % 1000) + ',' + ((i / 50) * 20) + ')');
        paths.appendChild(el);
    }

    setTimeout(function() {
        document.getElementById('out').textContent += 'Path: ' + (new Date() - start) + 'ms';
        // paths.parentNode.removeChild(paths);
    }, 10);

    ]]>
    </script>
</svg>

И то же самое для polygon:

<svg xmlns="http://www.w3.org/2000/svg">
    <g id="polygons"></g>

    <text x="20" y="20" id="out"></text>

    <script><![CDATA[
    var points = "43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50";

    var polygons = document.getElementById('polygons');
    var polygon = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
    polygon.setAttribute('points', points);

    var start = new Date();
    for (var i = 0; i < 20000; i++)
    {
        var el = polygon.cloneNode(true);
        el.setAttribute('transform', 'translate(' + ((i * 20) % 1000) + ',' + ((i / 50) * 20) + ')');
        polygons.appendChild(el);
    }

    setTimeout(function(){
        document.getElementById('out').textContent += 'Polygons: ' + (new Date() - start) + 'ms';
        // polygons.parentNode.removeChild(polygons);
    }, 10);

    ]]>
    </script>
</svg>

Answer 2

Закончилась смена моего комментария на ответ ...

Я не очень разбираюсь в деталях SVG, но ... я бы предположил, что само преобразование займет столько же времени, сколько и изменение значений точек, хранящихся в памяти. Даже если нет, дополнительная «тяжесть», вероятно, будет значительно перевешена тем фактом, что рендеринг - это то, что требует больше всего ресурсов из всего остального. См. http://en.wikipedia.org/wiki/File:10-simplex_t03.svg для примера с большим количеством элементов SVG.

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