What can cause a difference in filter loading speed between Chrome and Firefox?

Question

I have a page

Answer 1

You need to improve the DOM Node Search 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 changing these filters to improve performance in Chrome .

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

Answer 2

your $ items variable is zero in all cases BUT for the company.

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

for empty arrays spliced ​​inside an empty array, cheaply there is no memory redistribution or anything else .. but for your case the company you splicing a non-empty array with every animation frame .. that causes lethargy.

Also, consider caching resources and do a DOM lookup outside the animation .. its too many DOM manipulations going on inside the animation.

Firefox probably captures a screenshot of the array for animated operations .. but this is just a wild hunch for the difference in performance.