Ъглов {{AOT срещу JIT}} срещу React компилатор: Част - I

Нека започнем с сравняване на тълкувател и съставител

Компилатор от X до Y е програма, която превежда всяка програма p от някакъв език X в семантично еквивалентна програма p 'на някакъв език Y по такъв начин, че семантиката на програмата се запазва, т.е. интерпретирането на p' с интерпретатор за Y ще има същите резултати и ще има същите ефекти като интерпретирането на p с интерпретатор за X.

Съставител === Преводач

Съставител Vs Interpreter

Преводач за език A е програма, която изпълнява всяка програма p, написана на език X, така че тя изпълнява ефектите и оценява резултатите, както е предписано от спецификацията на X.

Прехващач === палач

Компилатор в ъглова 1

Генеричен компилатор

AngularJS 1.x компилатор, който е доста общ по своята същност, който работи за всеки шаблон чрез извършване на набор от динамични изчисления. Поради това естество JavaScript виртуална машина се бори с оптимизиране на изчислението на по-ниско ниво. Основната причина за това е:

„VM не знае формите на обектите, които осигуряват контекст за логиката на мръсна проверка (т.е. така наречения обхват), вградените кешове получават много пропуски, което забавя изпълнението“

Компилатори в Angular 2 ++

JIT

В началната фаза на приложение Angular 2, когато се зарежда в браузъра, JIT компилаторът извършва много работа (анализира шаблоните на компонентите всеки път, когато потребителят отвори уеб страницата, част, която трансформира HTML шаблоните в изпълним код), за да анализира компонентите в приложението по време на изпълнение и генериране на код в паметта. Когато страницата се опресни, цялата свършена работа се изхвърля и компилаторът JIT върши работата отново. Това беше основна причина за неуспех при AOT

Поток от събития с Just-in-Time Compilation

  • Разработване на Angular приложение с TypeScript и компилация на приложението с Tsc.
  • Групиране → Минификация → Разгръщане
  • На клиент → Изтеглете всички активи на JavaScript → Ъглови начални стъпки → Angular преминава през процеса на компилиране на JiT → Приложението се визуализира
Общ преглед на JIT

AOT

Компилаторът преобразува TS кода в JS код (този JS вече е съставен и за ъглова). Сега този компилиран JS код се компилира отново от браузъра, за да може да се визуализира HTML. По този начин характеристиките на ъгловите вече са се погрижили от AOT компилатора и следователно браузърът не трябва да се притеснява много за откриване на промени, създаване на компоненти и инжектиране на зависимостта.

AOT компилация

По този начин преместваме компилацията извън времето на изпълнение (браузър) към генерирането на изходния код. По този начин компилацията се случва само веднъж по време на изграждане и вече не е необходимо да изпращаме Angular компилатора и HTML шаблоните в пакета.

В Angular 5+ ще можете да пренебрегнете JiT и да преминете пълен AoT, дори и за изграждане на развитие !!!

Поток от събития с предварително съставяне

  • Разработване на Angular приложение с TypeScript → Компилация на приложението с ngc → Извършва компилация на шаблоните с Angular компилатора и генерира (обикновено) TypeScript
  • Компилация на кода TypeScript в JavaScript → Групиране → Минимизация → Разгръщане
  • Клиент → Изтеглете всички активи → Ъглови начални стъпки и рендери на приложения
Общ преглед на AOT

AOT функции

По-бързо изобразяване, По-малко асинхронни заявки, по-малък размер на ъгловата рамка за изтегляне и откриване на грешки в шаблона по-рано

Съставител в React

JSX поддържа Babel и TypeScript от самото начало на времето, което направи интеграцията с JavaScript изграждането лесно и реагирането не се интересува от версията, която се използва както от Babel, така и от TypeScript, което е по-малко притеснение.

Компилаторът First React оценява дърветата на компонентите React и прави интелигентни оптимизации на вашите компоненти React. React компилаторът трябва да знае коренния компонент на пакета на приложенията и веднъж даден, че трябва автоматично да разбере цялото дърво на компонентите на компонентите от това.

За да кажете на компилатора React какъв е коренният компонент за вашето приложение, трябва да използвате глобална функция на Preck, наречена __optimizeReactComponentTree (MyRootReactComponent). Например във вашия sourecode (преди да го свържете и да го предадете на Prepack), можете да направите:

// MyComponent.js
import React от 'реагира';
клас MyComponent разширява React.Component {
  render () {
    връщане  Здравей свят! ;
  }
}
// __optimizeReactComponentTree е известно само на Prepack
// затова го увиваме в условно, така че кодът все още работи
// за локално тестване за развитие без Prpeack
ако (глобално .__ optimizeReactComponentTree) {
  __optimizeReactComponentTree (MyComponent);
}
module.exports = MyComponent;

React компилира към JavaScript код, който манипулира виртуалния DOM, докато Angular компилира JavaScript код, който манипулира DOM директно. Няма много дълбоко разбиране както на ъглови, така и на реагиращи на ниво код. Нека изследваме повече в следващия ми блог. :)