Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IE11 Performance #270

Closed
Kwoin opened this issue Nov 13, 2017 · 1 comment
Closed

IE11 Performance #270

Kwoin opened this issue Nov 13, 2017 · 1 comment

Comments

@Kwoin
Copy link

Kwoin commented Nov 13, 2017

Bug report

Expected behaviour

svgPanZoom performed in a reasonable time (< 5sec)

Actual behaviour

svgPanZoom performed in > 45sec

Steps to reproduce the behaviour

  1. use svgPanZoom() on an inline SVG with more than 30k nodes

Configuration

  • svg-pan-zoom version: 3.5.2
  • Browser(s): IE11
  • Operating system(s): Windows 7

More Explanations

I use SvgPanZoom on massive SVG (+30k nodes).
There is an expectable delay while SvgPanZoom performs its treatments. This delay is very short on FF or Chrome, but is more than 45sec on IE11!
I inspected the code : the delay is caused by the creation of the viewport and the deplacement of all the graphic nodes into it. (svg-utilities.js l.62).

I tried to display: none the svg parent element, without any improvements.

if (!viewport) {
      var viewportId = 'viewport-' + new Date().toISOString().replace(/\D/g, '');
      viewport = document.createElementNS(this.svgNS, 'g');
      viewport.setAttribute('id', viewportId);

      var parent = svg.parentNode;
      parent.style.display = "none";
      var svgChildren = svg.childNodes || svg.children;
      var length = svgChildren.length;
      // Internet Explorer (all versions?) can't use childNodes, but other browsers prefer (require?) using childNodes
      var start = performance.now();
      var k = 0;
      if (!!svgChildren && svgChildren.length > 0) {
        for (var i = svgChildren.length; i > 0; i--) {
          // Move everything into viewport except defs
          if (svgChildren[svgChildren.length - i].nodeName !== 'defs') {
            viewport.appendChild(svgChildren[svgChildren.length - i]);
            k++;
          }
        }
      }
      var end = performance.now();
      console.log("svg manipulation took " + (end - start) + " ms");
      console.log(k + " / " + length + " nodes manipulated");
      svg.appendChild(viewport);
      parent.style.display = "";
    }

Result is :

svg manipulation took 45050.880227233756 ms
30413 / 30413 nodes manipulated

Do you guys know a way to improving this ?
45sec is just not usable ;s

@bumbu
Copy link
Owner

bumbu commented Dec 10, 2017

Hi @Kwoin,

Please check this comment on a related issue.

In short the solution is to create that viewport by yourself (say on the server or whenever your SVGs are generated). I don't know of any other solutions.

Hope this helps.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants