В SVG, который легче: полигон или путь?

Ответ 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>

Ответ 2

Закончено изменить мой комментарий на ответ...

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

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