21 trin til Super Speedy JavaScript

Sep 12, 2025
hvordan
Speed up JavaScript
(Billedkredit: Pexels.com)

Ved første øjekast lyder parallelbehandling som en invitation til gratis frokost - at kunne bruge multi-core CPU'er mere effektivt bør give din kode et enorm hastighedsforøgelse. Praktisk erfaring viser, at dette ikke altid er tilfældet: Nogle problemer er umulige at parallisere. Derudover fører parallel udførelse til en hel familie af nye problemer, der ikke ses på single-core maskiner.

Parallelkode kan i princippet opdeles i to grupper af arbejde. Den første gruppe er klassisk hastighedsforøgelse - hvis dit program skal sejle gennem 3000 billeder, opdeling af jobbet betyder, at flere billeder kan behandles til enhver tid. Mens absolut gavnligt, er denne form for opgave sjældent opstået i hverdagens webudvikling. (Hvis du opretter et billede-tungt websted, skal du sørge for at få dem tilbage med anstændigt Sky lagring ).

Den mere almindelige form for paralleliseringsjobarbejder rundt om langvarige opgaver, der ikke kræver meget CPU-tid. Et godt eksempel på dette ville vente på en download eller en slags enhedsindgang: Hvis dette sker på en paralleliseret måde, behøver resten af ​​GUI ikke at blive blokeret. I betragtning af at brugerne har tendens til at have problemer med at forstå 'hvorfor knappen ikke klikker', kan dette føre til øget brugertilfredshed, selvom den faktiske hastighed ikke øges.

Hvis du har brug for nogle nye ressourcer til at hjælpe dig med at kode smartere, tjek vores guide til det bedste Web Design Tools. af 2019. Hvis du vil undgå koden helt, skal du designe dit websted med det bedste Website Builder. , og sørg for at du har valgt den perfekte Web Hosting. Service med vores vejledning.

01. Intervallet udførelse 

 Var Sleep = Kræv ('Sleep');

Funktionsarbejder () {
    Console.log ("Worker Up")
    Sleep.msleep (1000)
    Console.Log ("Worker Down")
}

setinterval (arbejdstager, 2000);
mens (1 == 1)
{
    Sleep.msleep (250)
    Console.Log ("Hej fra Main")
} & gt;

Lad os starte med et lille eksempel baseret på en vellidt favorit: setinterval. fungere. Det tager en funktionsreference og en numerisk værdi afgrænset i millisekunder. Derefter fyres funktionen periodisk, når forsinkelsestimeren udløber.

02. Opsætning for et fald 

 NPM installeres søvn
npm example1.js

Bruger søvn() Funktion kræver, at vi læser søvnmodulet til et lokalt NPM-projekt. Det virker som en grænseflade til operativsystemets søvnbibliotek - undrer sig ikke, om din arbejdsstationskompilator er fyret under udbredelsen af ​​pakken.

03. farer af multitasking

Speed up JavaScript: 03

(Billedkredit: Tam Hanna)

Når du kører dette program, vil du finde dig selv konfronteret med output svarende til den, der er vist i figuren, der ledsager dette trin. Det er indlysende, at vores arbejdstager aldrig bliver påberåbt - noget skal være forkert med setinterval-funktionen.

04. Farser af multitasking, del 2

Moderne browsere udstyre hver fane med en JavaScript-tråd. Et omhyggeligt kig på vores loop afslører, at det er uendeligt. Det betyder, at det vil løbe for evigt og vil aldrig give kontrol. I betragtning af det setinterval () Fungerer med en besked, dens nyttelast bliver aldrig kørt, da meddelelseshåndteringen er blokeret fra at køre.

05. Fokus på troublemakers 

 Const-bar = () = & gt; Console.log ('Bar')

const baz = () = & gt; Console.log ('Baz')

const foo = () = & gt; {
  console.log ('foo')
  Setimeout (bar, 0)
  baz ()
}

foo ()

Flavio Copes 'Blog , giver en yderst interessant bit kode, der illustrerer problemet. Når du kører, giver det udgangen vist i figuren på grund af meddelelseskøen, der er blokeret indtil foo () Genopkaldes kontrol af hovedtråden.

06. Introducer threading.

Speed up JavaScript: 06

(Billedkredit: Tam Hanna)

I betragtning af at det underliggende operativsystem er i stand til at udføre preemptive multitasking, lad os udnytte sine evner ved at gyde tråde via en dedikeret API kaldet Webworkers, som nyder vidtrækkende støtte. Figuren, der ledsager dette trin, viser Nuværende notering. for funktionen.

