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

Drag Drop Performance with Large DOM

Expand Messages
  • lukechambers7
    I have an application where Drag Drop performance seems to degrade in IE with the size of the dom. There are several tabs of lazy loaded content. Each tab has
    Message 1 of 3 , Sep 2, 2008
    • 0 Attachment
      I have an application where Drag Drop performance seems to degrade in
      IE with the size of the dom.

      There are several tabs of lazy loaded content. Each tab has x number
      of DD objects. The DD objects are 7 layers down in the DOM. With just
      a single tab loaded, performance is great. With each successive tab
      that is loaded, the DD performance seems to degrade.

      The tabs are within the context of a much larger application. Upon
      initial loading, the dom is around 2200 nodes. With each tab, the dom
      can grow by several hundred nodes.


      I'm not sure where to begin optimization:
      - is there some feature of DD that I'm not taking advantage of?
      - do I need to trim the DOM that isn't being viewed?
      - does the number of event listeners affect the performance? The DD
      elements have several other event listeners on them (click,
      mouseover.. etc).

      Thanks in advance!
    • Dav Glass
      lukechambers7 -- ... I would try this first... ... Yes, it will effect performance.. You might want to try using Event Bubbling. This example does that:
      Message 2 of 3 , Sep 2, 2008
      • 0 Attachment
        lukechambers7 --

        > - do I need to trim the DOM that isn't being viewed?

        I would try this first...

        > - does the number of event listeners affect the performance? The DD
        > elements have several other event listeners on them (click,
        > mouseover.. etc).

        Yes, it will effect performance..

        You might want to try using Event Bubbling.

        This example does that:
        http://blog.davglass.com/files/yui/datatable4/

        It only creates the DD instance when you mousedown on something..


        Does that help?
        Dav

        Dav Glass
        dav.glass@...
        blog.davglass.com




        + Windows: n. - The most successful computer virus, ever. +
        + A computer without a Microsoft operating system is like a dog
        without bricks tied to its head +
        + A Microsoft Certified Systems Engineer is to computing what a
        McDonalds Certified Food Specialist is to fine cuisine +



        ----- Original Message ----
        > From: lukechambers7 <lchambers@...>
        > To: ydn-javascript@yahoogroups.com
        > Sent: Tuesday, September 2, 2008 12:14:05 PM
        > Subject: [ydn-javascript] Drag Drop Performance with Large DOM
        >
        > I have an application where Drag Drop performance seems to degrade in
        > IE with the size of the dom.
        >
        > There are several tabs of lazy loaded content. Each tab has x number
        > of DD objects. The DD objects are 7 layers down in the DOM. With just
        > a single tab loaded, performance is great. With each successive tab
        > that is loaded, the DD performance seems to degrade.
        >
        > The tabs are within the context of a much larger application. Upon
        > initial loading, the dom is around 2200 nodes. With each tab, the dom
        > can grow by several hundred nodes.
        >
        >
        > I'm not sure where to begin optimization:
        > - is there some feature of DD that I'm not taking advantage of?
        > - do I need to trim the DOM that isn't being viewed?
        > - does the number of event listeners affect the performance? The DD
        > elements have several other event listeners on them (click,
        > mouseover.. etc).
        >
        > Thanks in advance!
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
      • lukechambers7
        Dav, The process of trimming the DOM (removing the non-displayed part of the tree, but keeping a reference to it) and not creating a DD instance until
        Message 3 of 3 , Sep 2, 2008
        • 0 Attachment
          Dav,
          The process of trimming the DOM (removing the non-displayed part of
          the tree, but keeping a reference to it) and not creating a DD
          instance until mousedown seem to be making a positive difference!

          I say "seem" because I am not aware of a way to empirically verify the
          performance of DragDrop. Do you know of how I can do this?

          Thanks!

          Luke

          --- In ydn-javascript@yahoogroups.com, Dav Glass <dav.glass@...> wrote:
          >
          > lukechambers7 --
          >
          > > - do I need to trim the DOM that isn't being viewed?
          >
          > I would try this first...
          >
          > > - does the number of event listeners affect the performance? The DD
          > > elements have several other event listeners on them (click,
          > > mouseover.. etc).
          >
          > Yes, it will effect performance..
          >
          > You might want to try using Event Bubbling.
          >
          > This example does that:
          > http://blog.davglass.com/files/yui/datatable4/
          >
          > It only creates the DD instance when you mousedown on something..
          >
          >
          > Does that help?
          > Dav
          >
          > Dav Glass
          > dav.glass@...
          > blog.davglass.com
          >
          >
          >
          >
          > + Windows: n. - The most successful computer virus, ever. +
          > + A computer without a Microsoft operating system is like a dog
          > without bricks tied to its head +
          > + A Microsoft Certified Systems Engineer is to computing what a
          > McDonalds Certified Food Specialist is to fine cuisine +
          >
          >
          >
          > ----- Original Message ----
          > > From: lukechambers7 <lchambers@...>
          > > To: ydn-javascript@yahoogroups.com
          > > Sent: Tuesday, September 2, 2008 12:14:05 PM
          > > Subject: [ydn-javascript] Drag Drop Performance with Large DOM
          > >
          > > I have an application where Drag Drop performance seems to degrade in
          > > IE with the size of the dom.
          > >
          > > There are several tabs of lazy loaded content. Each tab has x number
          > > of DD objects. The DD objects are 7 layers down in the DOM. With just
          > > a single tab loaded, performance is great. With each successive tab
          > > that is loaded, the DD performance seems to degrade.
          > >
          > > The tabs are within the context of a much larger application. Upon
          > > initial loading, the dom is around 2200 nodes. With each tab, the dom
          > > can grow by several hundred nodes.
          > >
          > >
          > > I'm not sure where to begin optimization:
          > > - is there some feature of DD that I'm not taking advantage of?
          > > - do I need to trim the DOM that isn't being viewed?
          > > - does the number of event listeners affect the performance? The DD
          > > elements have several other event listeners on them (click,
          > > mouseover.. etc).
          > >
          > > Thanks in advance!
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.