Что может вызвать разницу в скорости загрузки фильтров между Chrome и Firefox?

Question

У меня есть news aggregator page, который имеет несколько фильтров. Фильтр компании имеет большое количество компаний. Когда в Chrome используется кнопка +, чтобы развернуть список и просмотреть список компаний, для отображения всего списка требуется 6-8 секунд. В Firefox список отображается почти мгновенно. Может ли кто-нибудь помочь мне разобраться, что может вызвать разницу во времени загрузки в браузерах?

Answer 1

Вам нужно улучшить DOM Node Finding Производительность:

$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(); 
    } 
}); 

Вы используете .find() и .filter()

Я предлагаю изменить эти фильтры, чтобы увеличить производительность в Chrome.

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

Answer 2

ваших $ элементов переменная имеет нулевой длины во всех случаях НО для компании.

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

для пустых массивов сращивания внутри пустого массива дешев нет Перераспределения памяти/или что-нибудь .. но для компании случае вы сращивание непустого массива с каждой кадр анимации .. что вызывает вялость ,

Кроме того, рассмотрите возможности кэширования ресурсов и сделайте поиск DOM вне анимации .. его слишком много манипуляций DOM происходит внутри анимации.

Вероятно, Firefox захватывает скриншот массива для операций анимации. Но это просто дикая догадка, для разницы в производительности.