Trong SVG, nhẹ hơn: đa giác hoặc đường dẫn?

Question

Tôi đang hiển thị bản đồ được soạn bởi 600+ phần tử SVG được căn chỉnh trong mặt phẳng Descartes. Tôi cần chúng là các yếu tố riêng biệt bởi vì tôi muốn chúng phản ứng riêng với các sự kiện chuột, v.v.

Câu hỏi của tôi là: vì mục đích áp dụng nhiều biến đổi như "dịch" (thay đổi vị trí của chúng) chẳng hạn, tùy chọn "nhẹ hơn" cho trình duyệt?

đa giác Rendering như hình lục giác này:

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

... hoặc tạo ra chúng như những con đường như thế này:

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

Tất nhiên, có thể không có sự khác biệt. Tôi cũng sẽ chấp nhận điều đó như một câu trả lời.

Xin cảm ơn trước.

Answer 1

Tôi nghi ngờ sẽ có nhiều sự khác biệt, nhưng nếu có, tôi mong đợi polygon sẽ nhanh hơn một chút, vì nó đặc biệt có nghĩa là, đa giác.

Thực tế, sau khi chạy hai kịch bản lược tả (xem bên dưới), đánh giá trên của tôi xuất hiện chính xác. Đa giác nhanh hơn một chút so với các đường dẫn trong tất cả các trình duyệt, nhưng sự khác biệt là không đáng kể. Vì vậy, tôi nghi ngờ bạn thực sự cần phải lo lắng về điều này. May mắn là, polygon có vẻ giống như sự lựa chọn hợp lý.

Profiling 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> 

Và điều tương tự cho 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

Đã kết thúc việc thay đổi nhận xét của tôi đến một câu trả lời ...

Tôi không biết rất nhiều về SVG chi tiết-khôn ngoan, nhưng ... Tôi cho rằng bản thân quá trình chuyển đổi sẽ mất khoảng thời gian tương tự, vì nó chỉ thay đổi các giá trị của các điểm sto đỏ trong bộ nhớ. Ngay cả khi không, "nặng nề" bổ sung có thể sẽ được bao la lớn hơn bởi thực tế là rendering là những gì đòi hỏi nhiều tài nguyên nhất của bất cứ điều gì khác. Xem http://en.wikipedia.org/wiki/File:10-simplex_t03.svg để biết ví dụ về rất nhiều và nhiều phần tử SVG.

Dù sao, nếu trường hợp đó không có sự khác biệt về hiệu suất đáng kể, thì tôi cũng đồng ý về việc sử dụng thẻ đa giác, nhưng không chỉ vì ngữ nghĩa. Nó sẽ ngăn cản bạn vô tình làm cong hình lục giác và cú pháp đơn giản hơn.