Оценка производительности фильтра SVG (Alphamap)

Question

Есть ли известный инструмент для оценки производительности фильтра SVG? Я генерирую альфа-карту, используя следующий узел SVG, но немного борюсь с производительностью.

<feColorMatrix result="alphaOut" in="SourceGraphic" type="matrix" values="0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 1 0" /> 

Есть ли способ определить время рендеринга для фильтров SVG? Альтернативно, знает ли кто-нибудь лучший способ извлечения альфа-информации с использованием SVG-фильтров?

Answer 1

Идея для измерения производительности, взятую из https://developers.google.com/web/updates/2012/07/How-to-measure-browser-graphics-performance

function draw(x) { 
 
    var g = document.createElementNS("http://www.w3.org/2000/svg", "g") 
 
    g.id = "canvas" 
 
    canvas.parentNode.replaceChild(g, canvas) 
 
    for (var i = 1; i < x; i++) { 
 
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect") 
 
    rect.setAttribute("width", "100") 
 
    rect.setAttribute("height", "100") 
 
    rect.setAttribute("filter", "url(#" + filter + ")") 
 
    rect.setAttribute("fill", "rgba(128,128,128,0.8)") 
 
    rect.setAttribute("x", Math.random() * 300) 
 
    rect.setAttribute("y", Math.random() * 300) 
 
    g.appendChild(rect) 
 
    } 
 

 
} 
 
var filter = "f1" 
 
var t, previousTime; 
 
var drawLoad = 1; 
 
var slowCount = 0; 
 
var maxSlow = 10; 
 
// Note, you might need to polyfill performance.now and requestAnimationFrame 
 
t = previousTime = performance.now(); 
 
var tick = function() { 
 
    var maximumFrameTime = 1000/30; // 30 FPS 
 
    t = performance.now(); 
 
    var elapsed = t - previousTime; 
 
    previousTime = t; 
 
    if (elapsed < maximumFrameTime || slowCount < maxSlow) { 
 
    if (elapsed < maximumFrameTime) { 
 
     drawLoad += 10; 
 
    } else { 
 
     slowCount++; 
 
    } 
 
    draw(drawLoad); 
 
    requestAnimationFrame(tick); 
 
    } else { 
 
    // found maximum sustainable load at 30 FPS 
 
    document.getElementById('res').innerHTML = ("could draw " + (drawLoad) + " in " + 
 
     maximumFrameTime + " ms"); 
 
    } 
 

 
}; 
 
requestAnimationFrame(tick);

svg { 
 
    background: beige 
 
}

<button onclick="filter='f1';drawLoad=1;slowCount=0;requestAnimationFrame(tick)">test filter 1</button> 
 
<button onclick="filter='f2';drawLoad=1;slowCount=0;requestAnimationFrame(tick)">test filter 2</button> 
 
<div id="res"></div> 
 

 
<svg width="400" height="400"> 
 
    <filter id="f1"> 
 
    <feColorMatrix result="alphaOut" in="SourceGraphic" type="matrix" values="0 0 0 0 1 
 
     0 0 0 0 1 
 
     0 0 0 0 1 
 
     0 0 0 1 0" /> 
 
    </filter> 
 
    <filter id="f2"> 
 
    <feMerge> 
 
     <feMergeNode dx="1" dy="1" in="SourceAlpha" /> 
 
    </feMerge> 
 
    </filter> 
 
    <g id="canvas"> 
 
    </g> 
 
</svg>