Profilando una pagina con il registratore di timeline incorporato in Chrome, vedo le voci ripetute "Ricalcola stile". Non hanno informazioni ovvie per collegarli all'elemento o all'evento DOM.Timeline di Chrome: come è possibile determinare la causa della voce di registro "Ricalcola stile"?
Come è possibile determinare la causa di queste voci?
Il mio consiglio è di utilizzare la build Chrome Canary di Chrome. Paul Irish ha una buona dimostrazione di utilizzo della Timeline in Chrome Dev Tools here
Puoi semplicemente fare clic sull'evento, ad esempio 'Ricalcola stile', e dovresti ottenere una traccia di stack in miniatura che punta a dove si è verificato l'evento nel tuo codice.
Ho appena avuto lo stesso problema (è per questo che ho trovato la tua domanda).
Il mio problema è stato causato da una transizione CSS3 di tutte le proprietà. Ero stato pigro, quando tutto ciò di cui avevo bisogno era l'imbottitura di transizione.
attuazione di tale singola modifica ha reso il circuito
Come hai scoperto, cosa lo ha causato –
È più di due anni fa, quindi scusami se la mia memoria è un po 'vaga.;) Ma penso di aver appena fatto un tentativo ed un errore. Rimosso tutte le transizioni e poi aggiunto ciascuna finché non ho visto il problema. Quando ho trovato solo la classe che causa problemi, ho limitato la transizione alla singola proprietà di cui avevo effettivamente bisogno. Più fortuna poi qualsiasi altra cosa ... – jBoive
Sono quasi sicuro che avete un po 'di animazione infinita ripetizione sulla tua pagina. Questo è ciò che ha causato Ricalcolare lo stile senza dire cosa l'ha causato.
Sono stato in grado di verificare se transizioni o animazioni CSS stavano attivando ricalcoli sulla mia pagina. Ho usato jQuery per fare questo, ma è possibile utilizzare quello che vuoi:
$('*').css('transition', 'none');
$('*').css('animation', 'none');
Questo disabilita efficacemente le transizioni e le animazioni su ogni elemento della pagina. Li ho gestiti uno alla volta, e poi rieseguito la mia profilazione. Nel mio caso, le animazioni erano il colpevole.
.css('animation') restituirà qualcosa come
"myCustomAnimation 15s linear 0s infinite normal none running"
o se non c'è animazione,
"none 0s ease 0s 1 normal none running"
Così, dopo l'aggiornamento (per riattivare le animazioni), il seguente frammento registra ogni elemento che ha un'animazione definito:
$('*').each(function(){
if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
console.log(this);
}
});
Disabilitando animat ioni su ciascuno di quelli individualmente, sono stato in grado di determinare quale stava causando i miei problemi.
Il suggerimento di JQuery è stato incredibilmente utile, perché consente una diagnosi davvero rapida. Questo ha trovato rapidamente la fonte di un problema per me: un'animazione con 'animation-iteration: infinite' ha invalidato in modo consistente i CSS e il ridisegno, anche se l'elemento interessato non era sullo schermo. – jpolitz
Un'alternativa alla versione jQuery pubblicato per le indagini è un semplice one-liner nella console:
window.onanimationiteration = console.log;
Questo stamperà una linea ogni volta che alcune piste di animazione, tra cui il nome dell'animazione e l'elemento dove viene applicata l'animazione.
Questa è stata una demo molto utile, ma ci sono anche voci "Ricalcola stile" che non mostrano una traccia dello stack e non sembrano essere associate a nessun codice. Quando ci sono molti elementi ottengo quella voce ogni volta che clicco, ma non sono stato in grado di rintracciare perché ha bisogno di ricalcolare. – redbmk
Sto ricevendo questo originario dal GC secondario. Quindi immagino buona fortuna a capirlo. –