【劉建】19道前端面試題

整體的感覺

近日參加了一次技術面試，由於提早準備不足，回答得很爛，因此憑藉記憶將被問到的問題所有記錄，仔細研究一下。

首先感謝那位面試官看了下我本身網站上的技術文章，雖然那個網站如今作得不是太好，不過之後有時間定會重點優化本人的網站。而後經過回答他的問題確實給我如何複習技術面試提供了有意義的參考，固然還有本身記憶力不錯的緣由（稍微誇下本身）；最後，經過與他的交流，發現他在技術研究上確實下了很多功夫，很是明確本身所問問題的答案，比不少喜歡問開放問題的面試官強很多。

此套面試題難度中等偏上。(若是是前端Leader崗位的技術面試，難度升級爲上等），徹底回答好而且有個好的工做背景應聘大部分公司的高級前端研發崗位問題不大（應聘大廠還須要複習算法和node），應聘技術專家或者架構師還需把我所擴展的問題務必答好。只要都答好，便可攻受互換，拿offer拿到手軟。

問題與答案

一、事件循環機制

同步和異步任務分別進入不一樣的執行環境，同步的進入主線程，即主執行棧，異步的進入 Event Queue 。主線程內的任務執行完畢爲空，會去 Event Queue 讀取對應的任務，推入主線程執行。 上述過程的不斷重複就是咱們說的 Event Loop (事件循環)。

二、堆和棧

當javascript代碼執行的時候會將不一樣的變量存於內存中的不一樣位置：堆（heap）和棧（stack）中來加以區分。其中，堆裏存放着一些對象。而棧中則存放着一些基礎類型變量以及對象的指針。 可是咱們上面說的執行棧和這裏的棧的意義卻有些不一樣。

三、虛擬dom是什麼？爲何操做虛擬dom會比操做真實dom更快？（最重要的問題，此題沒有答好，直接致使後續以此爲基礎的問題所有答崩）

回答這個問題前，首先須要瞭解下虛擬dom的建立流程
具體實現步驟以下
一、用 JavaScript 對象結構表示 DOM 樹的結構；而後用這個樹構建一個真正的 DOM 樹，插到文檔當中
二、當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別
三、把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新
因此虛擬DOM，就是用JS普通對象結構的一種映射。
用咱們傳統的開發模式，原生JS或JQ操做DOM時，瀏覽器會從構建DOM樹開始從頭至尾執行一遍流程。在一次操做中，我須要更新10個DOM節點，瀏覽器收到第一個DOM請求後並不知道還有9次更新操做，所以會立刻執行流程，最終執行10次。例如，第一次計算完，緊接着下一個DOM更新請求，這個節點的座標值就變了，前一次計算爲無用功。計算DOM節點座標值等都是白白浪費的性能。即便計算機硬件一直在迭代更新，操做DOM的代價仍舊是昂貴的，頻繁操做仍是會出現頁面卡頓，影響用戶體驗。
虛擬DOM就是爲了解決瀏覽器性能問題而被設計出來的。如前，若一次操做中有10次更新DOM的動做，虛擬DOM不會當即操做DOM，而是將這10次更新的diff內容保存到本地一個JS對象中，最終將這個JS對象一次性attch到DOM樹上，再進行後續操做，避免大量無謂的計算量。因此，用JS對象模擬DOM節點的好處是，頁面的更新能夠先所有反映在JS對象(虛擬DOM)上，操做內存中的JS對象的速度顯然要更快，等更新完成後，再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪製。
因此，用JS對象模擬DOM節點的好處是，頁面的更新能夠先所有反映在JS對象(虛擬DOM)上，操做內存中的JS對象的速度顯然要更快，等更新完成後，再將最終的JS對象映射成真實的DOM，交由瀏覽器去繪製。
前三道沒回答好，只有一個感受就是我能夠回家了

本人原文地址

百度搜索【前端劉建】或【全棧劉建】或【全棧工程師簡歷】能夠搜到更多本人寫的技術文章