1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597<!--
CO_OP_TRANSLATOR_METADATA:
{
"original_hash": "b275fed2c6fc90d2b9b6661a3225faa2",
"translation_date": "2026-01-07T00:35:58+00:00",
"source_file": "5-browser-extension/3-background-tasks-and-performance/README.md",
"language_code": "no"
}
-->
# Nettleserutvidelsesprosjekt Del 3: Lær om Bakgrunnsoppgaver og Ytelse
```mermaid
journey
title Din Reise for Ytelsesoptimalisering
section Grunnlag
Lær nettleserverktøy: 3: Student
Forstå profilering: 4: Student
Identifiser flaskehalser: 4: Student
section Utvidelsesfunksjoner
Bygg fargesystem: 4: Student
Lag bakgrunnsoppgaver: 5: Student
Oppdater ikoner dynamisk: 5: Student
section Optimalisering
Overvåk ytelse: 5: Student
Feilsøk problemer: 4: Student
Poler opplevelse: 5: Student
```
Har du noen gang lurt på hva som gjør at noen nettleserutvidelser føles raske og responsive, mens andre virker trege? Hemmeligheten ligger i hva som skjer bak kulissene. Mens brukere klikker rundt i utvidelsens grensesnitt, finnes det en hel verden av bakgrunnsprosesser som stille håndterer henting av data, ikonoppdateringer og systemressurser.
Dette er vår siste leksjon i nettleserutvidelsesserien, og vi skal få karbonavtrykksporeren din til å fungere smidig. Du vil legge til dynamiske ikonoppdateringer og lære hvordan du oppdager ytelsesproblemer før de blir alvorlige. Det er som å tune en racerbilen – små optimaliseringer kan gjøre en enorm forskjell i hvordan alt fungerer.
Når vi er ferdige, vil du ha en polert utvidelse og forstå ytelsesprinsippene som skiller gode nettapper fra de flotte. La oss dykke ned i nettleseroptimaliseringens verden.
## Forhåndsforelesnings-Quiz
[Forhåndsforelesnings-quiz](https://ff-quizzes.netlify.app/web/quiz/27)
### Introduksjon
I våre tidligere leksjoner har du laget et skjema, koblet det til en API, og håndtert asynkron datahenting. Utvidelsen din tar form på en fin måte.
Nå trenger vi å legge de siste detaljene – som å få ikonet til utvidelsen til å endre farge basert på karbondata. Dette minner meg om hvordan NASA måtte optimalisere hvert system på Apollo-romfartøyet. De hadde ikke råd til noen bortkastede sykluser eller minne fordi liv var avhengig av ytelsen. Selv om vår nettleserutvidelse ikke er like kritisk, gjelder de samme prinsippene – effektiv kode gir bedre brukeropplevelser.
```mermaid
mindmap
root((Ytelse og bakgrunnsoppgaver))
Browser Performance
Rendering Pipeline
Asset Optimization
DOM Manipulation
JavaScript Execution
Profiling Tools
Developer Tools
Performance Tab
Timeline Analysis
Bottleneck Detection
Extension Architecture
Background Scripts
Content Scripts
Message Passing
Icon Management
Optimization Strategies
Code Splitting
Lazy Loading
Caching
Resource Compression
Visual Feedback
Dynamic Icons
Color Coding
Real-time Updates
User Experience
```
## Grunnleggende om Nettleserytelse
Når koden din kjører effektivt, kan folk faktisk *føle* forskjellen. Du vet det øyeblikket når en side laster umiddelbart eller en animasjon flyter jevnt? Det er god ytelse på jobb.
Ytelse handler ikke bare om hastighet – det handler om å lage nettopplevelser som føles naturlige i stedet for klønete og frustrerende. Tidlig i databehandlingens dager hadde Grace Hopper berømt en nanosekund (et stykke ledning som var omtrent en fot langt) på skrivebordet for å vise hvor langt lys reiser i en milliarddel av et sekund. Det var hennes måte å forklare hvorfor hvert mikrosekund teller i databehandling. La oss utforske detektivverktøyene som hjelper deg å finne ut hva som sinker ting.
> "Nettstedets ytelse handler om to ting: hvor raskt siden lastes, og hvor raskt koden på den kjører." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
Temaet om hvordan du får nettsidene dine lynraske på alle slags enheter, for alle slags brukere, i alle slags situasjoner, er selvsagt omfattende. Her er noen punkter å ha i bakhodet når du bygger enten et standard nettoprojekt eller en nettleserutvidelse.
Det første steget i å optimalisere nettstedet ditt er å forstå hva som faktisk skjer under panseret. Heldigvis har nettleseren din kraftige detektivverktøy innebygd.
```mermaid
flowchart LR
A[HTML] --> B[Tolk]
B --> C[DOM-tre]
D[CSS] --> E[Tolk]
E --> F[CSSOM]
G[JavaScript] --> H[Utfør]
C --> I[Rendererings-tre]
F --> I
H --> I
I --> J[Oppsett]
J --> K[Maling]
K --> L[Sammensetning]
L --> M[Visning]
subgraph "Kritisk rendereringsvei"
N["1. Tolk HTML"]
O["2. Tolk CSS"]
P["3. Utfør JS"]
Q["4. Bygg rendererings-tre"]
R["5. Oppsett elementer"]
S["6. Mal piksler"]
T["7. Sett sammen lag"]
end
style M fill:#e8f5e8
style I fill:#fff3e0
style H fill:#ffebee
```
For å åpne Utviklerverktøy i Edge, klikk på de tre prikkene øverst til høyre, gå deretter til Flere verktøy > Utviklerverktøy. Eller bruk hurtigtasten: `Ctrl` + `Shift` + `I` på Windows eller `Option` + `Command` + `I` på Mac. Når du er der, klikker du på Ytelsestabben – her skal du gjøre undersøkelsen din.
**Her er din detektivverktøykasse for ytelse:**
- **Åpne** Utviklerverktøy (du kommer til å bruke disse konstant som utvikler!)
- **Gå** til Ytelsestabben – tenk på det som nettappens aktivitetsmåler
- **Trykk** på Spill inn-knappen og se siden i aksjon
- **Studer** resultatene for å oppdage hva som sinker ting
La oss prøve dette. Åpne et nettsted (Microsoft.com fungerer bra for dette) og trykk på 'Spill inn'-knappen. Last deretter siden på nytt og se profilereren fange alt som skjer. Når du stopper opptaket, vil du se en detaljert oversikt over hvordan nettleseren 'skriver skript', 'renderer' og 'maler' siden. Det minner meg om hvordan oppdragskontrollen overvåker hvert system under en rakettoppskyting – du får sanntidsdata på eksakt hva som skjer og når.
✅ [Microsoft-dokumentasjonen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) har mange flere detaljer hvis du vil dykke dypere.
> Proftips: Tøm nettleserens hurtigbuffer før du tester for å se hvordan siden din oppfører seg for førstegangsbesøkende – det er vanligvis ganske annerledes enn ved gjentatte besøk!
Velg elementer på profiltidslinjen for å zoome inn på hendelser som skjer mens siden laster.
Få et øyeblikksbilde av sidens ytelse ved å velge deler av tidslinjen og se på oppsummeringspanelet:
Sjekk hendelsesloggen for å se om noen hendelser tok lengre tid enn 15 ms:
✅ Bli kjent med profilereren din! Åpne utviklerverktøyene på dette nettstedet og se om det finnes noen flaskehalser. Hva er den tregest lastende ressursen? Den raskeste?
```mermaid
flowchart TD
A[Åpne DevTools] --> B[Naviger til Ytelsesfane]
B --> C[Klikk på opptaksknapp]
C --> D[Utfør handlinger]
D --> E[Stopp opptak]
E --> F{Analyser resultater}
F --> G[Sjekk tidslinje]
F --> H[Se gjennom nettverk]
F --> I[Undersøk skript]
F --> J[Identifiser malehendelser]
G --> K{Lange oppgaver?}
H --> L{Store ressurser?}
I --> M{Rendreblokkering?}
J --> N{Kostbare malinger?}
K -->|Ja| O[Optimaliser JavaScript]
L -->|Ja| P[Komprimer ressurser]
M -->|Ja| Q[Legg til Async/Defer]
N -->|Ja| R[Forenkle stiler]
O --> S[Test igjen]
P --> S
Q --> S
R --> S
style A fill:#e1f5fe
style F fill:#fff3e0
style S fill:#e8f5e8
```
## Hva du bør se etter når du profilerer
Å kjøre profilereren er bare begynnelsen – den virkelige ferdigheten ligger i å vite hva de fargerike grafene faktisk forteller deg. Ikke bekymre deg, du vil lære deg å lese dem. Erfarne utviklere har lært å oppdage varselsignaler før de utvikler seg til fullverdige problemer.
La oss snakke om vanlige syndere – ytelsesproblemene som ofte sniker seg inn i nettprosjekter. Som Marie Curie måtte overvåke strålingsnivåer nøye i laboratoriet sitt, må vi følge med på visse mønstre som indikerer trøbbel på vei. Å fange disse tidlig sparer deg (og brukerne dine) mye frustrasjon.
**Ressursstørrelser**: Nettsteder har blitt "tyngre" over årene, og mye av denne ekstra vekten kommer fra bilder. Det er som om vi har pakket mer og mer i våre digitale kofferter.
✅ Sjekk ut [Internet Archive](https://httparchive.org/reports/page-weight) for å se hvordan sidestørrelser har vokst over tid – det er ganske avslørende.
**Slik holder du ressursene dine optimalisert:**
- **Komprimer** bildene! Moderne formater som WebP kan redusere filstørrelser dramatisk
- **Server** riktig bildestørrelse for hver enhet – ingen grunn til å sende enorme desktop-bilder til telefoner
- **Minifiser** CSS og JavaScript – hvert byte teller
- **Bruk** lazy loading slik at bilder bare lastes når brukeren faktisk blar til dem
**DOM-gjennomganger**: Nettleseren må bygge sin Document Object Model basert på koden du skriver, så for god sidens ytelse lønner det seg å holde taggene minimale og bare bruke og style det siden trenger. I denne sammenheng kan overflødig CSS knyttet til en side optimaliseres; stiler som kun skal brukes på én side, trenger for eksempel ikke å inkluderes i hovedstilarket.
**Nøkkelstrategier for DOM-optimalisering:**
- **Minimerer** antall HTML-elementer og nestingsnivåer
- **Fjerner** ubrukt CSS og samler stilark effektivt
- **Organiserer** CSS slik at bare nødvendig lastes for hver side
- **Strukturerer** HTML semantisk for bedre nettlesertolkning
**JavaScript**: Alle JavaScript-utviklere bør se opp for 'render-blocking'-skript som må lastes før resten av DOM kan gjennomgås og gjengis i nettleseren. Vurder å bruke `defer` med inline-skriptene dine (som i Terrarium-modulen).
**Moderne JavaScript-optimaliseringsteknikker:**
- **Bruker** `defer`-attributtet for å laste skripter etter DOM-parsing
- **Implementerer** kodedeling for å laste kun nødvendig JavaScript
- **Benytter** lazy loading for ikke-kritisk funksjonalitet
- **Minimerer** bruken av tunge biblioteker og rammeverk når det er mulig
✅ Prøv noen nettsteder på en [Test for nettstedshastighet](https://www.webpagetest.org/) for å lære mer om vanlige sjekker som gjøres for å fastslå nettstedsytelse.
### 🔄 **Pedagogisk Sjekk-inn**
**Ytelsesforståelse**: Før du bygger funksjoner i utvidelsen, sørg for at du kan:
- ✅ Forklare den kritiske rendering-stien fra HTML til piksler
- ✅ Identifisere vanlige ytelsesflaskehalser i nettapplikasjoner
- ✅ Bruke nettleserens utviklerverktøy for å profilere sidens ytelse
- ✅ Forstå hvordan ressursstørrelse og DOM-kompleksitet påvirker hastighet
**Rask Selvtest**: Hva skjer når du har render-blocking JavaScript?
*Svar: Nettleseren må laste ned og kjøre skriptet før den kan fortsette å analysere HTML og gjengi siden*
**Reell verdens ytelseseffekt**:
- **100 ms forsinkelse**: Brukere merker tregheten
- **1 sekunds forsinkelse**: Brukere begynner å miste fokus
- **3+ sekunder**: 40 % av brukerne forlater siden
- **Mobilt nettverk**: Ytelse er enda viktigere
Nå som du har en idé om hvordan nettleseren renderer ressursene du sender til den, la oss se på de siste tingene du må gjøre for å fullføre utvidelsen din:
### Lag en funksjon for å beregne farge
Nå skal vi lage en funksjon som gjør numeriske data om til meningsfulle farger. Tenk på det som et trafikksignalsystem – grønt for ren energi, rødt for høy karbonintensitet.
Denne funksjonen tar CO2-data fra APIen vår og bestemmer hvilken farge som best representerer miljøpåvirkningen. Det er likt hvordan vitenskapsfolk bruker fargekoding i varmekart for å visualisere komplekse datapattern – fra havtemperaturer til stjernedannelse. La oss legge dette til i `/src/index.js`, rett etter de `const`-variablene vi definerte tidligere:
```mermaid
flowchart LR
A[CO2 Verdi] --> B[Finn Nærmeste Skala Punkt]
B --> C[Hent Skala Indeks]
C --> D[Kartlegg til Farge]
D --> E[Send til Bakgrunn]
subgraph "Fargeskala"
F["0-150: Grønn (Ren)"]
G["150-600: Gul (Moderat)"]
H["600-750: Oransje (Høy)"]
I["750+: Brun (Veldig Høy)"]
end
subgraph "Meldingsformidling"
J[Innholdsskript]
K[chrome.runtime.sendMessage]
L[Bakgrunnsskript]
M[Oppdater Ikon]
end
style A fill:#e1f5fe
style D fill:#e8f5e8
style E fill:#fff3e0
```
```javascript
function calculateColor(value) {
// Definer CO2-intensitetsskala (gram per kWh)
const co2Scale = [0, 150, 600, 750, 800];
// Tilsvarende farger fra grønn (ren) til mørk brun (høyt karbon)
const colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02'];
// Finn nærmeste skala-verdi til vår input
const closestNum = co2Scale.sort((a, b) => {
return Math.abs(a - value) - Math.abs(b - value);
})[0];
console.log(`${value} is closest to ${closestNum}`);
// Finn indeksen for fargekartlegging
const num = (element) => element > closestNum;
const scaleIndex = co2Scale.findIndex(num);
const closestColor = colors[scaleIndex];
console.log(scaleIndex, closestColor);
// Send fargeoppdateringsmelding til bakgrunnsskript
chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } });
}
```
**La oss bryte ned denne smarte lille funksjonen:**
- **Setter opp** to arrayer - en for CO2-nivåer, en annen for farger (grønn = ren, brun = skitten!)
- **Finner** nærmeste match til vår faktiske CO2-verdi ved hjelp av smart array-sortering
- **Henter** den matchende fargen ved å bruke findIndex()-metoden
- **Sender** en melding til Chromes bakgrunnsskript med den valgte fargen
- **Bruker** template literals (de backtick-tegnene) for ryddigere strengformatering
- **Holder** alt organisert med const-deklarasjoner
`chrome.runtime` [API](https://developer.chrome.com/extensions/runtime) er som nervessystemet til utvidelsen din – det håndterer all kommunikasjon og oppgaver bak kulissene:
> "Bruk chrome.runtime API for å hente bakgrunnssiden, returnere detaljer om manifest, og lytte til og svare på hendelser i appens eller utvidelsens livssyklus. Du kan også bruke dette API til å konvertere relative URL-stier til fullstendige URLer."
**Hvorfor Chrome Runtime API er så nyttig:**
- **Lar** forskjellige deler av utvidelsen snakke med hverandre
- **Håndterer** bakgrunnsarbeid uten å fryse brukergrensesnittet
- **Administrerer** livssyklus-hendelser i utvidelsen
- **Gjør** meldingsoverføring mellom skript superenkelt
✅ Hvis du utvikler denne nettleserutvidelsen for Edge, kan det overraske deg at du bruker en chrome API. De nyere Edge-nettleserversjonene kjører på Chromium-nettlesermotoren, så du kan benytte disse verktøyene.
```mermaid
architecture-beta
group browser(logos:chrome)[Nettleser]
service popup(logos:html5)[Popup UI] in browser
service content(logos:javascript)[Innholdsskript] in browser
service background(database)[Bakgrunnsskript] in browser
service api(logos:api)[Ekstern API] in browser
popup:R -- L:content
content:R -- L:background
background:T -- B:api
content:T -- B:api
junction junctionCenter in browser
popup:R -- L:junctionCenter
junctionCenter:R -- L:background
```
> **Proftips**: Hvis du vil profilere en nettleserutvidelse, start utviklerverktøyene fra selve utvidelsen, siden det er en egen egen nettleserinstans. Dette gir deg tilgang til ytelsesmetrikker spesifikke for utvidelsen.
### Sett en standard ikonfarge
Før vi begynner å hente ekte data, la oss gi utvidelsen et utgangspunkt. Ingen liker å se på et tomt eller ødelagt ikon. Vi starter med en grønn farge slik at brukerne vet utvidelsen virker fra det øyeblikket de installerer den.
I `init()`-funksjonen din setter vi opp det grønne standardikonet:
```javascript
chrome.runtime.sendMessage({
action: 'updateIcon',
value: {
color: 'green',
},
});
```
**Dette oppsettet oppnår:**
- **Setter** en nøytral grønn farge som standardtilstand
- **Gir** umiddelbar visuell tilbakemelding når utvidelsen lastes
- **Etablerer** kommunikasjonsmønsteret med bakgrunnsskriptet
- **Sikrer** at brukerne ser en fungerende utvidelse før data hentes
### Kall funksjonen, utfør kall
Nå skal vi koble alt sammen slik at når ferske CO2-data kommer inn, oppdateres ikonet automatisk med riktig farge. Det er som å koble den siste kretsen i en elektronisk enhet – plutselig fungerer alle delene som ett system.
Legg til denne linjen rett etter du har hentet CO2-dataene fra APIen:
```javascript
// Etter å ha hentet CO2-data fra API-en
// la CO2 = data.data[0].intensity.actual;
calculateColor(CO2);
```
**Denne integrasjonen oppnår:**
- **Kobler** API-datatilførselen med det visuelle indikatorystemet
- **Trigger** ikonoppdateringer automatisk når nye data kommer
- **Sikrer** sanntids visuell tilbakemelding basert på nåværende karbonintensitet
- **Opprettholder** separasjonen mellom datainnhenting og visningslogikk
Og til slutt, i `/dist/background.js`, legg til lytteren for disse bakgrunnsaksjonskallene:
```javascript
// Lytt etter meldinger fra innholdsskriptet
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
if (msg.action === 'updateIcon') {
chrome.action.setIcon({ imageData: drawIcon(msg.value) });
}
});
// Tegn dynamisk ikon ved bruk av Canvas API
// Lånt fra energy lollipop-utvidelsen - fint trekk!
function drawIcon(value) {
// Lag et offscreen-canvas for bedre ytelse
const canvas = new OffscreenCanvas(200, 200);
const context = canvas.getContext('2d');
// Tegn en farget sirkel som representerer karbonintensitet
context.beginPath();
context.fillStyle = value.color;
context.arc(100, 100, 50, 0, 2 * Math.PI);
context.fill();
// Returner billeddataene for nettleserikonet
return context.getImageData(50, 50, 100, 100);
}
```
**Dette bakgrunnsskriptet gjør følgende:**
- **Lytter** etter meldinger fra hovedskriptet ditt (som en resepsjonist som tar imot anrop)
- **Behandler** disse 'updateIcon'-forespørslene for å endre ikon i verktøylinjen
- **Lager** nye ikoner på sparket ved hjelp av Canvas API
- **Tegner** en enkel farget sirkel som viser gjeldende karbonintensitet
- **Oppdaterer** nettleserens verktøylinje med det nye ikonet
- **Bruker** OffscreenCanvas for jevn ytelse (unngår UI-blokkering)
✅ Du vil lære mer om Canvas API i [Space Game-leksjonene](../../6-space-game/2-drawing-to-canvas/README.md).
```mermaid
sequenceDiagram
participant CS as Innholdsskript
participant BG as Bakgrunnsskript
participant Canvas as OffscreenCanvas
participant Browser as Nettleserikon
CS->>BG: sendMessage({action: 'updateIcon', color})
BG->>Canvas: new OffscreenCanvas(200, 200)
Canvas->>Canvas: getContext('2d')
Canvas->>Canvas: beginPath() + fillStyle + arc()
Canvas->>Canvas: fill() + getImageData()
Canvas->>BG: Returner bilde-data
BG->>Browser: chrome.action.setIcon(imageData)
Browser->>Browser: Oppdater verktøylinjeikon
```
### 🔄 **Pedagogisk Sjekk-inn**
**Full Forståelse av Utvidelsen**: Verifiser at du mestrer hele systemet:
- ✅ Hvordan fungerer meldingsoverføring mellom forskjellige utvidelsesskript?
- ✅ Hvorfor bruker vi OffscreenCanvas i stedet for vanlig Canvas for ytelse?
- ✅ Hvilken rolle spiller Chrome Runtime API i utvidelsesarkitekturen?
- ✅ Hvordan kartlegger fargeberegningsalgoritmen data til visuell tilbakemelding?
**Ytelsesbetraktninger**: Utvidelsen din demonstrerer nå:
- **Effektiv meldingshåndtering**: Ryddig kommunikasjon mellom skriptkontekster
- **Optimalisert gjengivelse**: OffscreenCanvas forhindrer blokkering av brukergrensesnittet
- **Sanntidsoppdateringer**: Dynamiske ikonendringer basert på live data
- **Minnehåndtering**: Korrekt opprydding og ressursbehandling
**Tid for å teste utvidelsen din:**
- **Bygg** alt med `npm run build`
- **Last inn utvidelsen på nytt i nettleseren** (ikke glem dette trinnet)
- **Åpne** utvidelsen din og se at ikonet endrer farger
- **Sjekk** hvordan den reagerer på ekte karbondata fra hele verden
Nå vil du på et øyeblikk vite om det er et godt tidspunkt å kjøre den vaskemaskinen eller om du bør vente på renere energi. Du har nettopp bygget noe virkelig nyttig og lært om nettleserens ytelse underveis.
## GitHub Copilot Agent Challenge 🚀
Bruk Agent-modus til å fullføre følgende utfordring:
**Beskrivelse:** Forbedre nettleserutvidelsens ytelsesovervåkingsmuligheter ved å legge til en funksjon som sporer og viser lastetider for forskjellige komponenter i utvidelsen.
**Oppgave:** Lag et ytelsesovervåkingssystem for nettleserutvidelsen som måler og logger tiden det tar å hente CO2-data fra API-et, beregne farger og oppdatere ikonet. Legg til en funksjon kalt `performanceTracker` som bruker Performance API for å måle disse operasjonene og viser resultatene i nettleserkonsollen med tidsstempler og varighetsmålinger.
Lær mer om [agent-mode](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) her.
## 🚀 Utfordring
Her er en spennende detektivoppgave: Velg noen få åpne kilder-nettsteder som har eksistert i mange år (tenk Wikipedia, GitHub eller Stack Overflow) og gransk deres commit-historikk. Kan du se hvor de gjorde ytelsesforbedringer? Hvilke problemer dukket stadig opp?
**Din undersøkelsesmetode:**
- **Søk** commit-meldinger etter ord som "optimize", "performance" eller "faster"
- **Se** etter mønstre - reparerer de de samme problemtypene?
- **Identifiser** de vanlige syndebukkene som bremser ned nettsteder
- **Del** hva du oppdager - andre utviklere lærer av ekte eksempler
## Post-forelesningsquiz
[Post-forelesningsquiz](https://ff-quizzes.netlify.app/web/quiz/28)
## Oppsummering & Selvstudium
Vurder å melde deg på et [ytelsesnyhetsbrev](https://perf.email/)
Undersøk noen av måtene nettlesere måler webytelse på ved å se gjennom ytelsesfanene i deres nettverktøy. Finnes det store forskjeller?
### ⚡ **Hva du kan gjøre de neste 5 minuttene**
- [ ] Åpne nettleserens Oppgavebehandling (Shift+Esc i Chrome) for å se ressursbruk for utvidelser
- [ ] Bruk DevTools Ytelses-fanen for å ta opp og analysere nettsideytelse
- [ ] Sjekk nettleserens Utvidelsesside for å se hvilke utvidelser som påvirker oppstartstid
- [ ] Prøv å deaktivere utvidelser midlertidig for å se ytelsesforskjeller
### 🎯 **Hva du kan oppnå denne timen**
- [ ] Fullfør post-lesson-quiz og forstå ytelseskonsepter
- [ ] Implementer et bakgrunnsskript for nettleserutvidelsen din
- [ ] Lær å bruke browser.alarms for effektive bakgrunnsoppgaver
- [ ] Øv på meldingsutveksling mellom innholdsskript og bakgrunnsskript
- [ ] Mål og optimaliser utvidelsens ressursbruk
### 📅 **Din ukelange ytelsesreise**
- [ ] Utvikle en høyytelses nettleserutvidelse med bakgrunnsfunksjonalitet
- [ ] Mestre service workers og moderne utvidelsesarkitektur
- [ ] Implementer effektive datasynkronisering- og bufferstrategier
- [ ] Lær avanserte feilsøkingsteknikker for ytelse i utvidelser
- [ ] Optimaliser utvidelsen for både funksjonalitet og ressurseffektivitet
- [ ] Lag omfattende tester for ytelsesscenarier i utvidelsen
### 🌟 **Din månedslange optimaliseringsmestring**
- [ ] Bygg bedriftsnivå nettleserutvidelser med optimal ytelse
- [ ] Lær om Web Workers, Service Workers og moderne webytelse
- [ ] Bidra til åpen kilde-prosjekter fokusert på ytelsesoptimalisering
- [ ] Mestre nettleserens interne mekanismer og avansert feilsøking
- [ ] Lag verktøy for ytelsesovervåkning og beste praksis-guider
- [ ] Bli en ytelseseekspert som hjelper med å optimalisere webapplikasjoner
## 🎯 Din tidslinje for studier av nettleserutvidelser
```mermaid
timeline
title Fullstendig Utvidelsesutviklingsprogresjon
section Grunnleggende ytelse (20 minutter)
Nettleserprofilering: DevTools mestring
: Tidslinjeanalyse
: Flaskehalsidentifisering
: Kritisk gjengivelsesbane
section Bakgrunnsoppgaver (25 minutter)
Utvidelsesarkitektur: Meldingsoverføring
: Bakgrunnsskript
: Runtime API-bruk
: Kommunikasjon på tvers av kontekster
section Visuell tilbakemelding (30 minutter)
Dynamisk UI: Fargekalkulasjonsalgoritmer
: Canvas API-integrasjon
: Ikongenerering
: Oppdateringer i sanntid
section Ytelsesoptimalisering (35 minutter)
Effektiv kode: Asynkrone operasjoner
: Minnehåndtering
: Ressursopprydding
: Ytelsesovervåkning
section Produksjonsklar (45 minutter)
Polering og Testing: Tverrleserkompatibilitet
: Feilhåndtering
: Brukeropplevelse
: Ytelsesvalidering
section Avanserte funksjoner (1 uke)
Utvidelsesøkosystem: Chrome Nettbutikk
: Brukertilbakemelding
: Analyseintegrasjon
: Oppdateringshåndtering
section Profesjonell utvikling (2 uker)
Bedriftsutvidelser: Team-samarbeid
: Kodegjennomganger
: CI/CD-pipelines
: Sikkerhetsrevisjoner
section Ekspertmestring (1 måned)
Plattformekspertise: Avanserte Chrome-APIer
: Ytelsesoptimalisering
: Arkitekturmønstre
: Bidrag til åpen kildekode
```
### 🛠️ Ditt komplette verktøykasse for utvidelsesutvikling
Etter å ha fullført denne trilogien har du mestret:
- **Nettleserarkitektur**: Dyp forståelse av hvordan utvidelser integreres med nettlesersystemer
- **Ytelsesprofilering**: Evne til å identifisere og fikse flaskehalser med utviklerverktøy
- **Asynkron programmering**: Moderne JavaScript-mønstre for responsiv, ikke-blokkerende drift
- **API-integrasjon**: Henting av eksterne data med autentisering og feilbehandling
- **Visuell design**: Dynamiske UI-oppdateringer og grafikkgenerering basert på Canvas
- **Meldingsoverføring**: Kommunikasjon mellom skript i utvidelsesarkitekturer
- **Brukeropplevelse**: Lastetilstander, feilhåndtering og intuitive interaksjoner
- **Produksjonsferdigheter**: Testing, feilsøking og optimalisering for ekte distribusjon
**Reelle brukstilfeller:** Ferdighetene dine innen utvidelsesutvikling gjelder direkte for:
- **Progressive Web Apps**: Liknende arkitektur og ytelsesmønstre
- **Electron desktop-apper**: Tverrplattform-applikasjoner med webteknologier
- **Mobile hybrid-apper**: Cordova/PhoneGap-utvikling som bruker web-API-er
- **Bedriftswebapplikasjoner**: Komplekse dashbord og produktivitetsverktøy
- **Chrome DevTools-utvidelser**: Avanserte utviklerverktøy og feilsøking
- **Web API-integrasjon**: Enhver app som kommuniserer med eksterne tjenester
**Profesjonell effekt:** Du kan nå:
- **Bygge** produksjonsklare nettleserutvidelser fra idé til lansering
- **Optimalisere** webapplikasjoners ytelse med bransjestandard profileringsverktøy
- **Arkitektere** skalerbare systemer med riktig bekymringsseparasjon
- **Feilsøke** komplekse asynkrone operasjoner og kommunikasjon på tvers av kontekster
- **Bidra** til åpen kilde-utvidelsesprosjekter og nettleserstandarder
**Muligheter på neste nivå:**
- **Chrome Web Store-utvikler**: Publiser utvidelser til millioner av brukere
- **Web Performance Engineer**: Spesialiser deg på optimalisering og brukeropplevelse
- **Nettleserplattformutvikler**: Bidra til utvikling av nettlesermotorer
- **Utviklerverktøy-skaper**: Lag verktøy som hjelper andre utviklere
- **Utviklerrelasjoner**: Del kunnskap via undervisning og innholdsproduksjon
🌟 **Utmerkelse oppnådd**: Du har bygd en komplett, funksjonell nettleserutvidelse som demonstrerer profesjonell utviklingspraksis og moderne webstandarder!
## Oppgave
[Analyser et nettsted for ytelse](assignment.md)
---
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**Ansvarsfraskrivelse**:
Dette dokumentet er oversatt ved hjelp av AI-oversettelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selv om vi streber etter nøyaktighet, vennligst merk at automatiske oversettelser kan inneholde feil eller unøyaktigheter. Det originale dokumentet på det opprinnelige språket skal anses som den autoritative kilden. For kritisk informasjon anbefales profesjonell menneskelig oversettelse. Vi påtar oss ikke ansvar for eventuelle misforståelser eller feiltolkninger som oppstår ved bruk av denne oversettelsen.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->