21 vaiheet Super Speedy JavaScript

Sep 11, 2025
Miten tehdään
Speed up JavaScript
(Kuva luotto: PEXELS.com)

Ensi silmäyksellä rinnakkainen käsittely kuulostaa kutsusta ilmaiseen lounaan - pystyy käyttämään monen ytimen prosessoita tehokkaammin, jotta koodi on valtava nopeus. Käytännön kokemus osoittaa, että tämä ei aina ole: joitakin ongelmia on mahdotonta ottaa käyttöön. Sen lisäksi, että rinnakkaistutkimus johtaa koko uusien ongelmien perheeseen, jota ei näy yksittäisistä koneista.

Rinnakkaiskoodi voi periaatteessa jakaa kahteen ryhmätyöryhmään. Ensimmäinen ryhmä on klassinen nopeus kasvaa - jos ohjelmasi on seurannut 3000 kuvaa, jakaminen työn halutessaan, että enemmän kuvia voidaan käsitellä milloin tahansa. Vaikka ehdottomasti hyödyllinen, tällaista tehtävää on harvoin havaittu jokapäiväisessä web-kehityksessä. (Jos luot kuvan raskaan sivuston, varmista, että palautat ne kunnolliseen pilvivarasto ).

Yleisempi yhdensuuntaisempi muoto toimii pitkän juoksevien tehtävien ympärillä, jotka eivät vaadi paljon CPU-aikaa. Hyvä esimerkki tästä odottaisi latausta tai jonkinlaista laitteen syöttöä: jos tämä tehdään rinnakkain, loput GUI: tä ei tarvitse estää. Kun otetaan huomioon, että käyttäjillä on taipumus ymmärtää ", miksi painike ei napsauta", tämä voi johtaa käyttäjän tyytyväisyyteen, vaikka todellinen nopeus ei kasva.

Jos tarvitset uusia resursseja, joiden avulla voit koodata älykkäämpiä, tutustu oppaamme parhaiten Web-suunnittelutyökalut 2019. Jos haluat välttää koodin kokonaan, suunnittele sivustosi parhaimmillaan Verkkosivuston rakentaja ja varmista, että olet valinnut täydellisen sivujen ylläpito Palvelu oppaan kanssa.

01. Täydellinen toteutus 

 var sleep = vaatia ("unta");

Toiminta työntekijä () {
    Konsolit.log ("työntekijä")
    Sleep.mSleep (1000)
    konsoli.log ("työntekijä alas")
}

SetInterval (työntekijä, 2000);
kun (1 == 1)
{
    Sleep.mSleep (250)
    Console.log ("Hei Main")
} & gt;

Aloitamme pienellä esimerkillä, joka perustuu hyvin pidetty suosikki: Setinterval Toiminto. Se vaatii viittauksen ja numeerisen arvon, joka on ravinnut millisekunteissa. Sen jälkeen funktio laukaistaan ​​säännöllisesti aina, kun viivästyksen ajastin päättyy.

02. Syksyn perustaminen 

 NPM asentaa unta
NPM-esimerkki1.js

Käyttämällä nukkua() Toiminto edellyttää, että lataat nukkumismoduulin paikalliseen NPM-projektiin. Se toimii käyttöliittymänä käyttöjärjestelmän nukkumiskirjastoon - älä ihme, onko työaseman kääntäjä laukaisee pakkauksen käyttöönoton aikana.

03. Multitasking

Speed up JavaScript: 03

(Kuva luotto: Tam Hanna)

Kun käytät tätä ohjelmaa, löydät itsesi kohdan, joka on samanlainen kuin tässä vaiheessa mukana olevassa kuvassa. On selvää, että työntekijä ei koskaan saa kutsua - jotain on oltava väärässä SetintierVal-toiminnossa.

04. Multitasking, osa 2

Nykyaikaiset selaimet varustele jokainen välilehti, jossa on yksi JavaScript-lanka. Huolellinen katselu silmukka paljastaa, että se on loputon. Tämä tarkoittaa sitä, että se kestää ikuisesti, eikä koskaan anna valvontaa. Olettaen että SetItinterval () Toimii viestin, sen hyötykuorma ei koskaan saa ajaa, koska viestinkäsittelylaite on estetty käynnissä.

05. Keskity häiritsijöihin 

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

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

const foo = () = & gt; {
  konsoli.log ('foo')
  SetTimeout (baari, 0)
  Baz ()
}

foo ()

Flavio Copesin blogi , tarjoaa erittäin mielenkiintoisen koodin, joka kuvaa ongelmaa. Kun se toimii, se tuottaa kuvassa esitetyn ulostulon, joka johtuu viestijonolle, joka on estetty, kunnes foo () luopua pääkodin.

06. Esittele langoitus

Speed up JavaScript: 06

(Kuva luotto: Tam Hanna)

