eliminando elementos DOM no utilizados para el rendimiento

Question

Estoy escribiendo una aplicación de una sola página. Cuando la página se sirve inicialmente, contiene muchos elementos DOM que contienen cadenas json que estoy inyectando en la página.

Cuando la página se carga en el cliente, lo primero que ocurre es que estos elementos DOM se analizan desde json a objetos JavaScript y luego nunca se vuelven a usar.

¿Habría un beneficio de rendimiento en eliminarlos del DOM y reducir su tamaño? No he encontrado datos concluyentes sobre este aspecto. Para información, estos elementos tienen un tamaño de aproximadamente 500K.

Gracias por sus sugerencias.

Answer 1

Independientemente de si usted tira de la JSON desde el DOM, es posible considerar esta técnica para la inclusión de sus objetos JSON:

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

Navegadores ignorarán por completo el contenido de esos guiones (excepto, por supuesto, para las cadenas incrustadas que parezca </script>, que se me ocurre como cosas que un serializador JSON podría querer tratar de alguna manera), por lo que no corre el riesgo de toparse con proplems con símbolos y cosas integradas. Probablemente sea una ganancia de rendimiento en sí misma: el navegador probablemente tenga más facilidad para buscar el final del bloque <script> que mirar cosas que cree que son contenido real. Puede obtener el contenido al pie de la letra con .innerHTML.

Answer 2

¿Habría un beneficio de rendimiento en eliminarlos del DOM y reducir su tamaño?

En términos del rendimiento del DOM, generalmente, mientras menos interactúes con tu DOM, mejor.

Recuerde que sus selectores atraviesan el dom, por lo que si usa selectores ineficientes, será un rendimiento pobre sin importar qué, pero si selecciona elementos por ID en lugar de clase o atributo siempre que sea posible, puede exprimir un buen rendimiento fuera de la página, independientemente de si ha eliminado esos elementos de marcado extraños.

Cuando se sirve inicialmente la página, que contiene muchos elementos DOM que contienen cadenas JSON que estoy inyectando en la página .... Para información, estos elemnts son aproximadamente 500K de tamaño.

En términos de carga de página, su rendimiento ya está sufriendo por tener que transferir todos esos datos. si puedes encontrar una forma de transferir el json solo, solo podría ayudar. Sin embargo, borrar después del hecho no resolvería este problema en particular.