摘要:譯者注翻譯一個對新手比較友好的工作原理解析系列文章注意以下全部是概念經驗豐富的老鳥可以離場啦正文從這里開始隨著的流行團隊們正在利用來支持多個級別的技術棧包括前端后端混合開發嵌入式設備以及更多這篇文章旨在成為深入挖掘和實際上他是怎么工作的系列
譯者注
翻譯一個對新手比較友好的 JavaScript 工作原理解析系列文章
注意: 以下全部是概念,經驗豐富的老鳥可以離場啦正文從這里開始
隨著 javascript 的流行,團隊們正在利用javascript來支持多個級別的技術棧,包括前端,后端,混合開發,嵌入式設備,以及更多
這篇文章旨在成為深入挖掘JavaScript和實際上他是怎么工作的系列文章中的第一篇:我們通過知道javascript的模塊(Building blocks)和他們如何組合在一起工作來寫更好的代碼和應用.我們還會分享一些我們構建sessionStarck(這是一款主打反饋功能的產品)時的經驗法則,一款輕量級的javascript應用為了保持競爭力,必須時要健壯和高性能.
據githut stats(這是一個統計網站,根據gihub的數據來進行語言統計)的數據來看 , JavaScript 是github 上 活躍庫最多的,和提交數最多的語言,這讓他不會落后于其他類別.
如果項目變得如此依賴于JavaScript,這就意味著,為了開發驚艷的軟件(可以理解為程序),開發者不得不利用這個語言和生態系統(JavaScript生態)提供的一切,對內部的更深入和更深入的了解.
事實證明,有很大一部分的開發者每天都在使用javascript,但是卻不知道javascript 在底層干了啥(原文很長,其實就是這個意思,英文還真的是...)
Overview基本上每個人都知道 v8 引擎這個概念了,大多數人知道javascript 是一個單線程語言 或者是那個使用回調隊列的語言.
這篇文章,我們將跑通哪些概念的細節和說明javascript是如何運行的,通過知道這些細節,你能夠正確的使用提供的api書寫更好的,非阻塞的應用.
如果你是一個javascript新手,這篇文章能讓你知道為什么javascript對比與其他語言,為什么如此神奇.
如果你是一個有經驗的javascript開發者,我也希望如此,這會給你一些關于javascript運行時是怎么工作的閃亮的靈感(或者說新的見解).
javascript引擎google v8 引擎是一個了流行的例子,nodejs 和 chrome 都是使用這個引擎,這里是一個簡單的他看起來是什么的圖
這個引擎看起來像是兩個組件.
memory Heap: 這是內存分配的位置
call Stack: 這是你的代碼執行時,堆棧幀(starck frame)的位置
運行時在瀏覽器中有一些api已經被幾乎所有的javascript開發者使用了,例如 setTimeout 這些api,然而,他們不是又引擎提供的.
那么,他們從哪里來的呢?
其實這有點復雜.
看,我們有引擎,但是其實我們還有很多東西.我們有那些瀏覽器提供的web apis,例如 DOM, AJAX, setTimeout等等.
而且,我們還有流行的事件循環(even loop)和回調隊列(callback queue)
調用棧(回調隊列跟調用棧其實意思差不多,不過棧跟隊列是兩種不同的數據結構)javascript是一個單線程的編程語言(repeat又repeat,都說幾次了),這意味著他有一個調用棧,因此,他一次只能做一件事情.
調用棧是一個記錄了我們在程序中的位置的數據結構,如果我們跳進一個function,我們把這個函數放進棧的頂部(棧是一種先進后出的數據結構),如果我們從function中return出來,我們就從棧的頂部跳了出來,這就是棧能做的事情.
讓我們來看一個例子:
function multiply(x, y) { return x * y; } function printSquare(x) { var s = multiply(x, x); console.log(s); } printSquare(5);
當引擎執行這段代碼的時候,調用棧(call stack)是空的,當進入printSquare的時候,棧上添加了一個函數,在printSquare中我們又進入了multiply中,此時棧的頂部又添加了一個函數,當我們從multiply中return的時候,棧就把頂部的函數彈出,此時我們就回到了printSquare里,然后執行完printSquare后引擎自動return undefined 以結束這個函數的執行.
棧的每一次變化就想下面這樣:
棧中的每一個條目(entry)叫坐堆棧幀(stack frames)上面有提到
這就是一個異常拋出時,棧追蹤是如何被構造的(how stack traces are being constructed)---這取決于異常發生的時候,回調棧的狀態.(突然跑異常去了,其實是想說明,異常就是通過調用棧實現的)
function foo() { throw new Error("SessionStack will help you resolve crashes :)"); } function bar() { foo(); } function start() { bar(); } start();
如果這段代碼在chrome執行,會產生下邊的棧追蹤(其實就是一個錯誤)
"棧壞了"(blowing the stack) --- 這發生在當你把棧放滿了的時候(下面還說了一大推,還貼了代碼,其實就是死遞歸)
當引擎執行死遞歸的時候,會不停的調用同一個方法.看起來像下面這樣.
然而,函數在調用棧上調用的數量超過了調用棧的實際大小,瀏覽器決定要采取行動了,所以他拋出了一個錯誤,看起來是這樣的
在單線程上運行代碼可以很容易,因為你不用去處理多線程中的復雜場景,例如,死鎖.
但是,運行在單線程上也有他的限制,由于javascript只有一個調用棧,若是程序執行得很慢怎么辦?
并發和事件循環(even loop)當你有函數調用在調用棧(call stack)里為了一個任務花費了大額的時間會發生什么?例如,想象一下,你要在瀏覽器了做一個復雜的圖片轉性(transfromation).
你可能會問--為什么這是一個問題?問題是調用棧有函數在運行,瀏覽器就不能做其他的事情,這就造成了阻塞,這意味這瀏覽器不能渲染,它不能運行任何的其他代碼,它卡住了,如果你想你的app 的ui界面流暢,那么這就是一個問題.
然而,這不是唯一的問題,一旦你的瀏覽器在調用棧開始了很多的任務,這可能會在很長的一段時間內失去響應.而很多的瀏覽器會拋出一個錯誤,然后問你是否要關閉網頁.
現在,這不是一個最好的用戶體驗,對吧?
那么,我們要如何處理這種需要很長時間執行的代碼呢?嗯~,解決辦法就是異步回調
這會再第二篇文章中詳細說明.
下面開始買他們產品的廣告了,就不翻譯了.
原文第二篇我會盡快翻譯,盡量不拖太久.
寫作新手,還望大家多多關注,多多點贊.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96533.html
摘要:自調用匿名函數打開源碼,首先你會看到這樣的代碼結構這是一個自調用匿名函數。這樣子最大程度防止外界的變量定義對內部造成影響 自調用匿名函數 打開jQuery源碼,首先你會看到這樣的代碼結構: (function(window,undefined){ //jquery code })(window); 這是一個自調用匿名函數。在第一個括號內,創建一個匿名函數;第二個括號內,立...
摘要:調用棧是單線程編程語言,意味著它只有單一的調用棧。調用棧是一種數據結構,基本記錄了程序運行的位置。舉個例子,先來看如下所示的代碼當引擎開始執行這段代碼時,調用棧將是空的。這正是拋出異常時棧追蹤的構造過程這基本上就是異常拋出時調用棧的狀態。 原文 How JavaScript works: an overview of the engine, the runtime, and the c...
摘要:判斷變量類型數據類型種操作符可能返回的值如下注意的能力有限,其對于類型返回的都是使用場景區分對象和原始類型要區分一種對象類型和另一種對象類型可以使用運算符或對象屬性運算符用法左邊的運算數是一個右邊運算數是對象類的名字或者構造函數返回或如果是 判斷變量類型 javaSctipt數據類型7種: Number, String, Boolean, Null, Undefined, Object...
摘要:譯者覺得作者的比喻很適合初學者理解,特此翻譯。進一步說,回調觸發的順序是不能被保證的。所以我不必擔心代碼在同一時間訪問同一個數據結構你確實理解了,這就是的單進程事件循環設計美麗的地方。 前言 總括 :這篇文章十分生動形象的的介紹了Node,滿足了讀者想去了解Node的需求。作者是Node的第一批貢獻者之一,德國前端大神。譯者覺得作者的比喻很適合初學者理解Node,特此翻譯。 譯者 :原...
摘要:深入系列第三篇,講解執行上下文棧的是如何執行的,也回答了第二篇中的略難的思考題。 JavaScript深入系列第三篇,講解執行上下文棧的是如何執行的,也回答了第二篇中的略難的思考題。 順序執行? 如果要問到 JavaScript 代碼執行順序的話,想必寫過 JavaScript 的開發者都會有個直觀的印象,那就是順序執行,畢竟: var foo = function () { ...
閱讀 3725·2021-10-11 10:59
閱讀 1307·2019-08-30 15:44
閱讀 3484·2019-08-29 16:39
閱讀 2891·2019-08-29 16:29
閱讀 1805·2019-08-29 15:24
閱讀 812·2019-08-29 15:05
閱讀 1268·2019-08-29 12:34
閱讀 2323·2019-08-29 12:19