Kun otetaan huomioon, että taustalla oleva käyttöjärjestelmä pystyy suorittamaan ennaltaehkäisevää monitoimilaitetta, hyödyntämme sen kykyjä kutevalla langoilla omistautuneilla API: llä nimeltä WebWorkers, jolla on laaja-alainen tuki. Tämän vaiheen mukana oleva luku esittää Nykyinen listaus ominaisuutta varten.

07. Luo ylimääräinen tiedosto 

Console.log ("työntekijä sanoo Hei!");
konsoli.log ("työntekijä");
kun (1 == 1)
{
   konsoli.log ("x");
}

Verkkotyöntekijät eivät voi käynnistää toiminnon hyötykuorman. Sen sijaan tarvitaan uusi tiedosto, joka sisältää koodin, joka on tarkoitettu kierrellä. Esimerkkinämme example7thread.js Onko sisältö näkyy tämän vaiheen mukana.

08. Suorita työntekijä ... 

 CONST-työntekijä = vaatia ("Worker_threads");

var myworker = uusi työntekijä. WORKER ('./
example7thread.js ');
var myworker2 = uusi työntekijä. WORKER ('./
example7thread.js ');

Työmme on valmis prime-aikaa. Solmun erikoisuudet.js Runtime pakottavat meidät sisällyttämään työntekijöiden kierteet moduuli ja kulkevat suhteellisessa polussa - ongelmat eivät ole selaimessa. Lisäksi älä ihme Puuttuva alku () Soita - Web-työntekijä on pois päältä, kun esimerkki tulee verkossa.

09. ... ja ymmärrä sen tulokset

Speed up JavaScript: 09

(Kuva luotto: Tam Hanna)

Viestin toimitus vaatii yleensä jonkinlaista vuorovaikutusta juoksun ja muun käyttöjärjestelmän välillä. Valitettavasti loputon silmukka estää tämän prosessin - mikä tarkoittaa, että vain yksi viestistä avautuu ennen "Big Stall".

10. Lisää maski

Speed up JavaScript: 10

(Kuva luotto: Tam Hanna) 
 CONST-työntekijä = vaatia ("Worker_threads");

var myworker = uusi työntekijä. WORKER ('./
example7thread.js ');
var myworker2 = uusi työntekijä. WORKER ('./
example7thread.js ');


kun (1 == 1)
{

}

Toinen kokeilu koskee tyhjän silmukan asettamista kahden konstruktorin inkucation jälkeen. Tällöin langat eivät koskaan käynnistä työtä - kutsuviesti ei koskaan saa koskaan käyttää käyttöjärjestelmää.

11. Interprocess-viestintä

Vaikka tiukat endless silmukat, joilla on edellä esitetyt ongelmat, rutiineja voi kommunikoida toistensa kanssa. Tämä tehdään viestin kulkevan käyttöliittymän kautta - Ajattele sitä laitoksena, jonka avulla voit siirtää viestin objektin lähettäjän vastaanottajalle kierrosrajoilla.

12. Miksi viesti-pass?

Sen lisäksi, että ne voivat koordinoida kierteet E FF: n koordinoimiseksi (ja vähentynyt "törmäysten", joka tunnetaan myös kilpailuolosuhteina), pääkohtaan kulkeva viesti on ainoa tapa vuorovaikutuksessa DOM: n kanssa, koska se on luotava Kierre-turvallinen GUI-pinot.

13. Siirry selaimeen

Toteutusviesti, joka kulkee solmussa.js on tylsiä. Siirrä koodi verkkoon - Aloita luomalla HTML-valjaat, jotka latautuvat EXAMPLEMPI.JS . Huomaa, että tätä koodia voidaan suorittaa vain Localhost-verkkopalvelimelta DOM-alkuperän rajoituksista.

14. Määritä postilaatikko ... 

 var myworker = uusi työntekijä ('./
EXAMPLEMPITHREAD.JS ');
var myworker2 = uusi työntekijä ('./
EXAMPLEMPITHREAD.JS ');


myworer.onmessage = toiminto (e)
{
konsoli.log (e);
}

myworer2.onmessage = toiminto (e)
{
konsoli.log (e);
}

Jokainen työntekijä paljastaa vallan ominaisuuden, joka ottaa tehtävän viittauksen, joka on kutsuttava aina, kun viesti avautuu toisesta päästä. Saapuvia viestejä lähetetään yksinkertaisesti selaimen konsoliin pääkotelosta.

15. ... ja ruokkivat sitä työntekijältä 

 Postmessointi ("työntekijä sanoo hello!");
postmessointi ("työntekijä");
kun (1 == 1)
{
   postmessointi ("x");
}

Viestien lähettäminen postilaatikkoon toteutetaan vetämällä viestiviestitoimintoa. Muista, että työntekijä voi myös toteuttaa vannottelu Tapahtuma, joka voi saada tietoja siitä, kuka "omistaa" työntekijän esimerkkiobjektin.

16. Kick se pois ...

Tässä vaiheessa koodi on valmis toimimaan. Kehittäjäkonsoli ei ole tulvii viestejä, jotka johtuvat MPI-liitännän korkeasta eff: n, mikä tarkoittaa, että tiedot voivat matkustaa järjestelmän e ff: n ympärille.

17. Async ja odottavat

Speed up JavaScript: 17

(Kuva luotto: Tam Hanna)

Microsoftin lisäys Async ja odottavat avainsanoja muunnetun C #: n ja Visualbasic.net-historian. Periaatteessa ASyncin merkitty menetelmä toimii yhteistyössä muun ohjelman kanssa. Tulokset voidaan sitten korjata odottavan toiminnon kautta.

18. Vaihda nukkuja 

 const sleep = (millisekuntia) = & gt; {
  Palauta uusi lupaus (ratkaise = & gt;
SetTimeout (resolve, millisekunnat))
}

Koska selaimet ovat vakavissa rajoituksissa, kun kyseessä on natiivit toiminnot, emme voi käyttää ennen nukkumaanominaisuutta. Se on lisäksi suboptimal, että se pysähtyi koko solmu.js runtime. Tämän vaiheen mukana oleva katkelma tarjoaa tehokkaamman lähestymistavan.

19. Ymmärrä koodi ...

Tämä koodi palauttaa lupausobjektin - se on toinen mukavuusluokka, joka on lisätty Java-komentosarjaan yrittäessään helpottaa helpompaa. Sinun on pyydytettävä ratkaisu menetelmä A: n kautta SetTimeout , varmistaen, että koodin on "istuttava" melko vähän aikaa.

20. ... ja asenna se jonnekin

Odottaa puhelut sallitaan vain Async-toimintojen sisäpuolella. Tämä tarkoittaa sitä, että työntekijä tarvitsee uudelleenkirjoittamista - Aloita käyttämällä Async-kantajan toimintaa. Se käsittelee loput koodin vuorovaikutusta. 

 const sleep = (millisekuntia) = & gt; {
  Palauta uusi lupaus (ratkaise = & gt;
SetTimeout (resolve, millisekunnat))
}
postmessage ("työntekijä sanoo Hei!");
postmessointi ("työntekijä");
työntekijä()
Async-toiminnon työntekijä () {
kun (1 == 1)
{
   postmessointi ("x");
   Odottaa nukkua (1000);
}
}

21. Valjaa natiivin voima!

Solmu.js-koodilla työskentelevät kehittäjät eivät saa unohtaa, että ne voivat yleensä - luoda myös täysin alkuperäiset moduulit, jos tarvitaan erittäin suurta suorituskykyä. Nämä eivät voi hyödyntää vain eri käyttöjärjestelmän sovellusliittymiä, vaan ne voidaan kirjoittaa myös ohjelmointikieliin, jotka koottavat koneen koodin.

Tämä artikkeli julkaistiin alun perin Banes 291 Creative Web Design Magazine Nettisivujen suunnittelija . Osta numero 291 .

Lue lisää:

  • Parhaat JavaScript-kirjastot
  • 25 parhaista JavaScript AP: stä
  • Todella hyödyllinen Web Design Tutorials

Miten tehdään - Suosituimmat artikkelit

Affinity Designer: Kuinka käyttää vaikutuksia ja tyylit

Miten tehdään Sep 11, 2025

(Kuva luotto: Serif) Vektorilla ja rasterityökaluilla yhdistettynä, Affinity Designer on edullinen m..

Kuinka tehdä susi

Miten tehdään Sep 11, 2025

Jos olet oppinut Kuinka tehdä koira , olisit anteeksi ajatella, että voit helposti tehdä myös susi. Vaikka se pystyy luonnokselle Fidon ..

Kuinka käyttää tekstuureja Photoshopissa

Miten tehdään Sep 11, 2025

Tekstuuri on usein mitä hämärtää linjojen välillä perinteisen ja digitaalinen kuvamateriaali. Usein se on helppo erottaa toisistaan ​​kaksi, jos digitaalista taidetta ei ole minkä..

Ymmärrä Unity Asset-tuontiputki

Miten tehdään Sep 11, 2025

Unity on yksi maailman suosituimmista pelimoottori, joka vastaa virtaa satoja tuhansia pelejä ympäri maailmaa yli 25 alustoilla..

Luo paremmat merkin animaatiot mayassa

Miten tehdään Sep 11, 2025

Ant-seurakunta on yksi taiteilijamme vastaamalla tiettyihin kysymyksiin Vertex . ..

Tee kaksinkertainen valotus Photoshopissa

Miten tehdään Sep 11, 2025

Adobe käynnistää nykyisin uuden sarjan video-opetusohjelmat Luova pilvi sovelluksia 60 sekunnissa tai vähemmän. Olitpa aloittelija tai haluan vai..

Kuinka täydelliset hiukset muotokuvioissasi

Miten tehdään Sep 11, 2025

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 ..

Kuinka käyttää varastossa valokuvaus luovasti suunnittelussa

Miten tehdään Sep 11, 2025

Sen sijaan, että olisit viimeinen keino, säilytyskuvesi voi ja pitäisi muodostaa olennainen osa luovaa arsenalia. Varastossa V..

Luokat