Question

是否有评估SVG过滤器性能的已知工具？我正在使用以下SVG节点生成alphamap，但我在性能方面有点挣扎。

<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过滤器提取alpha信息的更好方法？

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>

评估SVG过滤器性能（Alphamap）

1 个答案: