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

Re: How can I improve performance on draggable Panels.

Expand Messages
  • Jaime Bueza
    It can be safely assured that the YUI Developers have performance first in their mindset. :) Here s a suggestion: you could just set the iframe visibility to
    Message 1 of 10 , Feb 2, 2008
    • 0 Attachment
      It can be safely assured that the YUI Developers have performance first in their mindset. :)

      Here's a suggestion: you could just set the iframe visibility to "hidden" on startDrag, and on endDrag, you set its visibility back to "visible". This will save you another request because you don't have to redownload the content into the iframe, as it is already there, just hidden.

      The performance increase will be noticeable: Here's some documention (http://www.devx.com/tips/Tip/13638). If you scroll down, it says "Note that when an item is hidden, it doesn't receive events". This was one of the main problems when I was building http://www.xwned.com. Everytime you drag an iframe, the iframe will receive every onDrag event in association to your pixel threshold, so it'll try and redownload the content.

      If you set the iframe's visibility to hidden, voila--Increased performance when dragging iframes.

      --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
      >
      > Thanks Jamie,
      >
      > excellent, I will fiddle around a bit with this.
      > One question about your 'save the src of the iframe' hint:
      > You mean saving the whole HTML to memory and then re-aply it at the
      > new position, is that right?
      > And then wondering: is there any article about why the content would
      > be downloaded again when repositioned?
      >
      >
      > Kind regards
      >
      > Frank
      >
      > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
      > >
      > > While you're dragging it keeps firing events and keeps on trying to
      > > reload the SRC attribute of the iframe each pixel you drag it.
      > >
      > > In your startDrag function, save the src of the iframe into a
      > > variable, and then re-apply the src of the iframe on endDrag.
      > >
      > > Or you could just remove the iframe entirely on startDrag, and then
      > > re-initialize the iframe on endDrag. However; there will be a delay
      > > because the iframe will need to re-download its content. Ultimately,
      > > the performance of dragging the panel will be increased. I've also
      > > noticed the performance decreases when dragging large images within a
      > > panel.
      > >
      > > Sadly, setting display: none; or visibilty: hidden; has no effect on
      > > increasing performance. The best thing to do is just swap in a &nbsp;
      > > (space) while you're dragging the panel, and when you endDrag, swap in
      > > the content.
      > >
      > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
      > > >
      > > > Hi,
      > > >
      > > > YUI Panels are sort of an excellent base for building next generation
      > > > Internet apps, however when creating large panels (500 x 600px) that
      > > > host a bunch of stuff or IFRAMES from other sites I experience serious
      > > > downgrades (especially in IE) while dragging a panel over another.
      > > > IE simply loses grip of the title bar and draggin' is over then.
      > > > Firefox performs better but also not optimal.
      > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
      > > > get around it but to no avail.
      > > > Anyone any solutions, work-arounds (no hacks plz).
      > > >
      > > > Kind Regards
      > > >
      > > > Frank
      > > >
      > >
      >
    • Jaime Bueza
      It can be safely assured that the YUI Developers have performance first in their mindset. :) Here s a suggestion: you could just set the iframe visibility to
      Message 2 of 10 , Feb 2, 2008
      • 0 Attachment
        It can be safely assured that the YUI Developers have performance first in their mindset. :)

        Here's a suggestion: you could just set the iframe visibility to "hidden" on startDrag, and on endDrag, you set its visibility back to "visible". This will save you another request because you don't have to redownload the content into the iframe, as it is already there, just hidden.

        The performance increase will be noticeable: Here's some documention (http://www.devx.com/tips/Tip/13638). If you scroll down, it says "Note that when an item is hidden, it doesn't receive events". This was one of the main problems when I was building http://www.xwned.com. Everytime you drag an iframe, the iframe will receive every onDrag event in association to your pixel threshold, so it'll try and redownload the content.

        If you set the iframe's visibility to hidden, voila--Increased performance when dragging iframes.

        --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
        >
        > Thanks Jamie,
        >
        > excellent, I will fiddle around a bit with this.
        > One question about your 'save the src of the iframe' hint:
        > You mean saving the whole HTML to memory and then re-aply it at the
        > new position, is that right?
        > And then wondering: is there any article about why the content would
        > be downloaded again when repositioned?
        >
        >
        > Kind regards
        >
        > Frank
        >
        > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
        > >
        > > While you're dragging it keeps firing events and keeps on trying to
        > > reload the SRC attribute of the iframe each pixel you drag it.
        > >
        > > In your startDrag function, save the src of the iframe into a
        > > variable, and then re-apply the src of the iframe on endDrag.
        > >
        > > Or you could just remove the iframe entirely on startDrag, and then
        > > re-initialize the iframe on endDrag. However; there will be a delay
        > > because the iframe will need to re-download its content. Ultimately,
        > > the performance of dragging the panel will be increased. I've also
        > > noticed the performance decreases when dragging large images within a
        > > panel.
        > >
        > > Sadly, setting display: none; or visibilty: hidden; has no effect on
        > > increasing performance. The best thing to do is just swap in a &nbsp;
        > > (space) while you're dragging the panel, and when you endDrag, swap in
        > > the content.
        > >
        > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
        > > >
        > > > Hi,
        > > >
        > > > YUI Panels are sort of an excellent base for building next generation
        > > > Internet apps, however when creating large panels (500 x 600px) that
        > > > host a bunch of stuff or IFRAMES from other sites I experience serious
        > > > downgrades (especially in IE) while dragging a panel over another.
        > > > IE simply loses grip of the title bar and draggin' is over then.
        > > > Firefox performs better but also not optimal.
        > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
        > > > get around it but to no avail.
        > > > Anyone any solutions, work-arounds (no hacks plz).
        > > >
        > > > Kind Regards
        > > >
        > > > Frank
        > > >
        > >
        >
      • Jaime Bueza
        Also, just to add on to my last post-- It s probably best to use the YUI Selector to find all , , , , and elements within
        Message 3 of 10 , Feb 2, 2008
        • 0 Attachment
          Also, just to add on to my last post--

          It's probably best to use the YUI Selector to find all <img>, <object>, <applet>, <embed>, and <iframe> elements within the Panel and set their visibility on startDrag.

          The reason for this is because these elements all have a high chance of decreasing your drag performance. So far, from what I've observed, dragging around text nodes are fast. Also, <table>'s kinda slow down performance.

          --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
          >
          > Thanks Jamie,
          >
          > excellent, I will fiddle around a bit with this.
          > One question about your 'save the src of the iframe' hint:
          > You mean saving the whole HTML to memory and then re-aply it at the
          > new position, is that right?
          > And then wondering: is there any article about why the content would
          > be downloaded again when repositioned?
          >
          >
          > Kind regards
          >
          > Frank
          >
          > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
          > >
          > > While you're dragging it keeps firing events and keeps on trying to
          > > reload the SRC attribute of the iframe each pixel you drag it.
          > >
          > > In your startDrag function, save the src of the iframe into a
          > > variable, and then re-apply the src of the iframe on endDrag.
          > >
          > > Or you could just remove the iframe entirely on startDrag, and then
          > > re-initialize the iframe on endDrag. However; there will be a delay
          > > because the iframe will need to re-download its content. Ultimately,
          > > the performance of dragging the panel will be increased. I've also
          > > noticed the performance decreases when dragging large images within a
          > > panel.
          > >
          > > Sadly, setting display: none; or visibilty: hidden; has no effect on
          > > increasing performance. The best thing to do is just swap in a &nbsp;
          > > (space) while you're dragging the panel, and when you endDrag, swap in
          > > the content.
          > >
          > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
          > > >
          > > > Hi,
          > > >
          > > > YUI Panels are sort of an excellent base for building next generation
          > > > Internet apps, however when creating large panels (500 x 600px) that
          > > > host a bunch of stuff or IFRAMES from other sites I experience serious
          > > > downgrades (especially in IE) while dragging a panel over another.
          > > > IE simply loses grip of the title bar and draggin' is over then.
          > > > Firefox performs better but also not optimal.
          > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
          > > > get around it but to no avail.
          > > > Anyone any solutions, work-arounds (no hacks plz).
          > > >
          > > > Kind Regards
          > > >
          > > > Frank
          > > >
          > >
          >
        • Jaime Bueza
          Also, just to add on to my last post-- It s probably best to use the YUI Selector to find all , , , , and elements within
          Message 4 of 10 , Feb 2, 2008
          • 0 Attachment
            Also, just to add on to my last post--

            It's probably best to use the YUI Selector to find all <img>, <object>, <applet>, <embed>, and <iframe> elements within the Panel and set their visibility on startDrag.

            The reason for this is because these elements all have a high chance of decreasing your drag performance. So far, from what I've observed, dragging around text nodes are fast. Also, <table>'s kinda slow down performance.

            --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@...> wrote:
            >
            > Thanks Jamie,
            >
            > excellent, I will fiddle around a bit with this.
            > One question about your 'save the src of the iframe' hint:
            > You mean saving the whole HTML to memory and then re-aply it at the
            > new position, is that right?
            > And then wondering: is there any article about why the content would
            > be downloaded again when repositioned?
            >
            >
            > Kind regards
            >
            > Frank
            >
            > --- In ydn-javascript@yahoogroups.com, "Jaime Bueza" jbueza@ wrote:
            > >
            > > While you're dragging it keeps firing events and keeps on trying to
            > > reload the SRC attribute of the iframe each pixel you drag it.
            > >
            > > In your startDrag function, save the src of the iframe into a
            > > variable, and then re-apply the src of the iframe on endDrag.
            > >
            > > Or you could just remove the iframe entirely on startDrag, and then
            > > re-initialize the iframe on endDrag. However; there will be a delay
            > > because the iframe will need to re-download its content. Ultimately,
            > > the performance of dragging the panel will be increased. I've also
            > > noticed the performance decreases when dragging large images within a
            > > panel.
            > >
            > > Sadly, setting display: none; or visibilty: hidden; has no effect on
            > > increasing performance. The best thing to do is just swap in a &nbsp;
            > > (space) while you're dragging the panel, and when you endDrag, swap in
            > > the content.
            > >
            > > --- In ydn-javascript@yahoogroups.com, "Flinn2112" <flinn2112@> wrote:
            > > >
            > > > Hi,
            > > >
            > > > YUI Panels are sort of an excellent base for building next generation
            > > > Internet apps, however when creating large panels (500 x 600px) that
            > > > host a bunch of stuff or IFRAMES from other sites I experience serious
            > > > downgrades (especially in IE) while dragging a panel over another.
            > > > IE simply loses grip of the title bar and draggin' is over then.
            > > > Firefox performs better but also not optimal.
            > > > I suspect it got to do with reflow behaviour - tried some DDProxy to
            > > > get around it but to no avail.
            > > > Anyone any solutions, work-arounds (no hacks plz).
            > > >
            > > > Kind Regards
            > > >
            > > > Frank
            > > >
            > >
            >
          • Flinn TwentyOneTwelve
            Why, panels? Hm, decided so because of the need for resizing (derived a class for this), dragging, the neat close button. Well just a decision. I will think it
            Message 5 of 10 , Feb 5, 2008
            • 0 Attachment
              Why, panels?
              Hm, decided so because of the need for
              resizing (derived a class for this), dragging, the
              neat close button.
              Well just a decision.
              I will think it over.

              Kind regards

              Frank


              ____________________________________________________________________________________
              Be a better friend, newshound, and
              know-it-all with Yahoo! Mobile. Try it now. http://mobile.yahoo.com/;_ylt=Ahu06i62sR8HDtDypao8Wcj9tAcJ
            Your message has been successfully submitted and would be delivered to recipients shortly.