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?

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/