Question

我正在渲染由在笛卡尔平面中对齐的600多个SVG元素组成的地图。我需要它们是单独的元素，因为我希望它们单独响应鼠标事件等。

我的问题是：为了应用很多转换，例如“翻译”（改变他们的位置），例如哪个选项对浏览器“更轻”？

渲染像这个六边形的多边形：

<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的详细信息，但是......我认为转换本身会花费相同的时间，因为它只是改变存储在内存中的点的值。即使不是这样，额外的“沉重”可能会被渲染成为需要大部分资源的事实大大超过其他任何东西。有关具有大量SVG元素的示例，请参阅http://en.wikipedia.org/wiki/File:10-simplex_t03.svg。

无论如何，如果是没有显着性能差异的情况，那么我也同意去多边形标签，但不仅仅是因为语义。它可以防止你意外地制作六边形曲线，并且语法更简单。

哪个更轻：多边形还是路径？

2 个答案: