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

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).
 
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.
 
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.
 
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.
 
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.
 
Back
Top Bottom