Hvorfor er internettet så langsomt? (Og hvordan kan vi rette det).

JavaScript er overalt på nettet. Det er involveret i næsten alle aspekter af det, vi laver online. Når vi bruger Facebook, YouTube eller Google, er vi afhængige af JavaScript-kode for at give os den interaktivitet, vi forventer af internettet i dag. JavaScript giver os alt fra grundlæggende web såsom indlæsningstællere, browseradvarsler og sideovergange til avancerede funktioner som webspil, 3D-gengivelse og interaktive kort.

Desværre truer en sjældent diskuteret, men meget vigtig ulempe ved al denne interaktion vores browseroplevelse og fremtiden for selve nettet: JavaScript-bloat. Dette udtryk refererer til et websted, der bruger for meget JavaScript til at køre med sin maksimale hastighed og gennemløb. Det er vigtigt for en professionel webudvikler eller internetvirksomhedsejer at holde dit websted kørende med maksimal effektivitet, så det er ekstremt vigtigt at forstå og håndtere JS bloat.

Andre værker af Alex Zito-WolfHovedløs vs. integreret arkitektur: Hvad er forskellen?

Hvorfor er dette et problem?

I løbet af de seneste 10 år er brugen af ​​JavaScript på hjemmesider steget markant over hele linjen. Siden 2017 JavaScript-filvægt steget med 78 procent i samlede kilobytes for desktop-websteder, og JS-anmodninger voksede med 17 procent. En del af denne stigning kan forklares med, at den gennemsnitlige hjemmeside er blevet mere kompleks i løbet af de seneste fem år. Men meget af dette skyldes dårlig praksis, ødelagte integrationer eller unødvendig kode. Uanset årsagen, gør alt dette oppustethed internettet langsommere for alle.

Hvis du ikke ved, hvordan din internetbrowser indlæser JavaScript, denne indledende artikel forklarer det grundlæggende godt. Hver gang du bruger din browser (som Chrome eller Firefox) til at besøge en webside, skal du normalt downloade nogle instruktioner HTML, JavaScript såvel som csssom fortæller din browser, hvordan man sammensætter en hjemmeside og forbereder den til brug.

Så hvordan ser oppustethed ud?

En oppustet hjemmeside er en, der har for meget JavaScript på sig i forhold til dens indhold. For eksempel vil en funktionsrig, kompleks hjemmeside naturligvis have mere JavaScript, og det er okay. Problemet opstår, når et simpelt websted har en stor mængde JavaScript, som brugeren skal downloade. Denne lommeregner leverer en almindelig, udbredt algoritme til at detektere JavaScript-bloat. Ved at bruge et skærmbillede af det pågældende websted som en proxy for dets samlede kompleksitet, sammenligner lommeregneren denne kompleksitet med størrelsen af ​​det indlæste JavaScript, samt antallet af JS-anmodninger.

JavaScript-bloat kan forekomme af mange årsager, men websteder bliver typisk oppustede på grund af en af ​​de følgende fire. Heldigvis kan du implementere løsninger til at løse disse problemer.

Dårlig kompression

Formindskelse og komprimering af JS- og CSS-filer er afgørende for et fungerende websted. Du kan skrive et script på 200 KB, der kan reduceres til 100 KB og derefter komprimeres til 15 KB, hvilket kun er 7,5 % af scriptets oprindelige størrelse. Hvis du ikke konfigurerer din server til at anvende de korrekte komprimeringsregler på hver JS- og CSS-fil, sætter du dig selv op til fejl.

For at løse dette problem skal du bruge korrekt komprimering og minimering. Denne artikel af Chris Coyier forklarer forskellene mellem de to og giver dig et par måder at sikre dig, at du anvender begge disse processer korrekt. Kort sagt bør du være i stand til at konfigurere din server til at bruge den komprimeringsalgoritme du ønsker, normalt ved hjælp af Brotli- eller Gzip-komprimering.

Komplekse rammer

Biblioteker som Angular og React tilbyder enorme fordele for nutidens virksomheder og udviklere. Men når du vælger at bruge et framework, påtager du dig nogle betydelige omkostninger, når det kommer til det generelle JS, det vil bruge, og endnu mere for fuld-funktionelle eller enterprise-grade frameworks. Hvis du beslutter dig for at bruge en kompleks struktur, når du har en forenklet use case, er du garanteret at køre et oppustet websted.

Løsningen er selvfølgelig kun at bruge rammer, når det er nødvendigt. Rammer giver mange fordele — du kan kode med de nyeste skabeloner, sofistikerede stylingværktøjer og et netværk af plugins for hurtigt at opnå banebrydende resultater. Men du bør stadig sigte efter at skrive grundlæggende JavaScript til de fleste projekter og kun anvende rammer til mere komplekse sider eller applikationer.

jQuery som standard

jQuery er et DOM-manipulationsbibliotek, der afhænger af næsten 90 procent af verden‘websteder. Hvis du kan slippe af med denne afhængighed, kan du slippe af med 80 KB minificeret JS.

Løsningen på dette problem er at vænne dig selv fra din afhængighed af jQuery. jQuery er en stor tidsbesparelse, men den er overudnyttet. At bruge det til simple opgaver i moderne browsere er ofte unødvendigt, fordi sådanne opgaver har robuste native implementeringer, der selv udfører jQuery-lignende funktioner. Så prøv igen at holde dig til native JavaScript, når det er muligt.

Oppustede tredjepartsscripts

Når du tilføjer et tredjepartsscript til dit websted, er du ansvarlig for at holde styr på størrelsen af ​​det pågældende script og sikre, at koden er så kompakt som muligt. Tredjeparts scripts kommer normalt i to former: dynamisk indlæst, såsom Google Analytics, eller kompileret med din applikationskode, som f.eks. NPM moduler. Begge disse pakker kan tilføje unødvendig bagage til dit websted. En yderligere ulempe ved dynamisk indlæste scripts er nogle gange at gøre dit websted langsommere pga gøre blokeringi det væsentlige tvinger dit websted til at vente på et svar fra Googles servere, før dit eget websted kan indlæses.

For at reducere denne type bloat skal du begrænse din brug af overvågningsscripts og holde et vågent øje med dine NPM-pakker. Tredjeparts sporingskode er ansvarlig for meget af vægtforøgelsen af ​​JS på nettet. Webbrugere holdes stadig ofte som gidsler af websteder, der insisterer på at downloade enorme mængder af cookie-sporende annoncekode, før siden overhovedet kan bruges. Hold øje med scripts, der tvinger dit websted til at lave en masse annoncesporingsanmodninger, fordi de kan lægge din webstedshastighed i Googles hænder.

Når det kommer til NPM-pakker, skal du holde styr på dine afhængigheder og deres vægt. Før du tilføjer en ny afhængighed til din applikation, skal du bruge et websted som f.eks Dette for at tjekke størrelsen. Du behøver ikke tvangsspore dine afhængigheder på denne måde, men som en generel regel, hvis du tilføjer over 100 kb minificeret JS til dit websted, bør du se lidt dybere ind i, hvorfor dette script har brug for så mange linjer.

Mere inden for softwareudviklingDu kan bruge kunstig intelligens til at rette din ødelagte kode

Lade‘s De-Bloat på internettet!

JavaScript-bloat er et udbredt problem. Som teknikere og webudviklere falder opgaven med ledelse og kontrol hos os. Ved at følge de enkle trin ovenfor, bør du have en plan på plads for korrekt at vælge de scripts, du har brug for til dit websted, og korrekt optimere de scripts, du beslutter dig for at bruge.