CSS esterno rispetto alla differenza di prestazioni dello stile in linea?

89

Un mio amico ha detto che usare al <div style=""></div>posto del file css compresso messo come link hrefnella sezione principale dà un certo incremento delle prestazioni. È vero?

css  performance  inline-styles 
— Giorgio
fonte
1
Per quanto ne so, sono (più o meno) uguali, ma non posso verificarlo.
— Nightfirecat
3
— Sudhir Bastakoti
1
Dovrebbe essere un significativo aumento delle prestazioni per affrontare gli incubi di manutenzione che sono stili in linea. Finora non ho visto alcuna prova di ciò.
— Steveax
1
Per le versioni precedenti di IE l'aumento delle prestazioni è MOLTO significativo. Ho visto le tabelle HTML comportarsi come un collante con lo stile CSS.
— Jonathan

Risposte:

90

L'aumento delle prestazioni menzionato dal tuo amico è probabilmente troppo banale rispetto alla quantità di aumento delle prestazioni (attraverso altri fattori) usando un file CSS.

Utilizzando l'attributo style, il browser dipinge solo la regola per quel particolare elemento, che in questo caso è l' <div>elemento. Ciò riduce la quantità di tempo di ricerca per il motore CSS per trovare gli elementi che corrispondono al selettore CSS (ad esempio a.hovero #someContainer li).

Tuttavia, mettere lo stile a livello di elemento significherebbe che non è possibile memorizzare separatamente le regole di stile CSS. Di solito l'inserimento di stili nei file CSS consentirebbe di eseguire la memorizzazione nella cache, riducendo così la quantità di carico dal server ogni volta che si carica una pagina.

Mettere le regole di stile a livello di elemento ti farà anche perdere traccia di quali elementi sono stilizzati in che modo. Potrebbe anche ritorcersi contro l'aumento delle prestazioni della pittura di un particolare elemento in cui è possibile ridipingere più elementi insieme. L'utilizzo di file CSS separa il CSS dall'HTML, e quindi ti consente di assicurarti che i tuoi stili siano corretti e che sia più facile modificarli in seguito.

Pertanto, se guardi il confronto, vedrai che l'uso di un file CSS ha molti più vantaggi rispetto allo stile a livello di elemento.

Per non dimenticare che quando hai un file di foglio di stile CSS esterno, il tuo browser può memorizzare nella cache il file che aumenta l'efficienza dell'applicazione!

— mauris
fonte
4
Potete fornire statistiche con Chrome Profiler? CPU e GPU sono costose su dispositivi mobili e tablet, dove il consumo della batteria è enorme. Penso che ci sia un compromesso. E qual è il vantaggio di Cache? Il browser dovrà calcolare lo stile per l'elemento corrente e la risoluzione degli stili sarà più costosa se ci sono molte regole.
— Akash Kava
28
Nota che tutti gli svantaggi legati alla manutenzione scompaiono quando c'è un motore che allinea gli stili prima di inviarli ai clienti
— Moshe Shaham
6
Gli svantaggi legati alla manutenzione scompaiono anche quando si utilizza React + Radium.
— AjaxLeung
1
@AjaxLeung senza dubbio quello che avete detto tu e Shaham è vero. Questa risposta è stata scritta nel 2011, quando la maggior parte degli strumenti moderni non era ancora disponibile.
— mauris
2
Sì. Stavo semplicemente aggiungendo il commento per coloro che vedono questa risposta oggi e oltre.
— AjaxLeung
6

La pagina verrà caricata più velocemente se utilizzi stili in linea rispetto a fogli di stile. In alcuni casi deve essere più veloce.

Quando si utilizza un foglio di stile utilizzando href, è necessaria un'altra richiesta al server, quindi l'analisi del file dopo la risposta. Con gli stili in linea non c'è niente di tutto ciò, solo l'analisi diretta.

Se un client ha una connessione Internet lenta, quella singola richiesta potrebbe essere molto lenta lasciando la pagina senza stile fino a quando il foglio di stile non viene consegnato. Di nuovo, se fosse in linea non ci sarebbe alcun ritardo.

L'unico motivo per cui usiamo i fogli di stile è per essere organizzati. Ci sono momenti in cui non sono necessari, quindi gli stili inline oi fogli di stile nel documento sono sufficienti.

— sebjwallace
fonte
10
Questa risposta ignora completamente la memorizzazione nella cache del browser. I fogli di stile consentono di richiedere gli stili solo una volta e di memorizzarli nella cache, riducendo la quantità di contenuto inviato in rete.
— GeekOnCoffee
3
Questa risposta ignora anche il fatto che gli stili inline aumentano le dimensioni del file HTML. Potenzialmente, soprattutto quando si utilizza uno stile inline ripetuto, un numero di volte più grande del file CSS. A proposito, i browser possono caricare più file in parallelo (e memorizzarli nella cache come menzionato sopra).
— Jan Van der Haegen
@ GeekOnCoffee ma si spera che la pagina HTML venga memorizzata nella cache (304), quindi la memorizzazione nella cache non viene realmente ignorata.
— Vidar
1
@JanVanderHaegen Il tempo di caricamento iniziale potrebbe essere più veloce se non devi includere CSS che non sono usati nella pagina specifica che stai visitando. Se metti tutto il tuo CSS in file esterni, il file HTML è più piccolo, vero, ma il file CSS esterno potrebbe essere più grande. Pro e contro.
— Vidar
5

Non è una domanda facile a cui rispondere, perché le prestazioni in questo caso dipendono da molti fattori (complessità dei selettori CSS, dimensione del documento, ecc.). Tuttavia, se prendiamo un caso isolato, possiamo vedere che la classe CSS è in generale più veloce dello stile inline:
stile inline vs classe CSS

— s.ermakovich
fonte
5
Abbastanza sicuro questo sta testando la velocità con cui viene modificata la classe del nodo o l'attributo di stile piuttosto che la velocità con cui viene applicato lo stile, che è ciò che si pone la domanda
— Sam
@Sam Cosa intendi per "velocità di applicazione dello stile"? Potete fornire un test che misuri questa velocità? Se dai un'occhiata al codice del test, vedrai che il reflow della pagina si verifica ad ogni iterazione, il che significa che il test copre non solo la modifica della classe / attributo, ma anche l'impatto effettivo sulla pagina.
— s.ermakovich
Forse include il tempo per aggiungere lo stile ma aggiunge anche tempo. E se il documento avesse già il test di classe o uno stile inline senza che JS avesse bisogno di aggiungerlo. Sto raggiungendo la velocità per la risoluzione del CSS in entrambi i casi e (potrei sbagliarmi) ma non penso che questo test faccia solo questo, penso che faccia un lavoro extra.
— Sam
@Sam Questo test ignora la possibile impronta del caricamento di CSS dal browser e dell'elaborazione. Ho accennato nella mia risposta che questo è un caso isolato. Misura solo le prestazioni dell'applicazione degli stili utilizzando modi diversi (inline vs esterno). Questo è ciò che fanno oggi le tipiche applicazioni web: cambia il documento HTML da JavaScript senza ricaricare la pagina.
— s.ermakovich
Ah OK, mi riferivo a stili aggiunti non dinamicamente
— Sam
3

Beh, può, ma il motivo per il foglio di stile collegato o esterno è che può essere memorizzato nella cache nel browser soprattutto quando si utilizza lo stesso div in più pagine per il sito. Ciò significa che il browser deve caricare il foglio di stile solo una volta invece di dover ricaricare il codice ogni volta che il browser ricarica la pagina. Rende anche un codice più pulito che semplifica qualsiasi modifica o debug.

— eciusr
fonte
3
È l'essenza del meccanismo di caching. Non ha bisogno di prove.
— stroncium
5
Può essere "incassato" non significa che sia "incassato"; e le "essenze" non sono fatti.
— Ivan Castellanos
6
Ragazzi, non è più l'era del Duke Nukem, non incassiamo le persone. Cache d'altra parte ...
— Sebas
3
L'argomento del caching non vale per le applicazioni a pagina singola, che generalmente caricano tutto una volta in primo piano e generano le pagine al volo.
— MindJuice
1

LA VERITÀ È 'SI'

C'è un'enorme differenza. Soprattutto quando si automatizza l'interfaccia utente. Prova il codice seguente. Uso IE10 e il blocco note per sviluppare. Sto imparando mentre vado e faccio i test, questo è un test di versione abbreviato. (potrebbero esserci errori poiché ho ridotto il codice per mostrare la tua risposta)

Fare clic sull'immagine a cui si fa riferimento e leggere i messaggi di avviso. SUGGERIMENTO: salva questo file e salva di nuovo come modifica prima di modificarlo (test).

I migliori auguri, Don

<!DOCTYPE html>
  <head>
    <style>
      div.grid
        {
        width:180px;
        height:42px;
        border:none;
        }
      img
        {
        width:50px;
        height:50px;
        margin:2px;
        float:left;
        border: 1px solid red;
        }
    </style>
    <script>
      function handleSelect(xId)
        {
        //
        // TESTPOINT
        alert("TESTPOINT\r>Grid: " + xId);
        //
        // GET BORDER COLOR
        // NOTE: An empty or blank value when you can see a border means the tag itself does not
        //            have 'border properties' (style="border: 2px{width} solid{style} green{color}").
        //            although there can be a border detailed via css local or external or via code (script).
        //            If the 'border properties' are returned then they were setup at the tag as
        //            above or the 'border properties' were updated by script code not css code.
        //            If the 'border properties' are NOT returned then they were setup via css.
        //            Thus, since everything seems to be heading toward edit on the fly (live) then css is NOT the way to go (learning).
        // HINT: Margin property is also not readable if set via css. Most likely all the properties values are the same way.
        //           Thus, setting the property values of a tag should be set at the tag control.
        // (works) cBorder=document.getElementById(xId).style.borderWidth;
        // (works) cBorder=document.getElementById(xId).style.borderStyle;
        // (works) cBorder=document.getElementById(xId).style.borderColor;
        // (works) cBorder=document.getElementById(xId).style.border;
        //cBorder=document.getElementById(xId).style.border;
        cBorder=document.getElementById(xId).style.margin;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder);
        //
        // SELECT IMAGE
        document.getElementById(xId).style.margin="1px";
        document.getElementById(xId).style.border="2px solid gold";
        document.getElementById(xId).innerHTML=xId;
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]");
        //
        // GET BORDER COLOR
        //var cBorder=document.getElementById(xId).style.border-Color;  //Error
        //var cBorder=document.getElementById(xId).style.border-color;  //Error
        //var cBorder=document.getElementById(xId).style.borderColor;   //Error
        //var cBorder=document.getElementById(xId).style.bordercolor;   //Undefined
        cBorder=document.getElementById(xId).style.border;      //Empty
        alert("TESTPOINT\r>Grid: " + xId + "\r>Border: " + cBorder + "\r>[set border color gold]" + "\r>Border: " + cBorder);
        }
    </script>
  </head>

  <body>
    <div class="grid">
      <img style="border: 2px solid green" id="R0C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid blue" id="R0C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img style="border: 2px solid purple" id="R0C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R1C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R1C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
    <div class="grid">
      <img id="R2C0" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C1" src="someimage.bmp" onclick="handleSelect(id)">
      <img id="R2C2" src="someimage.bmp" onclick="handleSelect(id)">
    </div>
  </body>
