Hvad er de vigtigste måder at optimere frontend-performance på?

Question

IT Interview Practice · Accepted Answer

**Optimér den del af brugerrejsen, der faktisk er langsom, og mål derefter effekten.** En mindre bundle er nyttig, når oplevelsen forbedres eller relevante omkostninger falder.

Antag, at kunder på almindelige telefoner åbner en produktside, ser hovedbilledet sent og oplever ventetid ved variantvalg. Indlæsning og interaktion er separate problemer; ét tiltag løser ikke nødvendigvis begge.

## 1. Bekræft symptomet med repræsentative målinger

Vælg et vigtigt forløb, en enhed og netværksforhold. Brug målinger fra rigtige brugere til at finde de berørte og kontrollerede browsertests til reproduktion. En stærk udviklingscomputer kan skjule kundernes ventetid.

- LCP måler, hvornår det største synlige indholdselement tegnes, og hjælper med at vurdere indlæsning.
- INP beskriver reaktion på brugerinteraktioner gennem sidebesøget.
- CLS måler uventede layoutskift, eksempelvis indhold, der flytter sig, når et billede kommer.

Disse [Core Web Vitals](https://web.dev/articles/vitals) dækker forskellige oplevelser. Knyt dem til den faktiske opgave, som variantvalg og tilføjelse til kurv, så et bedre tal ikke skjuler ødelagt funktionalitet.

## 2. Find forsinkelsen af vigtigt indhold

Undersøg request waterfall: tidslinjen for opdagelse, download og afslutning af ressourcer. Produktets hovedbillede kan måske først starte efter JavaScript og et API-kald.

```text
HTML -> JavaScript -> Product API -> Main image
```

Billedkomprimering hjælper overførslen, men tidligere opdagelse kan fjerne ventetid før den. Overvej nyttigt produktindhold i første HTML gennem serverrendering eller statisk generering, hvor passende. Kontrollér friskhed, serverpris og den JavaScript, der stadig kræves for interaktivitet.

## 3. Reducér unødig overførsel og udførelse

Når den kritiske vej er forstået, fjernes arbejde, der ikke hjælper den aktuelle skærm. Foretræk ændringer knyttet til en målt forsinkelse frem for alle optimeringer på én gang.

- Lever passende billedstørrelser og formater. Lazy-load billeder uden for skærmen, men forsink ikke hovedbilledet, brugeren venter på.
- Opdel kode efter rute eller funktion, så produktsiden ikke henter ubrugt administration.
- Fjern unødige afhængigheder, og gennemgå tredjepartsscripts, som koster både netværkstid og arbejde på hovedtråden.
- Komprimér egnede tekstsvar, og cache versionsmærkede statiske filer. Definér separate sikre regler for personlige data.

Mindre filer reducerer overførsel, men browseren skal stadig parse og udføre kode. Kontrollér netværks- og CPU-effekt før succeserklæringen.

## 4. Ret langsom interaktion ved årsagen

Ved forsinket variantvalg profileres hovedtråden, som håndterer meget scripting og rendering. En lang beregning kan blokere respons, selv efter alle filer er hentet.

Opdel langt arbejde eller flyt passende beregning til en worker. Ved hyppige inputændringer undgås unødige anmodninger, og gamle svar må ikke overskrive nyere valg. Brug memoization ved påvist dyr gentagelse, ikke som standardpynt.

Ved lange lister kan rendering af kun det synlige reducere arbejdet, men bevar tastaturnavigation og tilgængelighed. Reservér plads til billeder og forsinket indhold mod layoutspring. Tiltagene løser forskellige symptomer, så kontrollér hvert mod det oprindelige problem.

## 5. Verificér hele rejsen efter ændringen

Gentag samme kontrollerede test, og følg rigtige brugere efter udgivelse. Kontrollér produktkorrekthed, tastaturadgang, gennemført kurv og eventuelt højere backendbelastning sammen med ydelsesmål.

Sæt praktiske budgetter for vigtige ressourcer, og overvåg regressioner. En god laboratoriescore er ikke nok, hvis kunder stadig venter eller ikke kan fuldføre. **Resultatet bør være en hurtigere, stabil og brugbar rejse dokumenteret før og efter ændringen.**

1. Bekræft symptomet med repræsentative målinger

2. Find forsinkelsen af vigtigt indhold

3. Reducér unødig overførsel og udførelse

4. Ret langsom interaktion ved årsagen

5. Verificér hele rejsen efter ændringen

Relaterede spørgsmål