自檢:前端知識清單——執(zhí)行機制

前言

題目來自ConardLi的blog
寫的是自己的題解,水平有限,所以僅供參考
代碼會整合在github,覺得有幫助就給個star吧~

正文

一、Javascript基礎

執(zhí)行機制

1队萤、為何try里面放return,finally還會執(zhí)行矫钓,理解其內(nèi)部機制

因JavaScript依靠著語句的Completion Record類型要尔,在語句的復雜嵌套結構中,實現(xiàn)各種控制新娜。

  • try就屬于控制型語句赵辕,并且屬于對內(nèi)部有影響的語句
  • finally屬于控制型語句,并且屬于對內(nèi)部有影響的語句
  • return也屬于控制型語句概龄,但是他屬于對外部有影響的語句

因為finally中的內(nèi)容必須保證執(zhí)行还惠,所以try/catch執(zhí)行完畢,即使得到的結果是非normal型的完成記錄私杜,也必須要執(zhí)行finally

2蚕键、JavaScript如何實現(xiàn)異步編程,可以詳細描述EventLoop機制

異步編程

ES6之前:
  • 回調(diào)函數(shù)
  • setTimeout
  • setInterval
  • Promise
  • 事件監(jiān)聽
ES6:
  • generator
ES6+:
  • async await

EventLoop機制:

  • JavaScript事件隊列每16ms循環(huán)一次衰粹,先執(zhí)行同步隊列锣光,再執(zhí)行宏任務(第一次是執(zhí)行script里的內(nèi)容),后執(zhí)行微任務

掘金:這一次铝耻,徹底弄懂JavaScript的執(zhí)行機制

js引擎存在monitoring process進程誊爹,會持續(xù)不斷的檢查主線程執(zhí)行棧是否為空,一旦為空瓢捉,就會去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)频丘。

  • setTimeout&&setInterval

不是每過ms秒會執(zhí)行一次fn,而是每過ms秒泡态,會有fn進入Event Queue

3搂漠、宏任務和微任務分別有哪些

宏任務:

  • setTimeout
  • setInterval
  • setTmmediate
  • promise中的executor

微任務:

  • Promise
  • messageChannel
  • mutationObersve
  • process.nextTick

4、可以快速分析一個復雜的異步嵌套邏輯兽赁,并掌握分析方法

題目一:

async function async1() {
    console.log("async1 start");
    await  async2();
    console.log("async1 end");
}

async  function async2() {
    console.log( 'async2');
}

console.log("script start");

setTimeout(function () {
    console.log("settimeout");
},0);

async1();

new Promise(function (resolve) {
    console.log("promise1");
    resolve();
}).then(function () {
    console.log("promise2");
});

console.log('script end');

同步隊列->微任務->宏任務

輸出順序:
script start
async1 start
async2
promise1
script end

async1 end
promise2

settimeout

async await的代碼到底做了些什么状答,我們可以來寫一下



5、使用Promise實現(xiàn)串行

.then調(diào)用

6刀崖、Node與瀏覽器EventLoop的差異

暫時不會

7惊科、如何在保證頁面運行流暢的情況下處理海量數(shù)據(jù)

分頁,worker

8亮钦、冒泡和捕獲的機制

你有沒有想過馆截,在單擊按鈕的同時,你也單擊了按鈕的容器元素蜂莉,甚至也單擊了整個頁面蜡娶。

事件冒泡
IE的事件流叫做事件冒泡(event bubbling),即事件開始時由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接收映穗,然后逐級向上傳播到較為不具體的節(jié)點(文檔)窖张。

事件捕獲
Netscape Communicator 團隊提出的另一種事件流叫做事件捕獲(event capturing)。其思想是不太具體的節(jié)點應該更早接收到事件蚁滋,而最具體的節(jié)點應該最后接收到事件宿接。事件捕獲的用意在于事件到達預訂目標之前捕獲它。


