Performance
Performance beginnt mit Messen. Erst wenn du weißt, was langsam ist, lohnt sich die Optimierung.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Messen statt raten
Mit performance.now() misst du Abschnitte im Code.
Die DevTools zeigen Netzwerk, Rendering und Main-Thread-Aufgaben.
Lighthouse und die Performance-Aufzeichnung liefern Hinweise auf große Bilder, lange Aufgaben und unnötiges JavaScript.
const start = performance.now();
verarbeiteDaten();
const dauer = performance.now() - start;
console.log(`Dauer: ${dauer.toFixed(1)} ms`);Lazy Loading und Prioritäten
Bilder unterhalb des sichtbaren Bereichs können mit loading="lazy" später geladen werden.
Das wichtigste Bild oben sollte nicht verzögert werden.
Skripte bindest du mit defer ein, wenn sie das DOM lesen. Für große Komponenten lohnt sich dynamisches Nachladen.
const observer = new IntersectionObserver((eintraege) => {
for (const eintrag of eintraege) {
if (eintrag.isIntersecting) {
eintrag.target.src = eintrag.target.dataset.src;
observer.unobserve(eintrag.target);
}
}
});Flüssige Animationen
requestAnimationFrame synchronisiert Änderungen mit dem nächsten Frame.
Für Bewegung nutzt du transform und opacity statt Layout-Eigenschaften.
Teure Ereignisse wie scroll oder input drosselst du mit Debounce oder Throttle. So bleibt der Main-Thread frei für das Rendern.
function animiere() {
display.textContent = String(performance.now());
requestAnimationFrame(animiere);
}
requestAnimationFrame(animiere);Vertiefung
Messen, laden, flüssig halten
Performance-Arbeit beginnt mit Messen: performance.now für Abschnitte, DevTools für Netzwerk und Main-Thread, Lighthouse für Überblick. Ohne Messung optimierst du blind.
Lade Bilder und Code erst, wenn sie gebraucht werden. Animieren mit transform und opacity, synchronisiere mit requestAnimationFrame und drossele teure Ereignisse.
const observer = new IntersectionObserver((eintraege) => {
for (const eintrag of eintraege) {
if (!eintrag.isIntersecting) continue;
eintrag.target.src = eintrag.target.dataset.src;
observer.unobserve(eintrag.target);
}
});
document.querySelectorAll("img[data-src]").forEach((img) => observer.observe(img));Merksatz: Messen, Bedarf erkennen, dann laden. requestAnimationFrame und transform halten Bewegung flüssig.
Übungsaufgabe
Lazy-Loading-Galerie
Baue eine Galerie, die Bilder erst beim Scrollen lädt und einen Zähler mit requestAnimationFrame aktualisiert.
Das soll dein Programm können
- IntersectionObserver für Bilder
- data-src und src sauber trennen
- Bild nach dem Laden unobserve
- Zähler mit requestAnimationFrame
- Keine Layout-Eigenschaften animieren
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Im Observer setzt du target.src = target.dataset.src, entfernst das Attribut und rufst observer.unobserve(target) auf.
Lösung anzeigen
const bilder = document.querySelectorAll("img[data-src]");
const zaehler = document.querySelector("#zaehler");
const observer = new IntersectionObserver((eintraege) => {
for (const eintrag of eintraege) {
if (!eintrag.isIntersecting) continue;
const bild = eintrag.target;
bild.src = bild.dataset.src;
bild.removeAttribute("data-src");
observer.unobserve(bild);
}
});
bilder.forEach((bild) => observer.observe(bild));
let start = performance.now();
function aktualisiere() {
zaehler.textContent = `${Math.round(performance.now() - start)} ms`;
requestAnimationFrame(aktualisiere);
}
requestAnimationFrame(aktualisiere);Warum funktioniert das?
Der Observer lädt nur sichtbare Bilder und entfernt sie danach aus der Beobachtung. requestAnimationFrame aktualisiert den Zähler passend zum nächsten Frame.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.