Utsatt lasting med JavaScript - dummies

En stor årsak til sakte websider er det såkalte blokkeringsskriptet. Et blokkeringskript er en JavaScript-fil hvis lasting og utførelse blokkerer innlasting av en nettside. I ekstreme tilfeller kan en nettleser laste ned en hel nettside og vise en tom skjerm i flere sekunder eller lengre mens JavaScript er lastet og analysert. Fordi web-brukere pleier å bli kjedelig raskt, bør denne situasjonen absolutt unngås.

Heldigvis finnes det flere måter å utsette JavaScript-lasting og -utførelse, og for å gjøre websidene dine raskere.

Den første måten er å bruke deferattributtet til skriptelementet. Slik ser det ut:

Merk at utsatt attributt kun kan brukes med eksterne JavaScript-filer. Det kan ikke brukes til blokker i et dokument.

Når nåværende, vil utsatt attributt føre til at skriptet blir utført når siden har fullført parsing.

En annen måte å utsette lasting og utførelse av et skript på, er metoden som anbefales av Google. Google anbefaler at du legger til følgende kode nederst på websiden din. For å bruke det, ville du selv erstatte prøveskriptnavnet (her, myscript. Js) med ditt eget filnavn.

funksjon nedlastingJSAtOnload () {var element = document. createElement ("script"); element. src = "myscript. js"; dokument. kropp. appendChild (element);} hvis (vindu. addEventListener) -vinduet. addEventListener ("load", downloadJSAtOnload, false); ellers hvis (vindu. attachEvent) -vinduet. attachEvent ("onload", downloadJSAtOnload); annet vindu. onload = downloadJSAtOnload;

En annen egenskap for å bidra til å utsette JavaScript er asyncattributtet. Async-attributtet er nytt i HTML5. Slik ser det ut:

Som utsatt attributt kan asyncattributtet bare brukes med eksterne skript (hvor src-attributtet brukes). Når det er til stede, vil asyncattributtet føre til at skriptet utføres asynkront med resten av siden. Med andre ord, vil skriptet utføres samtidig med resten av siden.

Uansett hvilken metode du velger å bruke, kan påvirke om resten av JavaScript på siden din kjører riktig. Pass på å teste alt etter å ha implementert utsatt lasting. Ferdig utført, kan utsette JavaScript dramatisk redusere brukernes ventetid og gjøre alle lykkeligere.