Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Firefox running very slow when batch change svg elements' property

Expand Messages
  • Brian Birtles
    Hi Renjun, Do you mind filing a bug for this? https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG&keywords=perf Thanks! Brian
    Message 1 of 5 , Jul 1, 2013
    View Source
    • 0 Attachment
      Hi Renjun,

      Do you mind filing a bug for this?


      https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG&keywords=perf

      Thanks!

      Brian

      (2013/06/25 10:20), rjzhou_ustc wrote:
      > Dear all,
      >
      > My SVG is as follows:
      > ---------------------------------------------------
      >
      > <?xml version="1.0" encoding="UTF-8"?>
      > <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      > "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd">
      > <svg xmlns="http://www.w3.org/2000/svg"
      > xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)">
      > <script type="text/javascript"><![CDATA[
      >
      > function init(evt){
      > var _SVGNS_ = "http://www.w3.org/2000/svg";
      > for(i=0;i<60;i++){
      > for(j=0;j<50;j++){
      > var group=document.createElementNS(_SVGNS_,"g");
      > group.setAttributeNS(null,'transform','translate('+(i*10)+'
      > '+(j*10+50)+')');
      >
      > var circle=document.createElementNS(_SVGNS_,"circle");
      > circle.setAttributeNS(null,'r',2);
      >
      > group.appendChild(circle);
      > document.documentElement.appendChild(group);
      > }
      > }
      > }
      >
      > function show(){
      > //console.time('show');
      > var circles=document.getElementsByTagName('circle');
      > for(i=0,len=circles.length;i<len;i++){
      > circles[i].style.setProperty('display','inherit','');
      > }
      > //console.timeEnd('show');
      > }
      >
      > function hide(){
      > //console.time('hide');
      > var circles=document.getElementsByTagName('circle');
      > for(i=0,len=circles.length;i<len;i++){
      > circles[i].style.setProperty('display','none','');
      > }
      > //console.timeEnd('hide');
      > }
      >
      > ]]></script>
      > <rect width="60" height="40" fill="red" onclick="show()"/>
      > <rect x="70" width="60" height="40" fill="blue" onclick="hide()"/>
      > </svg>
      >
      > ---------------------------------------------------
      >
      > In Firefox:
      > When click the blue rect, hide all circles quickly. But when click the
      > red rect, it's very slow.
      >
      > In IE and Chrome:
      > Both are fast.
      >
      > Why slow in firefox? How to solve if using Firefox? Thanks in advance.
      >
      > Best,
      > Renjun
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.