rimozione elementi DOM inutilizzati per prestazioni

Question

Sto scrivendo un'applicazione a pagina singola. Quando la pagina viene inizialmente servita, contiene molti elementi DOM che contengono stringhe json che sto iniettando nella pagina.

Quando la pagina viene caricata sul client, la prima cosa che accade è che questi elementi DOM vengono analizzati da oggetti json a javascript e quindi non vengono mai più utilizzati.

Esiste un vantaggio in termini di prestazioni per eliminarli dal DOM e ridurne le dimensioni? Non ho trovato dati conclusivi su questo aspetto. Per informazioni, questi elementi hanno una dimensione di circa 500K.

Grazie per i vostri suggerimenti.

Answer 1

indipendente dal fatto che si tira la JSON dal DOM, si potrebbe considerare questa tecnica per compresi i tuoi oggetti JSON:

<script type='text/json' id='whatever'> 
    { "some": "json" } 
</script> 

i browser ignorano completamente il contenuto di questi script (ad eccezione, naturalmente, per le stringhe embedded che assomigliare a </script>, che mi viene in mente per le cose che un serializzatore JSON potrebbe voler gestire in qualche modo), quindi non rischi di imbattersi in progetti con e commerciali e cose incorporati. Probabilmente è una vittoria per le prestazioni in sé e per sé: il browser probabilmente ha un tempo più semplice per cercare la fine del blocco <script> piuttosto che guardare attraverso cose che pensa sia un contenuto reale. È possibile ottenere il contenuto alla lettera con .innerHTML.

Answer 2

Ci sarebbe un vantaggio in termini di prestazioni nella cancellazione dal DOM e ridurne le dimensioni?

In termini di prestazioni del DOM, in generale, meno interagisci con il tuo DOM, meglio è.

Ricorda che i tuoi selettori attraversano il dominio, quindi se utilizzi selettori inefficienti, le prestazioni saranno scarse a prescindere, ma se selezioni gli elementi in base all'ID anziché alla classe o all'attributo laddove possibile, puoi ottenere buone prestazioni fuori dalla pagina, indipendentemente dal fatto che tu abbia eliminato quegli elementi di markup estranei.

Quando la pagina viene inizialmente servita, contiene molti elementi DOM che contengono stringhe JSON che sto iniettare nella pagina .... Per info, questi elemnts sono circa 500K di dimensione.

In termini di caricamento della pagina, le prestazioni stanno già risentendo del trasferimento di tutti questi dati. se riesci a trovare un modo per trasferire solo JSON, potrebbe solo aiutare. Cancellare dopo il fatto non risolverebbe questo particolare problema, però.