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

Firefox running very slow when batch change svg elements' property

Expand Messages
  • rjzhou_ustc
    Dear all, ...
    Message 1 of 5 , Jun 24, 2013
    • 0 Attachment
      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
    • John Delacour
      ... I find FireFox v22 (Mac) takes about three times as long (say 35 ms) as Chrome or Safari, but the hiding and showing take about the same time. I’ve used
      Message 2 of 5 , Jun 26, 2013
      • 0 Attachment
        On 25/6/13 at 02:20, rjzhou.ustc@... (rjzhou_ustc) wrote:

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

        I find FireFox v22 (Mac) takes about three times as long (say 35
        ms) as Chrome or Safari, but the hiding and showing take about
        the same time.

        I’ve used D3 to do the same thing and put a jsFiddle here:

        <http://jsfiddle.net/eremita/Cmj34/>

        See if it makes any difference.

        JD
      • John Delacour
        ... I’ve put the code here as well: and you can see it working here:
        Message 3 of 5 , Jun 27, 2013
        • 0 Attachment
          On 26/6/13 at 21:29, I wrote:

          > I’ve used D3 to do the same thing and put a jsFiddle here:
          >
          > <http://jsfiddle.net/eremita/Cmj34/>
          >
          > See if it makes any difference.

          I’ve put the code here as well:
          <http://gist.github.com/JohnDelacour/5874737>

          and you can see it working here:
          <http://bl.ocks.org/JohnDelacour/5874737>
        • th_w@ymail.com
          Rather than changing the style of each individual circle, one could change them using a style element, like so:
          Message 4 of 5 , Jul 1, 2013
          • 0 Attachment
            Rather than changing the style of each individual circle, one could change them using a style element, like so:


            <?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[
            var style;

            function init(evt){
            style = document.getElementById('dynamicStyle');
            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);
            evt.target.appendChild(group);
            }
            }
            }

            function setCircleDisplayProperty(propertyValue){
            style.textContent = "circle{display:" + propertyValue + "}";
            }

            ]]></script>
            <style type="text/css" id="dynamicStyle"/>
            <rect width="60" height="40" fill="red" onclick="setCircleDisplayProperty('inherit')"/>
            <rect x="70" width="60" height="40" fill="blue" onclick="setCircleDisplayProperty('none')"/>
            </svg>


            Try it here:
            http://jsbin.com/ejasof/1/

            It seems to work a tiny bit faster in Firefox.
          • 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 5 of 5 , Jul 1, 2013
            • 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.