Il CSS è più veloce quando sei specifico?

div.container più veloce di .container? Sai come in jQuery se sei più specifico con i tuoi selettori è più veloce dato che itera meno con .. È questo il caso con css?Il CSS è più veloce quando sei specifico?

C'è un modo per misurare le prestazioni in css? Per quanto riguarda le prestazioni, cose come questa sono importanti o dipendono fondamentalmente dal peso del testo?

Sarei felice se qualcuno conosce la risposta, ho effettivamente trovato una domanda simile senza una risposta certa. Can CSS be more efficient if it is better specified?

fonte

2015-04-02 Emin Özlem

Direi che '.container' è più veloce di' div.container' perché utilizza un numero inferiore di byte (quindi il css viene trasferito più velocemente). Per quanto riguarda il browser, tuttavia, non lo so. – cybermonkey

Questo dipende dall'implementazione. – Oriol

Non posso confermarlo, ma credo fermamente che sia irrilevante. Il ciclo di rendering di ogni browser interroga ogni elemento rispetto a tutte le regole di stile per corrispondere a – LcSalazar

Nel mondo reale la differenza di velocità sarebbe trascurabile.
Per essere tecnico .container sarebbe più veloce in quanto ha un numero inferiore di selettori da elaborare.

I selettori hanno un'efficienza intrinseca. L'ordine di selettori CSS meno efficaci è quindi il seguente:

ID, , ad es. #header
Classe, , ad es. .promo
Tipo, ad es. div
Fratello adiacente, ad es. h2 + p
Bambino, ad es.li > ul
Discendente, * ad es. ul a*
universale, cioè *
Abilità, esempio [type="text"]
Pseudo-classi/-elementi, , ad es. a:hover

Per quanto riguarda la seconda domanda:

C'è un modo per misurare le prestazioni in CSS?

Steve Souders ha eseguito un test online per misurare le prestazioni dei CSS a cui è ancora possibile accedere here.

Ci sono modi migliori per misurare le prestazioni al giorno d'oggi, ma questa è una risorsa facile e veloce con cui puoi giocare.

Prestazioni saggia, le cose come questa sono importanti o dipendono fondamentalmente dal peso del testo?

La risposta breve è "non proprio".

La risposta lunga è "dipende". Se stai lavorando su un sito semplice, non c'è davvero motivo di fare storie sulle prestazioni CSS diverse dalle conoscenze generali che puoi ottenere dalle migliori pratiche.

Se stai creando un sito con decine di migliaia di elementi DOM allora sì, sarà importante.

fonte

2015-04-02 20:17:34 xengravity

Ho letto sempre di più e ancora non ho una risposta esatta in mente.Ero abituato a pensare che essere specifici fosse meglio, ma sembra che vada diversamente per i CSS, più specifico sei, peggio diventa dato che attraversa l'intero albero DOM ogni volta. Quindi, credo che proverò a mantenere le mie regole il più generali possibile. –

Il nome che hai elencato è "Steve Sounders" ma l'url ha "Steve Souders" - è un refuso? –

Se si desidera testare le prestazioni CSS, è anche possibile ridimensionare la finestra. Se non mostra contenuti, il CSS è troppo pesante. –

In genere, minore è il numero di regole, migliore è il contenuto del contenitore. A parte il caching, il .container viene prima letto, quindi altri elementi devono avere il div aggiunto come filtro di secondo livello ... inutile in molte circostanze.

Questo è piuttosto comune su tutto il motore, anche se ci sono alcuni delta minori.

Vedere questo articolo: Writing efficient CSS, che sebbene provenga da MDN (ed è quindi orientato a Mozilla) vale per la maggior parte di ciò che conosco sui motori in generale.

fonte

2015-04-02 20:05:39

Direi contro il mantra che "meno regole sono migliori". * è infinitamente peggio di dire: html> corpo> div> .container D'altra parte l'idea che "regole più specifiche sono migliori" è certamente vera. – xengravity

Richiama un punto interessante, ma credo che * dovrebbe essere più veloce di html> body> div> .container. Cosa * fa si inserisce sopra il foglio di stile del browser predefinito per tutti i tag. Poiché il CSS è fondamentalmente un modello a sandwich, questo lo rende semplicemente un selettore di livello inferiore (e quindi meno specifico), ma uno che supera lo stile predefinito. Non è come se si dovesse fare un memcopy in ogni oggetto (come si farebbe con jquery o qualcosa del genere). Quindi, anche se ci sono elementi di ciò che dici potrebbe essere corretto, suggerendo che * è intrinsecamente più lento di quello che l'esecuzione di 5 regole è discutibile. –

delta tra il caso migliore e il caso peggiore era 50ms. In altre parole, considera le prestazioni del selettore ma non sprecare troppo tempo su di esso. Vedi: https://smacss.com/book/selectors

Quindi non credo abbia molto senso di estendere le regole CSS solo per ottenere una performance superiore. Basta considerare la maggiore quantità di traffico di rete, forse peggiore manutenibilità, ... Tuttavia nel link è possibile leggere, quali regole considerare senza dover aumentare la dimensione CSS.

Se .container e div.container corrispondono esattamente agli stessi elementi nella pagina, il primo potrebbe essere ancora più veloce: se il browser valuta inizialmente .container, in realtà sarebbe stato completato, ma con div.container ha INOLTRE DA controllare, se l'elemento è un div.

disclaimer: non so come i browser implementino davvero queste cose. Le mie conclusioni si basano sull'articolo collegato.

fonte

2015-04-02 20:08:43

Il CSS è più veloce quando sei specifico?

risposta

Problemi correlati