</html>
— don
fonte
28
Uso IE10 e il blocco note per sviluppare. ?
— AlexGrafe
1

Non esiste una risposta fissa secondo me.

Un inline CSSverrà caricato più velocemente se le dimensioni del contenuto CSS vengono scaricate più velocemente di quanto il tuo server risponderebbe a una external CSS filerichiesta (considerando l'ora del DNS, la latenza del server, ecc.).

Per CSS di dimensioni normali li inserirò nella pagina, per qualcosa di più di 15-20 KB probabilmente lo metterei in un file esterno e mi assicurerei che possa essere memorizzato nella cache.

Sono sicuro che ci sono molte altre considerazioni che mi mancano ora, ma non esiste una risposta fissa per inline vs esterno.

— adrianTNT
fonte
-1

L'uso di fogli di stile esterni è sicuramente un'opzione migliore perché ti aiuterà a ricordare lo stile che hai applicato ai div. Riduce il tempo di caricamento della pagina perché minore è il codice HTML più velocemente verrà caricato.

Ma in alcuni casi potresti dover modificare alcune proprietà di un particolare div, quindi lo stile inline è l'opzione migliore. E in verità, uno o due stili in linea non cambieranno il tempo di caricamento della pagina.

Esiste un'altra opzione del foglio di stile interno, ma viene utilizzata solo quando si dispone di un sito Web a pagina singola, come se si stesse creando un modello. Questo perché devi scrivere CSS in ogni pagina HTML

— vicky
fonte
-2

Preferisco usare CSS in linea rispetto a CSS esterni dove ci sono più piccoli file CSS per ogni altro elemento o immagine. Non ha senso scaricare diversi file CSS con solo 5-10 righe di codice ciascuno. Se il tuo elemento contiene proprietà come hover, active, checks ecc., Dovresti quindi utilizzare un file CSS esterno in quanto eviterà di complicare il processo di sviluppo.

— atuls1396
fonte
Ciò rende estremamente difficile la manutenzione. I file CSS, JS dovrebbero essere memorizzati nella cache del browser dell'utente per impostazione predefinita.
— dave2118
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.