Optimización de rendimiento de fragmentos front-end

Nuestro navegador implementa más y más funciones, y la red está cambiando gradualmente a dispositivos móviles, haciendo que nuestro código front-end sea más compacto. Cómo optimizarlo se vuelve cada vez más importante. Donde el front-end es poderoso es que puede haber muchas estrategias simples y hábitos de código que nos permiten garantizar el rendimiento front-end más ideal. El tema de nuestra serie es mostrarle 9 tipos de consejos de código. Solo le llevará un minuto optimizar su código existente.

Use DocumentFragments o innerHTML en lugar de la inyección de elementos complejos

Las operaciones DOM están sujetas a impuestos en el navegador. Aunque la mejora del rendimiento está en el navegador, el DOM es muy lento, si no lo nota, puede notar que el navegador funciona muy lentamente. Por eso es tan importante reducir la creación de nodos DOM centralizados y la inyección rápida.

Ahora supongamos que tenemos un elemento <ul> en nuestra página, llame a AJAX para obtener la lista JSON y luego use JavaScript para actualizar el contenido del elemento. Por lo general, los programadores escribirían:

var list = document.querySelector ('ul'); 
ajaxResult.items.forEach (function (item) { 
    // Create <li> element 
    var li = document.createElement ('li'); 
    li.innerHTML = item.text; 

    // <li> Operaciones generales de elementos, como agregar clases, cambiar atributos, agregar oyentes de eventos, etc. 

    // 
    Inyecte rápidamente elementos <li> en <ul> list.apppendChild (li); 
});

El código anterior es en realidad una forma incorrecta de escribir, es muy lento trasplantar el elemento <ul> con operaciones DOM en cada lista. Si realmente desea usar document.createElement y tratar el objeto como un nodo, debe usar DocumentFragement para problemas de rendimiento.

DocumentFragement es un "almacenamiento virtual" de un conjunto de nodos secundarios y no tiene etiqueta principal. En nuestro ejemplo, imagine DocumentFragement como un elemento invisible <ul>. Fuera del DOM, mantiene sus nodos secundarios hasta que se inyectan en el DOM. Luego, el código original se puede optimizar con DocumentFragment:

var frag = document.createDocumentFragment (); 

ajaxResult.items.forEach (function (item) { 
    // Create <li> element 
    var li = document.createElement ('li'); 
    li.innerHTML = item.text; 

    // < li> Operación general de elementos 
    // Por ejemplo, agregar clase, cambiar atributo, agregar escucha de eventos, agregar nodo hijo, etc. 

    // Agregar elemento <li> al fragmento 
    frag.appendChild (li); 
});