Hyrndur {{AOT vs JIT}} vs React þýðanda: Part - I

Byrjum á því að bera saman túlk og þýðanda

Compiler frá X til Y er forrit sem þýðir hvaða forrit p frá einhverju tungumáli X yfir í semantískt jafngilt forrit p ′ á einhverju tungumáli Y á þann hátt að merkingarfræði forritsins er varðveitt, þ.e. að túlka p ′ með túlki fyrir Y mun skila sömu niðurstöðum og hafa sömu áhrif og túlkun p með túlki fyrir X.

Þýðanda === þýðandi

Túlkur þýðanda

Túlkur fyrir tungumál A er forrit sem keyrir hvaða forrit sem er skrifað á tungumálinu X þannig að það framkvæmir áhrifin og metur niðurstöðurnar eins og mælt er fyrir um í forskrift X.

Hlerar === Aftökur

Compiler í hyrndum 1

Generísk þýðandi

AngularJS 1.x þýðandi sem er nokkuð almennur að eðlisfari sem virkar fyrir hvaða sniðmát sem er með því að framkvæma safn af kraftmiklum útreikningum. Vegna þessa eðlis glímir JavaScript Virtual Machine við að hámarka útreikninginn á lægra stiginu. Aðalástæðan að baki er:

`VM þekkir ekki form hlutanna sem bjóða upp á samhengi við óhreinan athugunarrökfræði (þ.e.a.s. svokallað umfang), það er skyndiminni í skyndiminni að það verður mikið um sakir sem hægja á framkvæmdinni`

Compilers í Angular 2 ++

JIT

Í fyrsta áfanga Angular 2 forritsins þegar hann er ræstur í vafranum sinnir JIT þýðandinn mikilli vinnu (flokka hluti sniðmátsins í hvert skipti sem notandinn opnar vefsíðuna, hluti sem umbreytir HTML sniðmát í keyranlegan kóða) til að greina íhlutina í forritinu á afturkreistingur og búa til kóða í minni. Þegar síðan er endurnýjuð er öllu verkinu sem unnið hefur verið hent og JIT þýðandinn vinnur allt upp á nýtt. Þetta var mikið áfall fyrir AOT

Atburðarstreymi með samantekt á réttum tíma

  • Þróun hyrnds forrits með TypeScript og samantekt forritsins með Tsc.
  • Sameining → Minification → Dreifing
  • Hjá viðskiptavininum → Hladdu niður öllum JavaScript eignum → Hyrndar ræsibönd → Hyrnd fer í gegnum JiT samantektarferlið → Umsókn verður afhent
Yfirlit yfir JIT búnt

AOT

Compiler umbreytir TS kóða í JS kóða (þessi JS hefur þegar verið tekinn saman líka fyrir horn). Nú er þessi samansafnaða JS kóða settur saman aftur með vafra svo hægt sé að láta HTML skila sér. Þannig að eiginleikar hyrndra hafa þegar verið gættir af AOT þýðanda og þess vegna þarf vafrinn ekki að hafa miklar áhyggjur af uppgötvun breytinga, sköpun íhluta og ósjálfstæði.

AOT samantekt

Þannig flytjum við samantektina úr keyrslutímanum (vafra) yfir í frumkóðaframleiðsluna. Á þennan hátt gerist samantekt aðeins einu sinni í byggingartíma og við þurfum ekki lengur að senda hyrndur þýðanda og HTML sniðmát inn í búntinn.

Í Angular 5+ munt þú geta vanrækt JiT og farið í fulla AoT, jafnvel fyrir þróun byggir !!!

Atburðarstreymi með fyrirfram samantekt

  • Þróun hyrnds forrits með TypeScript → Samantekt forritsins með ngc → Framkvæma samsetningu sniðmátanna með hyrndum þýðanda og býr til (venjulega) TypeScript
  • Samantekt TypeScript kóðans í JavaScript → Sameining → Minification → Dreifing
  • Viðskiptavinur → Sæktu allar eignir → Hyrndar ræsibönd og umsóknargjafar
Yfirlit yfir AOT búnt

AOT lögun

Hraðari flutningur, Færri ósamstilltur beiðnir, minni niðurhal á stærð ramma og greina sniðmátvillur fyrr

Compiler í React

JSX styður bæði Babel og TypeScript frá upphafi tímans sem gerði aðlögun að JavaScript auðvelt og viðbrögð er alveg sama um þá útgáfu sem Babel og TypeScript nota, sem er minna áhyggjuefni.

First React þýðandinn metur React hluti tré og gerir greindar hagræðingar á React íhlutunum þínum. React compiler verður að þekkja rótarhluta forritsins búnt og einu sinni gefið að það ætti sjálfkrafa að reikna út allt hluti trésins íhluta úr því.

Til að segja React þýðandanum hvað er rótarhlutinn fyrir umsóknina þína verður þú að nota alheimsaðgerð Prepack sem kallast __optimizeReactComponentTree (MyRootReactComponent). Til dæmis í sourecode þínum (áður en þú safnar honum saman og færir það í Prepack) gætirðu gert:

// MyComponent.js
flytja inn React frá 'react';
bekk MyComponent nær React.Component {
  veita () {
    skila  Halló heimur! ;
  }
}
// __optimizeReactComponentTree er aðeins þekkt fyrir Prepack
// þannig að við umbúðum það með skilyrðum svo kóðinn virki enn
// til staðbundinnar prófunar án Prpeack
ef (global .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

React safnar saman við JavaScript kóða sem vinnur með sýndar DOM meðan Angular tekur saman við JavaScript kóða sem notar DOM beint. Það er ekki mikill djúpur skilningur á bæði hyrndum og bregðast við á kóðastigi. Við skulum kanna meira á næsta bloggi mínu. :)