Modi migliori per ridurre il numero di elementi DOM

Question

Tutti concordano sul fatto che meno elementi DOM significano prestazioni migliori della pagina. Significa prestazioni migliori in javascript, specialmente nei browser più vecchi.

Ma dove sono i posti migliori per cercare di ridurre gli elementi DOM? Quali sono i colpevoli comuni che voi ragazzi avete incontrato che sono semplici soluzioni per ottenere quel numero?

Answer 1

uso:

<ul id="navigation-main"> 
    etc.. 
</ul> 

al posto di:

<div id="navigation-main"> 
    <ul> 
     etc.. 
    </ul> 
</div> 

... quando possibile, cioè. A volte è necessario l'ulteriore div per scopi di layout. Ma quando non è necessario, non usarlo.

Answer 2

Ovunque dove si sta utilizzando un elemento per influenzare il layout è di solito qualcosa che si può pensare. Spesso è possibile utilizzare meno elementi combinati con CSS per ottenere lo stesso risultato. Le regole rigide sono difficili in quanto dipende molto dal caso specifico.

Answer 3

Se si utilizzano i controlli server ASP.NET, potrebbe essere un buon punto di partenza. Alcuni dei controlli lato server, benché ideali per lo sviluppo rapido, verranno sottoposti a un markup eccessivo. Non sto sostenendo che non usi i controlli lato server, ma potresti trovare alcuni moduli del tuo sito che sono buoni candidati per la riduzione del DOM entro il

1) riscrivere il markup da solo o 2) costruire il markup con il Spazio dei nomi System.Web.UI.HtmlControls.

I buoni candidati per questo approccio sono componenti che compaiono frequentemente sul tuo sito (intestazione, piè di pagina, menu di navigazione). Anche i candidati non vengono cambiati o modificati di frequente, a meno che non ti sia comodo mantenere questo stile.

Un'altra tecnica specifica di ASP.NET consiste nell'utilizzare un System.Web.UI.WebControls.PlaceHolder per lavorare dinamicamente anziché un div o pannello con l'attributo runat="server". Il controllo segnaposto non renderà alcun elemento aggiuntivo, solo ciò che hai aggiunto ad esso.