Che cosa causerebbe la differenza nella velocità di caricamento del filtro tra Chrome e Firefox?

Question

Ho un news aggregator page che ha più filtri. Il filtro aziendale ha un gran numero di aziende. Quando si fa clic sul pulsante + in Chrome per espandere l'elenco e visualizzare l'elenco delle aziende, occorrono 6-8 secondi affinché l'intera lista diventi visibile. In Firefox, la lista è visibile quasi istantaneamente. Qualcuno potrebbe aiutarmi a indagare su quale potrebbe essere la causa dei tempi di caricamento tra i vari browser?

Answer 1

È necessario migliorare 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(); 
    } 
}); 

Si utilizza .find() e .filter()

vi consiglio modificare questi filtri per aumentare le prestazioni in Chrome.

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

Answer 2

tuoi $ articoli variabile è di pari a zero lunghezza in tutti i casi MA per Società.

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

per gli array vuoto splicing all'interno array vuoto è a buon mercato non c'è memoria riallocazione/o nulla .. ma per la tua azienda caso, si sono splicing serie non vuota, con ogni fotogramma di animazione .. che sta causando la lentezza .

Oltre a considerare la memorizzazione nella cache delle risorse e l'esecuzione di ricerche DOM al di fuori di animate .. sono troppe le manipolazioni DOM in corso all'interno dell'animazione.

Probabilmente Firefox sta acquisendo schermate di array per operazioni animate .. ma è solo una supposizione sfrenata, per differenza di prestazioni.