資訊專(zhuān)欄INFORMATION COLUMN
摘要：如果我們進(jìn)入一個(gè)函數(shù)，我們?cè)诙褩５捻敳??？纯聪旅娴拇a當(dāng)引擎開(kāi)始執(zhí)行此代碼時(shí)，調(diào)用堆棧將為空。之后，步驟如下調(diào)用堆棧中的每個(gè)條目稱(chēng)為堆棧幀。這正是拋出異常時(shí)構(gòu)造堆棧跟蹤的方式當(dāng)異常發(fā)生時(shí)，它基本上是調(diào)用堆棧的狀態(tài)。
隨著JavaScript越來(lái)越受歡迎，團(tuán)隊(duì)正在利用這個(gè)技術(shù)棧在多個(gè)層次- 前端，后端，混合應(yīng)用程序，嵌入式設(shè)備等等提供支持。
這篇文章旨在成為系列中第一個(gè)旨在深入挖掘JavaScript及其實(shí)際工作的系列文章：我們認(rèn)為，通過(guò)了解JavaScript的構(gòu)建方式以及它們?nèi)绾螀f(xié)同構(gòu)建，您將能夠編寫(xiě)更好的代碼和 應(yīng)用。
如GitHub統(tǒng)計(jì)所示，JavaScript在GitHub中的活躍庫(kù)數(shù)量和總推送數(shù)量位居前列。 在其他類(lèi)別中也不會(huì)落后于很多。
（查看最新的GitHub語(yǔ)言統(tǒng)計(jì)信息）。
如果項(xiàng)目越來(lái)越依賴(lài)JavaScript，這意味著開(kāi)發(fā)人員必須利用語(yǔ)言和生態(tài)系統(tǒng)提供的所有內(nèi)容來(lái)更深入地了解內(nèi)部?jī)?nèi)容，以便構(gòu)建出令人驚艷的軟件。
事實(shí)證明，有很多開(kāi)發(fā)人員每天都在使用JavaScript，但不知道什么會(huì)發(fā)生什么。
概覽幾乎所有人都已經(jīng)聽(tīng)說(shuō)過(guò)V8引擎的概念，大多數(shù)人都知道JavaScript是單線程的，或者是使用回調(diào)隊(duì)列。
在這篇文章中，我們將詳細(xì)介紹所有這些概念，并解釋JavaScript如何運(yùn)行。 通過(guò)了解這些細(xì)節(jié)，您將能夠編寫(xiě)更好的非阻塞應(yīng)用程序，正確利用提供的API。
如果您接觸JavaScript不久，此博文將幫助您了解為什么JavaScript與其他語(yǔ)言相比是如此“奇怪”。
如果您是一位經(jīng)驗(yàn)豐富的JavaScript開(kāi)發(fā)人員，希望能夠?yàn)槟峁┮恍┬碌囊?jiàn)解，了解您每天使用的JavaScript運(yùn)行時(shí)間是否真的有效。
JavaScript引擎JavaScript引擎的一個(gè)流行示例是Google的V8引擎。 例如，V8引擎在Chrome和Node.js中使用。 這是一個(gè)很簡(jiǎn)單的視圖：
引擎由兩個(gè)主要組成部分組成：
內(nèi)存堆 - 這是內(nèi)存分配發(fā)生的地方
調(diào)用堆棧 - 這是您的代碼執(zhí)行的堆棧幀
運(yùn)行時(shí)瀏覽器中已經(jīng)有幾個(gè)JavaScript開(kāi)發(fā)人員使用的API（例如“setTimeout”）。 然而，引擎不提供這些API。
那么他們從哪里來(lái)？
事實(shí)證明，現(xiàn)實(shí)有點(diǎn)復(fù)雜。
所以，我們有引擎，但實(shí)際上還有更多。 我們有一些稱(chēng)為Web API的東西，由瀏覽器提供，如DOM，AJAX，setTimeout等等。
還有就是非常時(shí)髦的事件循環(huán)和回調(diào)隊(duì)列。
調(diào)用堆棧JavaScript是單線程編程語(yǔ)言，這意味著它有一個(gè)單一的調(diào)用堆棧。 因此，它可以一次做一件事。
調(diào)用堆棧是一個(gè)數(shù)據(jù)結(jié)構(gòu)，它基本上記錄了我們?cè)诔绦蛑惺裁次恢谩?如果我們進(jìn)入一個(gè)函數(shù)，我們?cè)诙褩５捻敳俊?如果我們從一個(gè)函數(shù)返回，我們從堆棧的頂部彈出。 這就是堆?？梢宰龅摹?/p>
我們來(lái)看一個(gè)例子。 看看下面的代碼：
function multiply(x, y) {
return x * y;
}
function printSquare(x) {
var s = multiply(x, x);
console.log(s);
}
printSquare(5);
當(dāng)引擎開(kāi)始執(zhí)行此代碼時(shí)，調(diào)用堆棧將為空。 之后，步驟如下：
調(diào)用堆棧中的每個(gè)條目稱(chēng)為堆棧幀。
這正是拋出異常時(shí)構(gòu)造堆棧跟蹤的方式 - 當(dāng)異常發(fā)生時(shí)，它基本上是調(diào)用堆棧的狀態(tài)。 看看下面的代碼：
function foo() {
throw new Error("SessionStack will help you resolve crashes :)");
}
function bar() {
foo();
}
function start() {
bar();
}
start();
如果這是在Chrome中執(zhí)行的（假設(shè)此代碼位于一個(gè)名為foo.js的文件中），則會(huì)產(chǎn)生以下堆棧跟蹤：
“Blowing the stack”? - 當(dāng)您達(dá)到最大調(diào)用堆棧大小時(shí)，會(huì)發(fā)生這種情況。 這可能會(huì)很容易發(fā)生，特別是如果您在不經(jīng)常地對(duì)代碼進(jìn)行測(cè)試的情況下使用遞歸。 看看這個(gè)示例代碼：
function foo() {
foo();
}
foo();
當(dāng)引擎開(kāi)始執(zhí)行這個(gè)代碼時(shí)，它首先調(diào)用函數(shù)“foo”。 然而，這個(gè)函數(shù)是遞歸的，并且開(kāi)始調(diào)用自身而沒(méi)有任何終止條件。 所以在執(zhí)行的每個(gè)步驟中，相同的功能被一次又一次地添加到調(diào)用堆棧中。 看起來(lái)像這樣：
然而，在某些時(shí)候，調(diào)用堆棧中的函數(shù)調(diào)用次數(shù)超過(guò)了調(diào)用堆棧的實(shí)際大小，并且瀏覽器決定采取行動(dòng)，通過(guò)拋出一個(gè)錯(cuò)誤，看起來(lái)像這樣：
在單個(gè)線程上運(yùn)行代碼可能非常容易，因?yàn)槟槐靥幚碓诙嗑€程環(huán)境中出現(xiàn)的復(fù)雜場(chǎng)景，例如死鎖。
但是在單線程上運(yùn)行也是非常有限的。 由于JavaScript有一個(gè)調(diào)用堆棧，當(dāng)運(yùn)行緩慢時(shí)會(huì)發(fā)生什么？
并發(fā)和事件循環(huán)當(dāng)您在調(diào)用堆棧中進(jìn)行函數(shù)調(diào)用需要大量時(shí)間才能處理時(shí)會(huì)發(fā)生什么？ 例如，假設(shè)您想在瀏覽器中使用JavaScript進(jìn)行一些復(fù)雜的圖像轉(zhuǎn)換。
你可能會(huì)問(wèn) - 為什么這甚至是一個(gè)問(wèn)題？ 問(wèn)題是，雖然調(diào)用堆棧具有執(zhí)行的功能，但瀏覽器實(shí)際上不能做任何事情 - 它被阻止。 這意味著瀏覽器無(wú)法渲染，它不能運(yùn)行任何其他代碼，它只是卡住了。 如果您想要在應(yīng)用中使用流暢的UI，這會(huì)產(chǎn)生問(wèn)題。
這不是唯一的問(wèn)題。 一旦您的瀏覽器開(kāi)始處理Call Stack中的這么多任務(wù)，它可能會(huì)停止響應(yīng)很長(zhǎng)時(shí)間。 大多數(shù)瀏覽器通過(guò)提出錯(cuò)誤來(lái)采取行動(dòng)，詢(xún)問(wèn)您是否要終止網(wǎng)頁(yè)。
現(xiàn)在，這不是最好的用戶體驗(yàn)，是嗎？
那么，如何在不阻塞UI并使瀏覽器無(wú)響應(yīng)的情況下執(zhí)行繁重的代碼呢？ 那么解決方案是異步回調(diào)。
這將在“JavaScript如何實(shí)際工作”教程的第2部分中更詳細(xì)地解釋?zhuān)骸癡8引擎內(nèi)有關(guān)如何編寫(xiě)優(yōu)化代碼的5個(gè)提示”。
翻譯自How JavaScript works: an overview of the engine, the runtime, and the call stack
關(guān)注我的公眾號(hào)，更多優(yōu)質(zhì)文章定時(shí)推送
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91939.html
摘要：調(diào)用棧是一種單線程編程語(yǔ)言，這意味著它只有一個(gè)調(diào)用堆棧。調(diào)用棧是一種數(shù)據(jù)結(jié)構(gòu)，它記錄了我們?cè)诔绦蛑械奈恢谩６疫@不是唯一的問(wèn)題，一旦你的瀏覽器開(kāi)始處理調(diào)用棧中的眾多任務(wù)，它可能會(huì)停止響應(yīng)相當(dāng)長(zhǎng)一段時(shí)間。 本文是旨在深入研究JavaScript及其實(shí)際工作原理的系列文章中的第一篇:我們認(rèn)為通過(guò)了解JavaScript的構(gòu)建塊以及它們是如何工作的，將能夠編寫(xiě)更好的代碼和應(yīng)用程序。我們還將分...
摘要：為了方便大家共同學(xué)習(xí)，整理了之前博客系列的文章，目前已整理是如何工作這個(gè)系列，可以請(qǐng)猛戳博客查看。以下列出該系列目錄，歡迎點(diǎn)個(gè)星星，我將更友動(dòng)力整理理優(yōu)質(zhì)的文章，一起學(xué)習(xí)。 為了方便大家共同學(xué)習(xí)，整理了之前博客系列的文章，目前已整理 JavaScript 是如何工作這個(gè)系列，可以請(qǐng)猛戳GitHub博客查看。 以下列出該系列目錄，歡迎點(diǎn)個(gè)星星，我將更友動(dòng)力整理理優(yōu)質(zhì)的文章，一起學(xué)習(xí)。 J...
摘要：調(diào)用堆棧是存放原始數(shù)據(jù)類(lèi)型的地方除了函數(shù)調(diào)用之外。上一節(jié)中聲明變量后調(diào)用堆棧的粗略表示如下。解釋改變的正確方法是更改內(nèi)存地址。在聲明時(shí)，將在調(diào)用堆棧上分配內(nèi)存地址，該值是在堆上分配的內(nèi)存地址。 這是專(zhuān)門(mén)探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 21 篇。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它們：...
摘要：無(wú)論你使用的是解釋型語(yǔ)言還是編譯型語(yǔ)言，都有一個(gè)共同的部分將源代碼作為純文本解析為抽象語(yǔ)法樹(shù)的數(shù)據(jù)結(jié)構(gòu)。和抽象語(yǔ)法樹(shù)相對(duì)的是具體語(yǔ)法樹(shù)，通常稱(chēng)作分析樹(shù)。這是引入字節(jié)碼緩存的原因。 這是專(zhuān)門(mén)探索 JavaScript 及其所構(gòu)建的組件的系列文章的第 14 篇。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 如果你錯(cuò)過(guò)了前面的章節(jié)，可以在這里找到它們： JavaS...
摘要：調(diào)用棧是一種數(shù)據(jù)結(jié)構(gòu)，它記錄了我們?cè)诔绦蛑械奈恢谩．?dāng)從這個(gè)函數(shù)返回的時(shí)候，就會(huì)將這個(gè)函數(shù)從棧頂彈出，這就是調(diào)用棧做的事情。而且這不是唯一的問(wèn)題，一旦你的瀏覽器開(kāi)始處理調(diào)用棧中的眾多任務(wù)，它可能會(huì)停止響應(yīng)相當(dāng)長(zhǎng)一段時(shí)間。 原文地址: https://blog.sessionstack.com... PS: 好久沒(méi)寫(xiě)東西了，最近一直在準(zhǔn)備寫(xiě)一個(gè)自己的博客，最后一些技術(shù)方向已經(jīng)敲定了，又可以...
閱讀 2328·2021-11-24 10:33
閱讀 1392·2019-08-30 15:43
閱讀 3285·2019-08-29 17:24
閱讀 3495·2019-08-29 14:21
閱讀 2233·2019-08-29 13:59
閱讀 1746·2019-08-29 11:12
閱讀 2820·2019-08-28 18:00
閱讀 1859·2019-08-26 12:17
