Prestazioni di rendering: attributi di stile o nomi di classi e regole di fogli di stile?

Sto costruendo una visualizzazione di dati e le prestazioni di rendering sono fondamentali. La mia domanda sarebbe rilevante per l'HTML standard di bog, anche se mi capita di usare SVG, con JavaScript.Prestazioni di rendering: attributi di stile o nomi di classi e regole di fogli di stile?

OK, un ipotetico scenario: dire che ho 10.000 nodi DOM con background-color di "red", e 10.000 nodi DOM con background-color di "green". Ogni nodo è creato da un ciclo JavaScript. Potevo:

impostare un attributo style su ciascun nodo, specificando il background-color del nodo: <element style="background-color:red;"/>
Impostare un attributo class su ciascun nodo e quindi fare riferimento quella classe in uno stile in linea o foglio di stile esterno :

<head><style>.foo {background-color:red;}</style></head>

<body><element class="foo"/></body>

Le prestazioni di download il codice non è affatto importante qui - Sono interessato solo alle prestazioni di rendering del browser. Sono anche abbastanza consapevole che gli attributi di stile non sono solitamente così utili o semantici nello sviluppo quotidiano del sito web, ma qui ho un caso d'uso specifico.

I interessato a risposte logiche, ma sarebbe davvero utile sapere da chiunque ha effettivamente testato questo o leggere su test di qualcun altro (Ho cercato informazioni, ma non ho trovato nulla in particolare su questo).

Grazie per il vostro aiuto!

fonte

2010-11-22 Premasagar

Perché non fai il tuo punto di riferimento? Sospetto che le prestazioni varieranno drasticamente tra i diversi browser ... –

Penso che sia un caso molto specifico ed è molto più semplice confrontarlo da solo con altri browser. La mia scommessa è che non sarà molto diversa, ma chi lo sa. – Athari

La mia ipotesi sarebbe che la soluzione 'style' funzioni più velocemente, ma vorrei fare un benchmark nel mondo reale per scoprirlo. Non dovrebbe essere troppo difficile da fare, basta creare 10.000 oggetti finti –

Ho creato un benchmark delle prestazioni per questo: http://jsperf.com/style-element-vs-attr

Da prove iniziali in Firefox e Chrome, sembra che è circa tre volte più veloce per creare e rendere gli elementi che utilizzano classnames, piuttosto che gli attributi di stile . Ne sono rimasto piuttosto sorpreso - non ne ero sicuro, ma mi aspettavo il contrario.

fonte

2011-05-23 12:05:39 Premasagar

Prenderei queste statistiche con un pizzico di sale, perché è solo misurando il tempo impiegato dal motore javaScript per completare, piuttosto che il tempo necessario per il rendering del grafico. I browser in genere riducono comunque i frame di rendering. Quindi, anche se JSPerf può segnalare un milione di operazioni, i browser potrebbero non eseguire il rendering più velocemente di 60 frame al secondo. In altre parole, i browser scarteranno gli eventi che accadono velocemente, piuttosto che renderli, se un sacco sta procedendo graficamente, perché l'utente non se ne accorgerà comunque. Tutto ciò influenza la significatività dei risultati perf sul rendering grafico. –

Questo è un punto molto giusto. – Premasagar

Nei miei test, utilizzando i profiler del browser, i risultati erano trascurabili in 5000 operazioni, anche se l'impostazione diretta dell'attributo potrebbe essere leggermente più veloce rispetto all'uso di uno stile (che è intuitivo), utilizzando IE e Chrome. È stato un test non scientifico e inconcludente, ma ci sto andando. –

Sarei estremamente sorpreso se c'è una differenza significativa (e ancora più sorpreso se fosse mai importato) ma se ce ne fosse uno sarebbe in IE così panchina.

Detto questo, le condizioni che si stanno testando sono un caso limite che non penso dovresti abusare del tuo markup per ottenere un beneficio di performance da piccolo a insignificante nel caso in cui la linea fosse più veloce. Il CSS basato su classi è incommensurabilmente migliore ai fini dello sviluppo, della manutenzione e della semantica e dovresti evitare gli stili in linea a tutti i costi.

fonte

2010-11-22 11:32:14 annakata

Vorrei andare con 'classe' se ci sono molti nodi. L'utilizzo della memoria dovrebbe essere inferiore per questo caso, che di solito è una buona cosa. –

@Erik:/concur - Non riesco a pensare a nessun motivo per cui lo stile sarebbe migliore e molti perché è peggio. – annakata

Se si dice che ogni nodo è stato creato all'interno di un ciclo JavaScript, non è già necessario per le prestazioni del browser (Motore JavaScript)?

In qualche modo, sarei leggermente più a mio agio nell'impostazione dei colori tramite JavaScript. Supponi, $(this).css('color','red'); piuttosto che aggiungere una classe che richieda al browser di cercare gli stili calcolati disponibili al momento in cui lo script è in esecuzione e quindi renderizza/ri-rende il cambio colore.

Non sono sicuro di avere completamente ragione, solo un'opinione.

fonte

2010-11-22 12:03:20

Dopo confrontare il risultato, mi atterrò per l'utilizzo di soluzioni CSS-in-JS, ho provato molti, e, infine, di utilizzare questo lib:

https://github.com/cssobj/cssobj

E 'creare e regole di aggiornamento CSS da JS, ed è di piccole dimensioni.

fonte

2016-11-25 11:43:15

Prestazioni di rendering: attributi di stile o nomi di classi e regole di fogli di stile?

risposta

Problemi correlati