Un mio amico ha detto che usare al <div style=""></div>
posto del file css compresso messo come link href
nella sezione principale dà un certo incremento delle prestazioni. È vero?
Un mio amico ha detto che usare al <div style=""></div>
posto del file css compresso messo come link href
nella sezione principale dà un certo incremento delle prestazioni. È vero?
Risposte:
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.hover
o #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!
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.
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
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.
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>
Non esiste una risposta fissa secondo me.
Un inline CSS
verrà caricato più velocemente se le dimensioni del contenuto CSS vengono scaricate più velocemente di quanto il tuo server risponderebbe a una external CSS file
richiesta (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.
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
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.