07. Opret en ekstra fil 

Console.log ("Worker siger Hej!");
Console.Log ("Worker Up");
mens (1 == 1)
{
   console.log ("x");
}

Webworkers kan ikke sparke af med en funktionsandrejning. I stedet kræves en ny fil, som indeholder koden beregnet til at køre i tråden. I tilfælde af vores eksempel, Eksempel7thread.js. Har indholdet vist, der ledsager dette trin.

08. Kør arbejdstageren ... 

 Consth Worker = Kræv ('Worker_Threads');

Var MyWorker = Ny Worker.Worker ('./
exameks7thread.js ');
Var MyWorker2 = Ny Worker.Worker ('./
Eksempel7thread.js ');

Vores arbejdstager er klar til prime-time. Specialiteter af node.js runtime tvinger os til at inkludere arbejdstagermodulet og passere i en relativ sti - problemer, der ikke er konfronteret i browseren. Desuden skal du ikke spekulere på Manglende start () Opkald - En webarbejder sætter af, når forekomsten kommer online.

09. ... og forstå sine resultater

Speed up JavaScript: 09

(Billedkredit: Tam Hanna)

Meddelelseslevering kræver normalt en form for interaktion mellem runtime og resten af ​​operativsystemet. Desværre blokerer vores endeløse sløjfe denne proces - hvilket betyder, at kun en af ​​meddelelserne springer op før 'The Big Stall'.

10. Tilføj masken

Speed up JavaScript: 10

(Billedkredit: Tam Hanna) 
 Consth Worker = Kræv ('Worker_Threads');

Var MyWorker = Ny Worker.Worker ('./
exameks7thread.js ');
Var MyWorker2 = Ny Worker.Worker ('./
exameks7thread.js ');


mens (1 == 1)
{

}

Et andet eksperiment indebærer at placere en tom sløjfe efter de to konstruktor invokationer. I dette tilfælde vil trådene aldrig begynde at arbejde - Indkaldsmeddelelsen ankommer aldrig med operativsystemet.

11. Interprocess kommunikation

Mens arbejdstagere, der løber tætte endeløse sløjfer, har de problemer, der udvises ovenfor, kan rutiner kommunikere med hinanden. Dette sker via en besked Passing Interface - Tænk på det som en facilitet, der lader dig bestå en beskedobjekt fra en afsender til en modtager på tværs af trådgrænser.

12. Hvorfor Message-Pass?

Ud over fordelene ved at kunne koordinere tråde e ff øget (og reduceret risiko for »kollisioner«, også kendt som raceforhold), er beskeden, der passerer til hovedtråden, den eneste måde at interagere med dommen på grund af DI FF Colulty for at skabe Tråd-sikker GUI-stabler.

13. Flyt til browseren

Gennemførelse af besked passerer i node.js er kedelig. Flyt koden til internettet - Start ud ved at oprette en HTML-sele, der læser examplempi.js. . Vær opmærksom på, at denne kode kun kan køres fra en localhost webserver på grund af DOM Origin-restriktioner.

14. Konfigurer en postkasse ... 

 Var MyWorker = Ny Worker ('.
examplempithread.js ');
Var MyWorker2 = Ny Worker ('./
examplempithread.js ');


myworker.onmessage = funktion (e)
{
console.log (e);
}

myworker2.onmessage = funktion (e)
{
console.log (e);
}

Hver arbejdstager udsætter en onmessage-ejendom, der tager en funktionsreference, der skal påberåbes, når en besked dukker op fra den anden ende. Indkommende meddelelser fremsendes simpelthen til konsollen i browseren fra hovedtråden.

15. ... og fodre det fra arbejderen 

 Postmessage ("Worker siger Hej!");
postmessage ("arbejdstager op");
mens (1 == 1)
{
   postmessage ("x");
}

Afsendelse af meddelelser til en postkasse opnås ved at påberåbe sig postmeddelelsesfunktionen. Husk på, at en arbejdstager også kan implementere en onmessage. begivenhed, som kunne modtage oplysninger fra den, der ejer 'arbejdstagerinstansobjektet.

16. Kick det af ...

På dette tidspunkt er koden klar til at køre. Udviklerkonsollen er ikke oversvømmet med meddelelser på grund af MPI-grænsefladens høje e ff-ilægelighed, hvilket betyder, at data kan rejse rundt om systemet e ff ist.

17. Async og afventer

Speed up JavaScript: 17

(Billedkredit: Tam Hanna)

Microsofts tilføjelse af ASync og Await Søgeord ændrede historien om C # og Visualbasic.net. I princippet køres en metode mærket Async sammen med resten af ​​programmet. Resultaterne kan derefter høstes via afventer funktionen.

18. Udskift vores sovende 

 CONST SLEEP = (MILLISECONDS) = & GT; {
  returnere nyt løfte (løse = & gt;
Setimeout (Løs, Milliseconds))
}

I betragtning af at browsere er under alvorlige begrænsninger, når det kommer til at få adgang til native funktioner, kan vi ikke genbruge den øverste funktion, der er nævnt før. Det er endvidere suboptimal, idet det stoppede hele node.js runtime. Snippet, der ledsager dette trin, giver en mere effektiv tilgang.

19. Forstå koden ...

Denne kode returnerer et løfteobjekt - det er en anden bekvemmeligheds klasse tilføjet til Java script i et forsøg på at gøre multithreading lettere. Du bliver nødt til at påberåbe sin løse metode via en Setimeout. , der sikrer, at koden skal 'sidde ud' ganske lidt tid.

20. ... og implementer det et eller andet sted

Afventer opkald er kun tilladt inden for ASync-funktioner. Det betyder, at arbejderen har brug for en omskrivning - start af ved at påberåbe sig en ASYNC-bærerfunktion. Det håndterer resten af ​​kodens interaktion. 

 CONST SLEEP = (MILLISECONDS) = & GT; {
  returnere nyt løfte (løse = & gt;
Setimeout (Løs, Milliseconds))
}
Postmessage ("Worker siger Hej!");
postmessage ("arbejdstager op");
arbejder()
Async Function Worker () {
mens (1 == 1)
{
   postmessage ("x");
   afventer søvn (1000);
}
}

21. Harness kraften til indfødte!

Udviklere arbejder på node.js kode bør ikke glemme, at de kan - normalt - også skabe helt indfødte moduler, hvis ekstremt høj ydeevne er nødvendig. Disse kan ikke kun udnytte de forskellige operativsystem API'er, men kan også skrives i programmeringssprog, der kompilerer til maskinkode.

Denne artikel blev oprindeligt offentliggjort i udstedelse 291 af Creative Web Design Magazine Webdesigner . Køb problem 291. .

Læs mere:

  • De bedste JavaScript-biblioteker
  • 25 af de bedste JavaScript API'er
  • Virkelig nyttige webdesign tutorials

hvordan - Mest populære artikler

Brug Framer X til at opbygge interaktive prototyper

hvordan Sep 12, 2025

(Billedkredit: Framer) Som designere er der altid spørgsmålet om, hvilke prototypingsværktøjer du skal bruge til ..

Gennemfør gratis og hurtige brugertests med UserCe

hvordan Sep 12, 2025

Billede: Getty billeder Forudsætninger er dårlige for erhvervslivet. De er dårlige, fordi vi af naturen har mening..

Sådan opretter du en app med vue.js

hvordan Sep 12, 2025

JavaScript-økosystemet har ændret i over et årti, hvilket betyder, at front-end-udviklere har haft mulighed for at spore nye t..

Sådan oprettes et app-ikon på Illustrator

hvordan Sep 12, 2025

Side 1 af 2: Sådan oprettes et app-ikon på Illustrator: trin 01-11 Sådan oprettes et app-ikon på Illustrator: trin 01-11 ..

Speed ​​sculpt en væsen i zbrush

hvordan Sep 12, 2025

Når konceptende væsner i Zbrush, der præsenterer din ide som en gråtykte, ensartet stykke af 3D Art. kan gøre..

Design et responsivt sted med EM-baseret størrelse

hvordan Sep 12, 2025

Du har sikkert hørt, at du skal bruge relative enheder til skriftstørrelse. Dette er en god regel for tilgængeligt webdesign; Hvis brugeren ændrer deres browsers standard skriftstørrelse..

Mal et portræt som de gamle mestere

hvordan Sep 12, 2025

For denne tutorial tager vi et dybtgående kig på fordelene ved at kopiere et gammelt mastermaleri. Jeg har valgt at kopiere en ..

Opret en travl by scene i Illustrator

hvordan Sep 12, 2025

Den bedste by er en travl by, men den travle atmosfære er ikke en nem ting at fange med succes. Men med nogle enkle hvor..

Kategorier