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

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

Expand Messages
  • 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 1 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 2 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 3 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 4 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.