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

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


person zgall1    schedule 30.03.2015    source источник


Ответы (2)


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

$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/

person Alexander Salas Bastidas    schedule 07.04.2015

ваша переменная $items имеет нулевую длину во всех случаях, НО для компании.

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

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

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

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

person Kamal    schedule 07.04.2015