Pochopení základů je k nezaplacení. Pojďme si tedy probrat to základní, jak Javascript funguje 🤔
Jak JavaScript funguje? 🤷🏻♀
Pochopení toho, jak JavaScript funguje, usnadňuje čtení a psaní kódu a je méně frustrující a umožňuje vám soustředit se na logiku vaší aplikace namísto boje s gramatikou jazyka.
Napíšeme kód v textovém editoru a nějak se tento kód magicky změní na 0 a 1, což říká počítači, aby něco udělal. 😇
Javascript je jednovláknový a interpretovaný jazyk.
Pokud dám JS soubor CPU a požádám o jeho spuštění v prohlížeči, nebude rozumět jazyku, protože na posledním počítači rozumí pouze 0 a 1. Jak komunikujeme pomocí JS souboru, tak počítač spustí kód v prohlížeči.
Zde přichází Javascript Engine.
Javascript Engine 🎰
Tím, že máme Javascript Engine, nám to umožňuje dát Javascript souboru do motoru. Engine porozumí souboru Javascript a řekne počítačům, co mají s kódem dělat.
V jistém smyslu jste právě vytvořili překladač, abyste mohli komunikovat s někým, kdo nezná váš jazyk.
Existuje 8 motorů a nazývají se ECMAScript. Rychlý engine je v8, který je napsán v C++.
❓ Kdo vytvořil první JS engine ❓
Brendan Eich. ☺️ Před tím počítačem rozumí pouze HTML a CSS 🤯
Co se děje uvnitř motoru?
Když poskytneme soubor Javascript, nejprve provede lexikální analýzu (analyzátor), která rozdělí kód na token, aby identifikoval jejich význam.
Tyto tokeny se vytvoří ve stromu zvaném AST (Abstract Syntax Tree).
Chcete-li zkontrolovat, jak to funguje. Přejít na odkaz
Jakmile je strom vytvořen, přejde do tlumočníka .
Interpret &Compiler
V programovacím jazyce existují dva způsoby překladu do strojového jazyka, něco, čemu počítač rozumí.
Tlumočník , Překládáme a čteme soubory řádek po řádku za běhu.
Kompilátor , Pracuje s předstihem na vytvoření překladu kódu, který jsme napsali, a zkompiluje se do jazyka, kterému naše stroje rozumějí.
Na obrázku nahoře máme jazyk vysoké úrovně v Javascriptu, tlumočník bere kód jazyka vysoké úrovně řádek po řádku a vyplivne bajtový kód.
Kompilátor vezme kód jazyka na vysoké úrovni a vyplivne strojový kód. Takže to může dát CPU a CPU může skutečně spustit kód.
Interpreter nám tedy umožňuje spustit kód okamžitě a kompilátor a profiler nám umožňují optimalizovat kód za běhu.
Babel + TypeScript ḆṮ
Babel je kompilátor Javascriptu, který převezme váš moderní kód Javascript a vrátí JS kompatibilní s prohlížečem (starší kód JS).
Typescript je nadmnožinou Javascriptu, který se kompiluje až na Javascript.
Oba dělají přesně to, co kompilátory:Vezměte jeden jazyk a převeďte jej do jiného!
Výhody a nevýhody tlumočníka a kompilátoru:
- Spuštění a spuštění kompilátoru trvá trochu déle, ale kód se nakonec spustí rychleji.
- Tlumočník, který se opravdu rychle zprovozní, ale neprovádí žádné optimalizace.
❓ Existuje něco, co můžeme získat to nejlepší z obou? ❓
Ano, Google přišel s motorem V8 , který kombinuje tlumočník a kompilátor, známý jako JIT (Just In Time), aby byl motor rychlejší.
Pomocí Profileru , protože kód běží přes náš interpret, který našemu prohlížeči říká, co má dělat, když se stejný řádek kódu spustí několikrát. Ve skutečnosti předáme část kódu kompilátoru / kompilátoru JIT a kompilátor vezme kód a zkompiluje ho nebo jej upraví.
Je Javascript interpretovaný jazyk ❓
Ano, když poprvé vyšel Javascript, měli jste Javascript engine, jako je spider monkey, který interpretoval Javascript na bajtový kód, který říká prohlížeči, co má dělat. Ale nyní také používáme kompliátor k optimalizaci kódu.
Zásobník paměti a zásobník hovorů 📚
Hromadu paměti je místo pro ukládání všech informací a zápis informací. Tímto způsobem máme místo pro alokaci paměti, využití paměti a uvolnění paměti.
Zásobník hovorů musí v kódu sledovat, kde se nacházíme.
Přetečení zásobníku
Rekurze je jedním z nejběžnějších způsobů, jak vytvořit přetečení zásobníku nebo mnoho funkcí vnořených do sebe, aby zásobník rostl a rostl. 🤯
Chyba bude vypadat takto:
Uncaught RangeError:Maximální velikost zásobníku volání byla překročena
Odvoz odpadu ⃥
Javascript je jazyk shromažďovaný nesmysly.
To znamená, že když jsme vytvořili jakýkoli objekt, a po provedení, pokud objekt již nepotřebujeme, pak ho za nás vyčistí.
Javascript automaticky uvolní tuto paměť, kterou již nepoužíváme.
❓❓Jak funguje garbage collection v Javascriptu? ❓❓
⇒ Používá algo mark and sweep.
Únik paměti 📝
Únik paměti je část paměti, kterou aplikace v minulosti používala, ale již ji nepotřebuje, ale nebyla nám vrácena zpět do chudé volné paměti.
Spuštěním pod úryvkem spustíme nekonečnou smyčku, která neustále posouvá i-1 znovu a znovu, dokud nezaplníme naši paměť a nezbude nám nic k použití, což způsobí pád našeho prohlížeče.
Příklad:
let array = [];
for(let i = 5; i > 1; i++) {
array.push(i-1);
}
Toto je několik úniků paměti, ke kterým došlo:
- Nemějte příliš mnoho globálních proměnných
-
Posluchač událostí
Nikdy neodeberete níže uvedené addEventListener , když je nepotřebujete. Takže pokračujte v přidávání posluchačů událostí.
var el = document.getElementById('button') el.addEventListener('click', onclick) -
nastavitInterval
Poběží nepřetržitě, takže když je nepotřebujete, musíme použít clearInterval.
Jedno vlákno 🧵
Javascript je jednovláknový jazyk, protože má pouze jeden zásobník volání. Zásobník volání nám umožňuje spouštět kód jeden po druhém a díky tomu je Javascript synchronní, takže se může stát vždy jen jedna věc.
Není to pouze JS engine, který spouští kód, Javascript runtime je zde také, který se postará o běžící úlohy.
Javascript Runtime 🏃🏻♂️
Webový prohlížeč pracuje na pozadí, zatímco běží synchronní kód Javascript a ke komunikaci využívá webové rozhraní API. Takže Javascript engine ví, že jsou nějaká data, která je potřeba udělat na pozadí.
Web API je dodáván s prohlížečem. Tato webová rozhraní API mohou dělat mnoho věcí, jako je odesílání požadavku http, naslouchání události DOM, zpoždění provádění pomocí zpětného volání, ukládání do databáze.
Příklad:
Pokud otevřete okno protokolu konzoly, pochopíte, jaké vlastnosti poskytuje prohlížeč.
console.log(window)
Prohlížeč používá jazyky C++ k provedení všech výše uvedených operací.
Tato webová rozhraní API se nazývají asynchronní.
Takže pokud nějaké zpětné volání nebo volání webového rozhraní API jako setTimeout přejde na call stack pak nebude rozumět, co s tím, tak pošle zpětné volání na webové API a webové API se o to postará. Jakmile bude webové API provedeno se zpětným voláním, odešle se do fronty zpětných volání a od této chvíle se o to bude starat smyčka událostí. Smyčka událostí bude komunikovat se zásobníkem volání a frontou zpětných volání, takže pokud je zásobník volání prázdný, přidejte úlohu fronty zpětných volání do zásobníku volání.
Příklad:
console.log("1");
setTimeout(() ⇒ {
console.log("2")
}, 1000)
console.log("3")
// OUTPUT:
// 1
// 3
// 2
Podívejme se, jak běží výše uvedený příklad:
přidali jsme 1. konzoli do zásobníku volání a přihlásili jsme se do konzole a poté tento kód ze zásobníku volání odstranili.
Nyní bylo přidáno setTimeout zavolat zásobník, který si okamžitě myslí, že setTimeout je webové API, takže call stack neví, co s tím dělat, takže call stack odešle setTimeout na webové API.
Poté přejdeme na další řádek a zkontrolujeme jeho protokol konzoly, poté se přihlásíme do konzoly a poté tento kód odstraníme ze zásobníku volání.
Nyní za webovým rozhraním API spustí časovač na 1 sekundu, a jakmile tato 1 sekunda uplyne, spustí se zpětné volání, tj. console.log("2") . Potom console.log("2") bude přesunuto do fronty zpětných volání, poté smyčka událostí, která nepřetržitě běží, zkontroluje, zda je zásobník volání prázdný?
Smyčka událostí běží pouze tehdy, když je zásobník volání prázdný a celý soubor JS je přečten. Smyčka událostí tedy nevloží nic do zásobníku volání z fronty zpětných volání, dokud není zásobník volání prázdný.
Po vymazání bude smyčka událostí trvat console.log("2") a tisky.
Reference 🧐
- Lupa
- Běh Javascriptu
| 👩🏻💻 suprabha.me |