9辕录、script defer與async

  • <script src="script.js"></script>
    沒有 defer 或 async睦霎,瀏覽器會立即加載并執(zhí)行指定的腳本,“立即”指的是在渲染該 script 標簽之下的文檔元素之前走诞,也就是說不等待后續(xù)載入的文檔元素副女,讀到就加載并執(zhí)行。

  • <script async src="script.js"></script>
    有 async蚣旱,加載和渲染后續(xù)文檔元素的過程將和 script.js 的加載與執(zhí)行并行進行(異步)碑幅。

  • <script defer src="myscript.js"></script>
    有 defer,加載后續(xù)文檔元素的過程將和 script.js 的加載并行進行(異步)姻锁,但是 script.js 的執(zhí)行要在所有元素解析完成之后枕赵,DOMContentLoaded 事件觸發(fā)之前完成。

在現(xiàn)實當中位隶, 延遲腳本并不一定會按照順序執(zhí)行拷窜,也不一定會在 DOMContentLoaded 事件觸發(fā)前執(zhí)行, 因此最好只包含一個延遲腳本涧黄。
——澤卡斯(Zakas. Nicholas C.). JavaScript高級程序設計(第3版) (圖靈程序設計叢書) (Kindle 位置 639-641). 人民郵電出版社. Kindle 版本.

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末篮昧,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子笋妥,更是在濱河造成了極大的恐慌懊昨,老刑警劉巖,帶你破解...
    沈念sama閱讀 223,002評論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件春宣,死亡現(xiàn)場離奇詭異酵颁,居然都是意外死亡嫉你,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評論 3 400
  • 文/潘曉璐 我一進店門躏惋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來幽污,“玉大人,你說我怎么就攤上這事簿姨【辔螅” “怎么了?”我有些...
    開封第一講書人閱讀 169,787評論 0 365
  • 文/不壞的土叔 我叫張陵扁位,是天一觀的道長准潭。 經(jīng)常有香客問我,道長域仇,這世上最難降的妖魔是什么刑然? 我笑而不...
    開封第一講書人閱讀 60,237評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮殉簸,結果婚禮上闰集,老公的妹妹穿的比我還像新娘。我一直安慰自己般卑,他們只是感情好武鲁,可當我...
    茶點故事閱讀 69,237評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著蝠检,像睡著了一般沐鼠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上叹谁,一...
    開封第一講書人閱讀 52,821評論 1 314
  • 那天饲梭,我揣著相機與錄音,去河邊找鬼焰檩。 笑死憔涉,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的析苫。 我是一名探鬼主播兜叨,決...
    沈念sama閱讀 41,236評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼衩侥!你這毒婦竟也來了国旷?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 40,196評論 0 277
  • 序言:老撾萬榮一對情侶失蹤茫死,失蹤者是張志新(化名)和其女友劉穎跪但,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峦萎,經(jīng)...
    沈念sama閱讀 46,716評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡屡久,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,794評論 3 343
  • 正文 我和宋清朗相戀三年忆首,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片被环。...
    茶點故事閱讀 40,928評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡雄卷,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蛤售,到底是詐尸還是另有隱情,我是刑警寧澤妒潭,帶...
    沈念sama閱讀 36,583評論 5 351
  • 正文 年R本政府宣布悴能,位于F島的核電站,受9級特大地震影響雳灾,放射性物質發(fā)生泄漏漠酿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,264評論 3 336
  • 文/蒙蒙 一谎亩、第九天 我趴在偏房一處隱蔽的房頂上張望炒嘲。 院中可真熱鬧,春花似錦匈庭、人聲如沸夫凸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,755評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽夭拌。三九已至,卻和暖如春衷咽,著一層夾襖步出監(jiān)牢的瞬間鸽扁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,869評論 1 274
  • 我被黑心中介騙來泰國打工镶骗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留桶现,地道東北人。 一個月前我還...
    沈念sama閱讀 49,378評論 3 379
  • 正文 我出身青樓鼎姊,卻偏偏與公主長得像骡和,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子此蜈,可洞房花燭夜當晚...
    茶點故事閱讀 45,937評論 2 361

推薦閱讀更多精彩內(nèi)容