1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Design Issue [To check] XenForo.PopupMenu performance on Firefox

Discussion in 'Resolved Bug Reports' started by cclaerhout, Dec 14, 2014.

  1. cclaerhout

    cclaerhout Well-Known Member

    Mike could you please take a look at the function "XenForo.PopupMenu" on Firefox with list that has many elements (about 1000 items). It might come from my browser, but it seems changing this code:
    Code:
          // bind events to the menu control
           this.$clicker = $container.find('[rel="Menu"]').first().click($.context(this, 'controlClick'));
    
           if (!XenForo.isTouchBrowser())
           {
             this.$clicker.mouseover($.context(this, 'controlHover')).hoverIntent(
             {
               sensitivity: 1,
               interval: 100,
               timeout: 0,
               over: $.context(this, 'controlHoverIntent'),
               out: function(){}
             });
           }
    
    to this code improves the performance:
    Code:
          // bind events to the menu control
           var self = this;
           this.$clicker = $container.find('[rel="Menu"]').first().on('click', $.context(self, 'controlClick'));
    
           if (!XenForo.isTouchBrowser())
           {
             var controlOverLoaded = false;
             self.$clicker.on('mouseover', function(e){
               $.proxy(self, 'controlHover', e);
               $(this).hoverIntent({
                 sensitivity: 1,
                 interval: 100,
                 timeout: 0,
                 over: $.context(self, 'controlHoverIntent'),
                 out: function(){}
               });
               
               if(!controlOverLoaded ){
                 controlOverLoaded = true;
                 $(this).trigger('mouseover');
               }
             });
           }
    
    I still need to do further tests on a live installation (with Firebug opens, it's for sure but this is not representative).
     
  2. cclaerhout

    cclaerhout Well-Known Member

    Feedback: It seems faster but not as fast as that without the popup menu (ie: templates list)
    P.S: The parts of the code rewritten with the "on" function gave better results with Firebug activated ; without I can't be sure. But the main improvement comes from the use of "hoverIntent" only on mouseover.
     
  3. Mike

    Mike XenForo Developer Staff Member

    I'm unsure what you're reporting here. What am I supposed to be looking for? That particular code is tied to the control opener not the content of the menu contents.

    Please provide some reproduction HTML and explain what specific performance element I should be looking for.
     
  4. cclaerhout

    cclaerhout Well-Known Member

    This "control opener" adds some menus to a list.
    Example template: template_list
    To reproduce just add to the listitem:
    Code:
            <xen:popup title="{xen:phrase controls}" ctrlclass="toolsCtrl">
               <xen:link href="#">Test</xen:link>
             </xen:popup>
    
    =>
    Code:
        <xen:foreach loop="$templates" value="$template">
           <xen:listitem
             id="{$template.title}"
             class="item_{$template.template_state}"
             href="{xen:adminlink 'templates/edit', $template, 'style_id={$style.style_id}'}"
             label="{$template.title}"
             delete="{xen:if $template.canDelete, {xen:adminlink templates/delete, $template}, ''}"
             deletehint="{xen:if '{$template.template_state} == "custom"', '{xen:phrase revert_customizations_to_this_template}'}"
             snippet="{$template.addonTitle}">
       
             <xen:popup title="{xen:phrase controls}" ctrlclass="toolsCtrl">
               <xen:link href="#">Test</xen:link>
             </xen:popup>         
           </xen:listitem>
         </xen:foreach>
    
    Then test performance on FF.
     
  5. Mike

    Mike XenForo Developer Staff Member

    This particular doesn't appear to be a massive performance issue in itself. Sure reducing the amount of upfront work will speed things up a bit, but it certainly doesn't resolve the big issue here -- even with the code in place, it still takes 2.5 seconds to do the page initialization. There is a lot of other work done that takes up time so this is really just one small part of it, not necessarily a major solution. Bigger changes would be needed to make further gains but that's certainly beyond the scope of something that would happen with the current code base.

    I would say that the popup system (and likely a lot of the JS) hasn't been designed to have 700+ instantiations on a page. An alternative approach should probably be sought.
     
    cclaerhout likes this.

Share This Page