El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, explorarem diverses tècniques i estratègies per optimitzar el rendiment del teu codi JavaScript. L'optimització és crucial per assegurar que les aplicacions siguin ràpides i responsives, millorant així l'experiència de l'usuari.

Conceptes Clau

Minimització del Codi
Evitar Bloquejos del Fil Principal
Utilització de Funcions Asíncrones
Reducció del Temps de Càrrega
Optimització de Bucles i Iteracions
Gestió Eficient d'Esdeveniments
Utilització de Web Workers

Minimització del Codi

Explicació

La minimització del codi implica eliminar espais en blanc, comentaris i altres elements innecessaris per reduir la mida dels fitxers JavaScript. Això ajuda a disminuir el temps de càrrega de les pàgines web.

Exemple

// Codi original
function greetUser(name) {
    console.log("Hello, " + name + "!");
}

// Codi minimitzat
function greetUser(n){console.log("Hello, "+n+"!");}

Eines Recomanades

UglifyJS
Terser

Evitar Bloquejos del Fil Principal

Explicació

El fil principal del navegador és responsable de la major part del treball de renderització i execució de JavaScript. Bloquejar aquest fil pot causar que la pàgina es torni lenta o no responsiva.

Estratègies

Descomposició de Tasques Pesades: Divideix les tasques pesades en parts més petites.
Utilització de requestAnimationFrame: Per tasques relacionades amb el renderitzat.

Exemple

// Tasca pesada
for (let i = 0; i < 1000000000; i++) {
    // Operació intensiva
}

// Descomposició de la tasca
function heavyTask() {
    let i = 0;
    function chunk() {
        for (let j = 0; j < 1000000; j++) {
            if (i >= 1000000000) return;
            // Operació intensiva
            i++;
        }
        requestAnimationFrame(chunk);
    }
    chunk();
}
heavyTask();

Utilització de Funcions Asíncrones

Explicació

Les funcions asíncrones permeten que el codi continuï executant-se mentre es completen operacions que poden trigar temps, com ara sol·licituds de xarxa.

Exemple

async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}
fetchData();

Reducció del Temps de Càrrega

Estratègies

Lazy Loading: Carrega els scripts només quan són necessaris.
Divisió de Codi: Divideix el codi en parts més petites que es carreguen segons sigui necessari.

Exemple

// Lazy Loading amb import dinàmic
document.getElementById('loadButton').addEventListener('click', async () => {
    const module = await import('./heavyModule.js');
    module.doSomething();
});

Optimització de Bucles i Iteracions

Explicació

Els bucles poden ser una font important de retard si no s'optimitzen correctament.

Estratègies

Utilitzar for en lloc de forEach per a grans arrays.
Evitar operacions costoses dins dels bucles.

Exemple

// No òptim
array.forEach(item => {
    processItem(item);
});

// Òptim
for (let i = 0; i < array.length; i++) {
    processItem(array[i]);
}

Gestió Eficient d'Esdeveniments

Explicació

L'assignació d'esdeveniments pot afectar el rendiment si no es fa correctament.

Estratègies

Delegació d'Esdeveniments: Assigna esdeveniments a elements pares en lloc de múltiples elements fills.

Exemple

// No òptim
document.querySelectorAll('.button').forEach(button => {
    button.addEventListener('click', () => {
        console.log('Button clicked');
    });
});

// Òptim
document.querySelector('.container').addEventListener('click', (event) => {
    if (event.target.classList.contains('button')) {
        console.log('Button clicked');
    }
});

Utilització de Web Workers

Explicació

Els Web Workers permeten executar scripts en fils de fons, alliberant el fil principal per a altres tasques.

Exemple

// main.js
const worker = new Worker('worker.js');
worker.postMessage('start');

worker.onmessage = function(event) {
    console.log('Result from worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
    if (event.data === 'start') {
        let result = 0;
        for (let i = 0; i < 1000000000; i++) {
            result += i;
        }
        self.postMessage(result);
    }
};

Exercicis Pràctics

Exercici 1: Minimització del Codi

Minimitza el següent codi manualment:

function calculateSum(a, b) {
    let sum = a + b;
    console.log("Sum:", sum);
    return sum;
}

Solució

function calculateSum(a,b){let sum=a+b;console.log("Sum:",sum);return sum;}

Exercici 2: Utilització de `requestAnimationFrame`

Refactoritza el següent codi per utilitzar requestAnimationFrame:

for (let i = 0; i < 1000000000; i++) {
    // Operació intensiva
}

Solució

function heavyTask() {
    let i = 0;
    function chunk() {
        for (let j = 0; j < 1000000; j++) {
            if (i >= 1000000000) return;
            // Operació intensiva
            i++;
        }
        requestAnimationFrame(chunk);
    }
    chunk();
}
heavyTask();

Resum

En aquesta secció, hem explorat diverses tècniques per optimitzar el rendiment del codi JavaScript. Hem après sobre la minimització del codi, evitar bloquejos del fil principal, utilitzar funcions asíncrones, reduir el temps de càrrega, optimitzar bucles i iteracions, gestionar esdeveniments eficientment i utilitzar Web Workers. Aquestes tècniques són essencials per assegurar que les aplicacions siguin ràpides i responsives, millorant així l'experiència de l'usuari.

Optimització del Rendiment de JavaScript

Conceptes Clau

Minimització del Codi

Explicació

Exemple

Eines Recomanades

Evitar Bloquejos del Fil Principal

Explicació

Estratègies

Exemple

Utilització de Funcions Asíncrones

Explicació

Exemple

Reducció del Temps de Càrrega

Estratègies

Exemple

Optimització de Bucles i Iteracions

Explicació

Estratègies

Exemple

Gestió Eficient d'Esdeveniments

Explicació

Estratègies

Exemple

Utilització de Web Workers

Explicació

Exemple

Exercicis Pràctics

Exercici 1: Minimització del Codi

Solució

Exercici 2: Utilització de requestAnimationFrame

Solució

Resum

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

Exercici 2: Utilització de `requestAnimationFrame`