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

6186Re: [ydn-javascript] Leak in menu?

Expand Messages
  • Todd Kloots
    Oct 31, 2006
    • 0 Attachment
      "Akihiko42" -

      Sorry for my late reply to your message. I think that
      the problem is in your approach. Creating a new
      ContextMenu instance for every single table row that
      is clicked will result in a LOT of DOM elements added
      to the page (esp if you have a large data set) and
      definitely could negatively impact performance over
      time.

      Instead, I'd create one ContextMenu instance upfront
      and use the "addItem" and "removeItem" methods to
      update the content of the menu based on the row that
      invokes it. That way you only have once instance
      regardless of the size of your data set.

      Makes sense? I hope that helps you with your
      application. Let me know if you need more help.

      - Todd



      --- Akihiko42 <akihiko42@...> wrote:

      > I have been trying to add a context menu to a series
      > of table rows using
      > the YUI menu control in IE 6 and 7. Everything
      > works and has been
      > pretty straightforward.
      >
      > My menus are created on the fly from content
      > returned via and Ajax
      > request. Each table row may have different menu
      > items available so I
      > cannot easily cache the results. During testing I
      > found that initially
      > the menus display very quickly, however after
      > extended use they take a
      > very long time to display. I noticed that each time
      > I create a new
      > menu, 1-2 megs of memory are consumed by IE and once
      > this number gets
      > over 100 megs, there is a noticeable delay prior to
      > the menu appearing.
      > I can only assume that the memory and the delay are
      > related.
      >
      > Is there some leak in the menu control or is
      > something else going on?
      > Is anyone else seeing this?
      >
      > Thanks!
      >
      > Here is a simplified version of what I am trying to
      > do. Hopefully I'm
      > just doing something wrong here.... btw, I did try
      > the patch included in
      > example13, but didn't notice any change to memory
      > usage- I left it out
      > of this example for the sake of simplicity. In the
      > example, left-click
      > to create a menu, click again to destroy it...
      >
      > <html>
      > <head>
      > <title>Insert title here</title>
      > <!-- CSS for Menu -->
      > <link rel="stylesheet" type="text/css"
      > href="yui/build/reset/reset.css">
      > <link rel="stylesheet" type="text/css"
      > href="yui/build/font/font.css">
      > <link rel="stylesheet" type="text/css"
      > href="yui/build/menu/assets/menu.css">
      >
      > <!-- Page-specific styles -->
      > <style type="text/css">
      > #yahooMenuContainer{margin:0 0 0px 0;}
      > div.yuimenu{position:absolute;}
      > </style>
      > <script language="JavaScript"
      > src="yui/build/yahoo/yahoo.js"></script>
      > <script language="JavaScript"
      > src="yui/build/dom/dom.js"></script>
      > <script language="JavaScript"
      > src="yui/build/event/event.js"></script>
      > <script language="JavaScript"
      >
      src="yui/build/container/container_core.js"></script>
      > <script language="JavaScript"
      > src="yui/build/menu/menu.js"></script>
      >
      > <script language="JavaScript">
      > var mu_contextMenu;
      > function makeMenu() {
      > var name = new Date().getTime() + "";
      > mu_contextMenu = new
      > YAHOO.widget.Menu(name);
      > for(var i=0; i<20; ++i) {
      > mu_contextMenu.addItem(new
      > YAHOO.widget.MenuItem("item"+i), 0);
      > }
      >
      > mu_contextMenu.render("menu");
      > mu_contextMenu.show();
      > //setTimeout('destroyMenu()', 1000);
      > }
      >
      > function destroyMenu() {
      > mu_contextMenu.hide();
      > mu_contextMenu.destroy();
      > mu_contextMenu = null;
      > //setTimeout('makeMenu()', 1000);
      > }
      >
      > function doClick() {
      > if( mu_contextMenu != null) {
      > destroyMenu();
      > } else {
      > makeMenu();
      > }
      > }
      >
      > YAHOO.util.Event.addListener(document,
      > "click", doClick);
      > </script>
      > </head>
      > <body>
      >
      > <div id="menu"></div>
      >
      > </body>
      > </html>
      >
      >
      >
      >
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      > (Yahoo! ID required)
      >
      > mailto:ydn-javascript-fullfeatured@yahoogroups.com
      >
      >
      >
      >
      >
      >
    • Show all 2 messages in this topic