Nurgeline {{AOT vs JIT}} vs reageerija: I osa

Alustame tõlgi ja kompilaatori võrdlemist

Kompilaator X-st Y-le on programm, mis tõlgib mis tahes programmi p mõnest keelest X semantiliselt ekvivalentseks programmiks p 'mõnes keeles Y selliselt, et programmi semantika säiliks, st et p ′ tõlgiks tõlk Y jaoks annavad samad tulemused ja sama efekti kui p-i tõlgendamine tõlgiga X-i jaoks.

Koostaja === Tõlkija

Koostaja Vs tõlk

Keele A tõlk on programm, mis käivitab kõik keeles X kirjutatud programmid p nii, et see täidab efekte ja hindab tulemusi vastavalt X kirjeldusele.

Pealtkuulaja === täitur

Kompilaator nurgas 1

Üldine kompilaator

AngularJS 1.x kompilaator, mis on üsna üldist laadi ja töötab iga malli jaoks, täites dünaamilisi arvutusi. Selle olemuse tõttu võitleb JavaScripti virtuaalne masin madalamal tasemel arvutamise optimeerimisega. Peamine põhjus on:

"VM ei tea räpase kontrollimise loogika jaoks konteksti pakkuvate objektide kuju (s.o niinimetatud ulatust), sisemised vahemälud saavad palju möödalaske, mis aeglustab täitmist"

Kompilaatorid nurgas 2 ++

JIT

Rakenduse Angular 2 algfaasis, kui brauserisse sisse tõmmata, teeb JIT-i kompilaator palju tööd (sõelub komponendi malle iga kord, kui kasutaja veebilehe avab (osa, mis muudab HTML-i mallid käitatavaks koodiks), et komponente analüüsida rakenduses tööajas ja genereerige mällu kood. Lehe värskendamise korral visatakse kogu tehtud töö ära ja JIT-i koostaja teeb selle töö uuesti. See oli AOT-i peamine tagasilöök

Sündmuste voog "Just-in-Time" koostamisega

  • Nurgarakenduse väljatöötamine TypeScriptiga ja rakenduse koostamine Tsc-ga.
  • Komplekteerimine → minimeerimine → juurutamine
  • Kliendil → Laadige alla kõik JavaScripti varad → Nurgalised käivitusrihmad → Nurk läbib JiT-i kompileerimise protsessi → Rakendus saab renderdatud
JIT-komplekti ülevaade

AOT

Kompilaator teisendab TS-koodi JS-koodiks (see JS on juba koostatud ka nurga jaoks). Nüüd kompileerib see kompileeritud JS-kood brauseri uuesti, nii et HTML-i saab renderdada. Seega on AOT-i kompilaator juba nurgafunktsioonide eest hoolitsenud ja seetõttu ei pea brauser muudatuste tuvastamise, komponentide loomise ja sõltuvuse süstimise pärast palju muretsema.

AOT-i koostamine

Nii liigutame kompilatsiooni käitamisajast välja (brauser) lähtekoodi genereerimisele. Nii toimub kompileerimine ainult üks kord ehituse ajal ja me ei pea enam nurkkompilaatorit ja HTML-i malle komplekti saatma.

Nurga 5+ korral saate JiT-d unarusse jätta ja minna täielikku asjatundlikkust isegi arendamise jaoks !!!

Ürituste voog aeg-ajalt koostamisega

  • Nurgarakenduse väljatöötamine TypeScriptiga → Rakenduse koostamine koos ngc-ga → Viib mallide kompileerimise koos nurkkompilaatoriga ja genereerib (tavaliselt) TypeScripti
  • TypeScripti koodi kompileerimine JavaScripti → komplekteerimine → minimeerimine → juurutamine
  • Klient → laadige alla kõik varad → nurgalised bootstrapid ja rakenduste renderdused
AOT-paketi ülevaade

AOT omadused

Kiirem renderdamine, vähem asünkroonseid taotlusi, väiksema nurgaraami allalaadimissuurus ja mallivigade tuvastamine varem

Koostaja reaktoris

JSX toetab nii Babeli kui ka TypeScripti, sest aja algusest peale, mis muutis JavaScripti ehitamise hõlpsaks ja reageerimise lihtsaks, ei hooli nii Babeli kui ka TypeScripti kasutatav versioon, mis on vähem murettekitav.

Esimene Reaxi kompilaator hindab Reaxi komponentide puid ja optimeerib teie Reaxi komponente. Reaxi kompilaator peab teadma rakenduste komplekti juurkomponenti ja kui on ette nähtud, et see peaks sellest automaatselt välja mõtlema kogu komponentide puude.

Reaktori kompilaatori teada saamiseks, mis on teie rakenduse juurkomponent, peate kasutama ülemaailmset funktsiooni Prepack, mille nimi on __optimizeReactComponentTree (MyRootReactComponent). Näiteks oma soukoodis (enne selle komplekteerimist ja Prepackile edastamist) võiksite teha järgmist:

// MyComponent.js
importida reageerida 'reageerima';
klass MyComponent laiendab React.Component {
  renderdama () {
    tagasi  tere maailm! ;
  }
}
// __optimizeReactComponentTree on teada ainult Prepackile
// nii et me mähime selle tinglikult, nii et kood töötab endiselt
// kohaliku arengu testimiseks ilma Prpeackita
if (globaalne .__ optimeeriReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
moodul.exports = MyComponent;

React kompileerib JavaScripti koodiks, mis manipuleerib virtuaalset DOM-i, samas kui Nurk kompileerib JavaScripti koodiks, mis manipuleerib otse DOM-iga. Nii nurga all olevast kui ka kooditasandil reageerimisest pole palju sügavat mõistmist. Tutvume lähemalt minu järgmises ajaveebis. :)