What would cause the difference in filter load speed between Chrome and Firefox?

Question

I have a news aggregator page that has multiple filters. The company filter has a large number of companies. When the + button is clicked in Chrome to expand the list and view the list of companies, it takes 6-8 seconds for the entire list to become visible. In Firefox, the list is visible almost instantaneously. Could someone help me investigate what might be causing the difference in load times across browsers?

Paramour

Answer 1

You need improve DOM Node Finding Performance:

$newsFilterRow.on('click', '.js-filter-more', function(event) {
    var $this = $(this)
    var $items = $this.closest($newsFilterRow).find($newsFilterItem).filter(':hidden');
    var tmp = $items.splice(0, 56);
    $(tmp).addClass(newsFilterItemVisibleClass).css('display', 'inline-block');
    if ($items.length === 0) {
        $this.remove();
    }
});

You are using .find() and .filter()

I suggest change these filters to increase the performance in Chrome.

http://www.steveworkman.com/html5-2/javascript/2011/improving-javascript-xml-node-finding-performance-by-2000/

Demo

Answer 2

your $items variable is of zero length in all cases BUT for Company.

var $items = $this.closest($newsFilterRow).find($newsFilterItem);
        function animate0() {
            var tmp = $items.splice(0, 56);
     ....

for empty arrays splicing inside empty array is cheap there is no memory reallocation/or anything.. but for your Company case, you are splicing non empty array with every animation frame.. that's causing the sluggishness.

Beside consider caching resources and doing DOM lookups outside of animate.. its just too many DOM manipulations going on inside the animate.

Probably Firefox is capturing array screenshot for animate operations.. but thats just a wild guess, for performance difference.

Theodolite