Estoy usando JavaScript y tengo dos variables:
current_elementnew_element Ambos son una instancia de HTMLElement y aquí está su respectiva representación:
<!-- current_element --> <div> <h1>A title</h1> <ul> <li>15</li> <li>18</li> </ul> </div> Sin embargo new_element se representa así:
<div> <h1>A title</h1> <ul> <li class="css">15</li> <li>19</li> </ul> </div> Como puede ver, solo hay dos pequeñas diferencias entre estas dos variables. Mi objetivo es cambiar el DOM. De hecho, tienes el elemento current_element que representa lo que hay en el DOM y el new_element que es con lo que quiero reemplazar el DOM.
Mi principal preocupación es el rendimiento .
Por lo tanto, tengo curiosidad por saber cuál sería la forma más eficiente de aplicar las modificaciones.
replaceWithsetAttribute y la propiedad textContent .Todavía no he podido crear la función de la segunda propuesta, pero supongo que sería recursiva.
Espero que quede claro :)
Los marcos principales (React, Vue) calculan la diferencia entre los elementos dom antiguos y nuevos y luego aplican los cambios necesarios.
En React, por ejemplo, este paso se llama Reconciliación .
Así que creo que si ellos hacen esto para tener el mejor rendimiento, tú también deberías hacerlo.
Por supuesto, calculan la diferencia en una representación de dom virtual, pero lo mismo se aplica si trabaja directamente en los nodos dom.
Su pregunta es muy volátil, porque lo que tenga más rendimiento ahora puede tener menos rendimiento en el futuro. Por lo tanto, cualquier cosa que parezca funcionar mejor debe tomarse con pinzas. Puede comparar el rendimiento creando una matriz de 100 elementos de cambios DOM deseables y hacerlo con el primer enfoque uno tras otro, midiendo el tiempo acumulado y luego haciendo lo mismo con el segundo enfoque.
Sin embargo, es muy recomendable verificar si tiene algún problema de rendimiento para empezar, porque es posible que desee resolver un problema que no existe ni existirá en primer lugar. Entonces, antes de hacer cualquier optimización, es recomendable definir una función como
function changeDOM(root, innerHTML) { //The implementation }y use esta función de manera constante, por lo que si surge algún problema de rendimiento en el futuro, simplemente cambie esta función y todo será más rápido. Ahora, supongamos que ya tiene o tendrá problemas de rendimiento. En ese caso, deberá hacer la comparación que he sugerido en navegadores separados y luego aplicar la solución que funcione mejor.
Además, si tiene un problema de rendimiento, es posible que no esté estrechamente relacionado con el cambio de DOM. Entonces, antes de optimizar el cambio de DOM, deberá comparar su página y ver si hay un problema de rendimiento y si el problema de rendimiento está relacionado con el cambio de DOM. Si la respuesta a ambas es "sí", entonces tendrás que optimizar esto. Pero para tener una vida fácil haciéndolo, sepárelo del resto del código, llámelo como una función.