Kompilátor úhlových {{AOT vs JIT}} vs Reaktor: Část - I

Začněme porovnáním tlumočníka a překladače

Kompilátor z X do Y je program, který překládá jakýkoli program p z nějakého jazyka X do sémanticky ekvivalentního programu p 'v nějakém jazyce Y takovým způsobem, aby byla zachována sémantika programu, tj. Interpretace p' interpretem pro Y poskytne stejné výsledky a bude mít stejné účinky jako interpretace p s interpretem pro X.

Překladač === Překladač

Překladač Vs překladače

Tlumočník pro jazyk A je program, který provádí jakýkoli program p psaný v jazyce X tak, že provádí efekty a vyhodnocuje výsledky, jak je předepsáno specifikací X.

Interceptor === Kat

Kompilátor v úhlu 1

Generický kompilátor

Kompilátor AngularJS 1.x, který je ve své podstatě obecný a funguje pro jakoukoli šablonu prováděním sady dynamických výpočtů. Kvůli této povaze JavaScript Virtual Machine bojuje s optimalizací výpočtu na nižší úrovni. Hlavním důvodem je:

"VM nezná tvary objektů, které poskytují kontext pro logiku kontroly špinavosti (tj. Tzv. Obor), je to vložené mezipaměti, které dostávají spoustu chyb, což zpomaluje provádění."

Kompilátory v Angular 2 ++

JIT

V počáteční fázi aplikace Angular 2, když je bootstrapped v prohlížeči, kompilátor JIT vykonává spoustu práce (analyzuje šablony komponentů pokaždé, když uživatel otevře webovou stránku, část, která transformuje šablony HTML do spustitelného kódu), aby analyzoval komponenty v aplikaci za běhu a generovat kód v paměti. Po aktualizaci stránky je veškerá práce, která byla provedena, zahozena a kompilátor JIT tuto práci provede znovu. To byl hlavní neúspěch vedoucí k AOT

Tok událostí s kompilací Just-in-Time

  • Vývoj úhlové aplikace s TypeScript a kompilace aplikace s Tsc.
  • Balíček → Minifikace → Nasazení
  • V klientovi → Stáhněte si všechny prostředky JavaScriptu → Úhlové spouštěcí úchyty → Úhlový prochází procesem kompilace JiT → Vykreslení aplikace
Přehled svazků JIT

AOT

Kompilátor transformuje TS kód na JS kód (tento JS již byl kompilován pro úhlové). Nyní je tento kompilovaný kód JS znovu zkompilován prohlížečem, aby bylo možné vykreslit HTML. Kompilace AOT již tedy pečovala o rysy úhlu, takže si prohlížeč nemusí dělat starosti s detekcí změn, tvorbou komponent a vstřikováním závislosti.

Kompilace AOT

Tím přesuneme kompilaci mimo dobu běhu (prohlížeč) na generování zdrojového kódu. Tímto způsobem kompilace probíhá pouze jednou v době sestavení a už nemusíme dodávat Angular kompilátor a HTML šablony do balíčku.

V Angular 5+ budete moci zanedbat JiT a jít na plný AoT, dokonce i pro vývojové sestavy !!!

Tok událostí s kompilací v předstihu

  • Vývoj úhlové aplikace s TypeScript → Kompilace aplikace s ngc → Provádí kompilaci šablon s kompilátorem úhlové a generuje (obvykle) TypeScript
  • Kompilace kódu TypeScript do JavaScriptu → Svazek → Minifikace → Nasazení
  • Klient → Stáhněte si všechna aktiva → Úhlové zaváděcí a aplikační vykreslení
Přehled svazků AOT

Funkce AOT

Rychlejší vykreslování, méně asynchronních požadavků, velikost stahování menšího úhlového rámce a dříve detekovat chyby šablon

Kompilátor v React

JSX podporuje Babel i TypeScript od samého začátku, což usnadnilo integraci s vytvářením JavaScriptu a nezáleží na tom, že verze používaná Babel i TypeScript je méně znepokojující.

Kompilátor First React vyhodnotí stromy složek React a provede inteligentní optimalizace vašich komponent React. Kompilátor reakcí musí znát kořenovou komponentu balíčku aplikací a jednou za předpokladu, že by z toho měl automaticky zjistit celý strom komponentů.

Chcete-li sdělit kompilátoru React, jaká je kořenová komponenta vaší aplikace, musíte použít globální funkci Prepack nazvanou __optimizeReactComponentTree (MyRootReactComponent). Například v sourecode (před tím, než jej spojíte a předáte do Prepacku), můžete udělat následující:

// MyComponent.js
import Reagovat z 'reagovat';
třída MyComponent rozšiřuje React.Component {
  poskytnout() {
    návrat  Ahoj svět! ;
  }
}
// __optimizeReactComponentTree je známá pouze předobalením
// takže ji zabalíme do podmíněného, ​​takže kód stále funguje
// pro testování místního rozvoje bez Prpeack
if (global .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

Reaguje zkompiluje na kód JavaScript, který manipuluje s virtuální DOM, zatímco Angular kompiluje do kódu JavaScript, který manipuluje s DOM přímo. Není příliš hluboké porozumění úhlu a reagovat na úrovni kódu. Umožňuje prozkoumat více na mém dalším blogu. :)