El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Manipulació Eficient del DOM

Següent ►
►

La manipulació del Document Object Model (DOM) és una part fonamental del desenvolupament web amb JavaScript. No obstant això, si no es fa de manera eficient, pot afectar negativament el rendiment de la teva aplicació. En aquesta secció, aprendrem tècniques per manipular el DOM de manera eficient.

Conceptes Clau

  1. Comprendre el DOM

El DOM és una representació en forma d'arbre de la pàgina web. Cada element HTML és un node en aquest arbre. Manipular el DOM implica afegir, eliminar o modificar aquests nodes.

  1. Reflow i Repaint

  • Reflow: Es produeix quan el navegador ha de calcular de nou les posicions i dimensions dels elements en la pàgina.
  • Repaint: Es produeix quan el navegador ha de tornar a dibuixar una part de la pàgina a causa d'un canvi visual.

Els reflows són més costosos en termes de rendiment que els repaints. Per tant, és important minimitzar els reflows.

  1. Manipulació Directa vs. Manipulació en Memòria

Manipular el DOM directament pot ser costós. Una tècnica eficient és fer manipulacions en memòria (utilitzant fragments de document) i després afegir-les al DOM.

Tècniques per a una Manipulació Eficient del DOM

  1. Utilitzar Fragments de Document

Els fragments de document permeten crear nodes en memòria i afegir-los al DOM en una sola operació.

// Crear un fragment de document
const fragment = document.createDocumentFragment();

// Crear nous elements i afegir-los al fragment
for (let i = 0; i < 100; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = `Element ${i}`;
  fragment.appendChild(newDiv);
}

// Afegir el fragment al DOM
document.body.appendChild(fragment);

  1. Evitar Accessos Repetits al DOM

Cada accés al DOM pot ser costós. És millor emmagatzemar referències als elements que necessites manipular.

const container = document.getElementById('container');

// Evitar accedir al DOM dins del bucle
for (let i = 0; i < 100; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = `Element ${i}`;
  container.appendChild(newDiv);
}

  1. Utilitzar innerHTML amb Precaució

innerHTML pot ser més ràpid que crear elements individualment, però també pot ser menys segur i més difícil de mantenir.

const container = document.getElementById('container');
let htmlString = '';

for (let i = 0; i < 100; i++) {
  htmlString += `<div>Element ${i}</div>`;
}

container.innerHTML = htmlString;

  1. Minimitzar els Reflows

  • Afegir classes en lloc d'estils individuals: Afegir una classe que conté múltiples estils és més eficient que afegir estils individualment.
  • Amagar elements durant la manipulació: Amagar un element (display: none) abans de fer múltiples canvis i després mostrar-lo de nou pot reduir els reflows.
const container = document.getElementById('container');
container.style.display = 'none';

// Fer múltiples canvis
for (let i = 0; i < 100; i++) {
  const newDiv = document.createElement('div');
  newDiv.textContent = `Element ${i}`;
  container.appendChild(newDiv);
}

container.style.display = 'block';

  1. Utilitzar Delegació d'Esdeveniments

La delegació d'esdeveniments permet gestionar esdeveniments en elements dinàmics de manera més eficient.

const container = document.getElementById('container');

// Delegació d'esdeveniments
container.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'DIV') {
    console.log(`Element clicat: ${event.target.textContent}`);
  }
});

Exercicis Pràctics

Exercici 1: Crear i Afegir Elements amb un Fragment de Document

Crea una funció que afegeixi 100 elements div amb el text "Element X" (on X és el número de l'element) a un contenidor utilitzant un fragment de document.

function addElements() {
  const fragment = document.createDocumentFragment();
  for (let i = 1; i <= 100; i++) {
    const newDiv = document.createElement('div');
    newDiv.textContent = `Element ${i}`;
    fragment.appendChild(newDiv);
  }
  document.getElementById('container').appendChild(fragment);
}

Exercici 2: Delegació d'Esdeveniments

Implementa la delegació d'esdeveniments per gestionar clics en elements div dins d'un contenidor. Quan es faci clic en un div, mostra un missatge amb el text del div clicat.

document.getElementById('container').addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'DIV') {
    alert(`Element clicat: ${event.target.textContent}`);
  }
});

Resum

En aquesta secció, hem après diverses tècniques per manipular el DOM de manera eficient:

  • Utilitzar fragments de document per reduir el nombre d'operacions directes al DOM.
  • Evitar accessos repetits al DOM emmagatzemant referències.
  • Utilitzar innerHTML amb precaució per a grans quantitats de contingut.
  • Minimitzar els reflows amagant elements durant la manipulació.
  • Utilitzar la delegació d'esdeveniments per gestionar esdeveniments en elements dinàmics.

Aquestes tècniques ajudaran a millorar el rendiment de les teves aplicacions web i a fer-les més responsives. En el proper tema, explorarem com gestionar i validar formularis de manera eficient.

◄ Anterior
◄
Següent ►
►

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats