Optimalisering av webytelse og Lighthouse · leksjon

Effektive strategier for lasting av skript

Bli dyktig i teknikker for asynkron lasting av JavaScript, utsettelse av ikke-kritiske skript og effektiv bruk av modulmønstre.

Leksjon 2 av 411 trinn

Effektive strategier for lasting av skript er en gratis leksjon i Optimalisering av webytelse og Lighthouse på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Optimalisering av webytelse og Lighthouse, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.

Raske skript, raske sider

JavaScript driver interaktive nettopplevelser. Men hvis det ikke lastes inn effektivt, kan det gjøre nettstedet betydelig tregere.

Et skript som laster inn sakte, kan blokkere gjengivelsen av siden slik at brukerne må vente lenger før de kan se og samhandle med innholdet.

I denne leksjonen skal vi utforske strategier for å laste inn skript på en smart måte, slik at brukerne får en jevn og rask opplevelse.

Skript blokkerer gjengivelsen

Som standard stanser nettleseren tolkingen av HTML-dokumentet når den møter en <script>-tagg i HTML-en.

Den henter, tolker og kjører skriptet umiddelbart. HTML-tolkingen kan først fortsette når skriptet er ferdig.

Dette kan være en betydelig flaskehals, særlig for store skript. Prøv å kjøre dette enkle skriptet for å se hvordan det kan simulere en blokkerende operasjon:

console.log("HTML parsing paused (simulated).");
// Simulate a computationally heavy task
let sum = 0;
for (let i = 0; i < 100000000; i++) {
  sum += i;
}
console.log("Blocking script finished. Sum:", sum);
console.log("HTML parsing resumes (simulated).");

`async`: Last inn parallelt

async-attributtet ber nettleseren laste ned skriptet parallelt med tolkingen av HTML-dokumentet.

Blokkerer ikke: HTML-tolkingen fortsetter mens skriptet lastes ned.
Kjøres umiddelbart: Skriptet kjøres så snart det er lastet ned, uten å vente på at HTML-tolkingen skal bli ferdig.
Rekkefølgen er ikke garantert: Skript med async kan kjøres i hvilken som helst rekkefølge, også i en annen rekkefølge enn den de står i i HTML-en.

Bruk async for uavhengige skript, for eksempel analyseverktøy eller annonser, som ikke er avhengige av andre skript eller hele DOM-en.

`async` i praksis

Se for deg at dette skriptet lastes inn med <script async src="my-async-script.js"></script>.

Det lastes ned i bakgrunnen og kjøres med én gang det er klart. Annet innhold på siden kan fortsette å lastes inn.

Legg merke til at «Page content continues...» kan vises før «Async script finished» i en ekte nettlesersituasjon, siden skriptet ikke blokkerer.

console.log("Async script started downloading.");
// Simulate fetching data or setting up a listener
setTimeout(() => {
  console.log("Async script finished execution.");
}, 50); // Small delay to simulate download + execution
console.log("Page content continues to load in parallel.");

`defer`: Kjør etter HTML

defer-attributtet gjør også skript ikke-blokkerende, men med en viktig forskjell når det gjelder tidspunktet for kjøring.

Blokkerer ikke: I likhet med async lastes skriptet ned parallelt med HTML-tolkingen.
Kjøres etter HTML: Skriptet kjøres først etter at hele HTML-dokumentet er tolket.
Rekkefølgen er garantert: Skript med defer kjøres i nøyaktig den rekkefølgen de står i i HTML-en.

defer passer godt for skript som er avhengige av hele DOM-en, for eksempel interaktive elementer eller skjemavalidering, men som ikke trenger å blokkere den første gjengivelsen.

`defer` i praksis

Dette skriptet, som lastes inn med <script defer src="my-defer-script.js"></script>, ville ventet med å kjøre til all HTML var behandlet.

Det passer perfekt for skript som må samhandle med elementer på siden uten å hindre brukeren i å se innholdet først.

console.log("Defer script started downloading.");
// Simulate DOM manipulation or event setup
setTimeout(() => {
  // In a real browser, document.getElementById would now work.
  console.log("Defer script finished execution after HTML parsed.");
}, 50); // Small delay
console.log("HTML parsing completed (simulated) before defer script runs.");

Velg strategi

Det er avgjørende å forstå forskjellene mellom async og defer for å oppnå optimal ytelse:

async: For uavhengige skript som ikke er avhengige av at DOM-en er klar, eller av rekkefølgen på andre skript (f.eks. analyseverktøy og tredjepartswidgeter).
defer: For skript som er avhengige av at DOM-en er ferdig tolket, eller av kjørerekkefølgen til andre utsatte skript (f.eks. brukergrensesnittinteraksjon og egendefinert validering).
Ingen attributt: Blokkerer gjengivelsen. Bruk dette bare for kritiske skript som må kjøres før alt annet.

ES-moduler: Moderne skripting

ES-moduler (ECMAScript-moduler) tilbyr et standardisert system for å organisere JavaScript-kode i separate filer som kan importere og eksportere funksjonalitet.

Når du bruker <script type="module">, behandler nettleseren skriptet på en annen måte:

Utsatt som standard: Moduler utsettes automatisk, noe som betyr at de ikke blokkerer HTML-tolkingen.
Strict Mode: Moduler kjører som standard i strict mode.
Avgrenset omfang: Variabler og funksjoner som deklareres på toppnivå i en modul, er begrenset til denne modulen og er ikke globale.

Slik lastes moduler inn

ES-moduler bruker import til å hente inn funksjonalitet fra andre filer og export til å gjøre funksjonalitet tilgjengelig.

Nettleseren håndterer lasting av moduler effektivt, henter avhengigheter parallelt og kjører dem i riktig rekkefølge etter at HTML-en er tolket.

Her ser du grunnleggende modულsyntaks:

// Example: myUtils.js
export const PI = 3.14159;
export function multiply(a, b) {
  return a * b;
}

// Example: main.js (loaded with <script type="module">)
import { PI, multiply } from './myUtils.js';

console.log("Module imported successfully.");
console.log("PI value:", PI);
console.log("5 * 10 =", multiply(5, 10));

Valg for lasting av skript

Du bygger et nettsted og må laste inn flere JavaScript-filer. Hvilke av følgende påstander om effektiv lasting av skript er SANNE?

Besvar den i den interaktive leksjonen

Oppsummering: Du har lært lasting

Godt jobbet! Du har lært hvordan JavaScript kan lastes inn effektivt:

Standardskript blokkerer tolkingen og gjør siden tregere.
async-attributtet gjør at skript kan lastes ned parallelt og kjøres umiddelbart, noe som passer godt for uavhengige skript.
defer-attributtet laster også ned parallelt, men venter med kjøringen til HTML-en er ferdig tolket, samtidig som rekkefølgen opprettholdes.
ES-moduler (<script type="module">) tilbyr en moderne og strukturert måte å organisere kode på, og oppfører seg som utsatte skript som standard.

Ved å bruke disse strategiene kan du forbedre både den opplevde og den faktiske innlastingsytelsen til nettstedet betydelig!

Gratis å komme i gang

Lær deg Optimalisering av webytelse og Lighthouse med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Effektive strategier for lasting av skript» gratis?

Ja – hele teksten i «Effektive strategier for lasting av skript» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Optimalisering av webytelse og Lighthouse-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Optimalisering av webytelse og Lighthouse inneholder totalt 4 leksjoner.

Hva lærer jeg i «Effektive strategier for lasting av skript»?

Bli dyktig i teknikker for asynkron lasting av JavaScript, utsettelse av ikke-kritiske skript og effektiv bruk av modulmønstre. Du øver på Optimalisering av webytelse og Lighthouse med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Optimalisering av webytelse og Lighthouse?

Ingen tidligere erfaring er nødvendig. Optimalisering av webytelse og Lighthouse på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Effektive strategier for lasting av skript»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Optimalisering av webytelse og Lighthouse-leksjonen?

Ja. Alle Optimalisering av webytelse og Lighthouse-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Minimere JavaScript-nyttelasten
Effektive strategier for lasting av skript
Web Workers og avlasting fra hovedtråden
Kodedeling og lazy loading

← Tilbake til Optimalisering av webytelse og Lighthouse