2020 前端面試 | 第二波面試題總結

時間 2020-02-15

原文原文鏈接

前言

哈，看樣子年後跳槽仍是你們比較關心的一件事情了，繼第一波面試題彙總的反響和評論，觀看和點讚的朋友們不少，我繼續將後續面試的一些內容寫出來，有不少面試題答案我本身寫的比較含糊，可是在面試了條的過程當中是描述的表較多的。畢竟寫文字要寫出來太多了。我也只是寫了一個大概，若是對答案不太滿意的同窗能夠自行查詢標準答案哈。css

2020 前端面試 | 第以波面試題總結html

對了，有不少朋友說面試題過於簡單都是基礎之類的，實際上我自己也就是一個初中級的水平，因此面試的公司職位和對應的薪資匹配的就是這類的問題，算法題基本不多面試到。前端

薪資範圍: 11k-14kvue

技術能力：自身能力強和擴展性高的能夠本身跟HR多談多要react

面試建議：請勿態度高冷，聊天請等對方說完在回答，切勿抱怨和說上家公司的缺點webpack

面試重點：JavaScript基礎須要掌握得好，即便有些框架的原理和區別說不上來也沒事ios

最後總結：本人還在面試中，若有貴公司在招聘初中級請聯繫我哈web

面試題彙總

請描述一下 React 和 Vue的區別

這道題你若是熟知的話，從各個方面的不一樣點，原理，爲何這樣實現來描述，起嗎聊個半個小時。後續就不會問你太多問題了。面試

1.設計思想
    vue的官網中說它是一款漸進式框架，採用自底向上增量開發的設計。
    
    react主張函數式編程，因此推崇純組件，數據不可變，單向數據流，固然須要雙向的地方也能夠手動實現，
    好比藉助 onChange 和 setState 來實現一個雙向的數據流。
2.編寫語法
    Vue推薦的作法是webpack+vue-loader的單文件組件格式，vue保留了html、css、js分離的寫法
    
    React的開發者可能知道，react是沒有模板的，直接就是一個渲染函數，它中間返回的就是一個虛擬DOM樹，
    React推薦的作法是  JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'。
3.構建工具
    vue提供了CLI 腳手架，能夠幫助你很是容易地構建項目。
    
    React 在這方面也提供了 create-react-app，可是如今還存在一些侷限性，不能配置等等
4.數據綁定
    vue是實現了雙向數據綁定的mvvm框架，當視圖改變動新模型層，當模型層改變動新視圖層。
    在vue中，使用了雙向綁定技術，就是View的變化能實時讓Model發生變化，而Model的變化也能實時更新到View。
    (這裏咱們能夠繼續深刻講解一下雙向數據綁定的原理，我以前的文章手寫Vue源碼可參考)
    
    react是單向數據流，react中屬性是不容許更改的，狀態是容許更改的。
    react中組件不容許經過this.state這種方式直接更改組件的狀態。自身設置的狀態，能夠經過setState來進行更改。
    (注意：React中setState是異步的，致使獲取dom可能拿的仍是以前的內容，
    因此咱們須要在setState第二個參數（回調函數）中獲取更新後的新的內容。)
    
    【這裏若是你瞭解深刻的話能夠嘗試描述一下React中setState的異步操做是怎麼實現的，Vue中的更新是經過微任務等】
5.diff算法
    vue中diff算法實現流程：
        1.在內存中構建虛擬dom樹
        2.將內存中虛擬dom樹渲染成真實dom結構
        3.數據改變的時候，將以前的虛擬dom樹結合新的數據生成新的虛擬dom樹
        4.將這次生成好的虛擬dom樹和上一次的虛擬dom樹進行一次比對(diff算法進行比對)，來更新只須要被替換的DOM，
        而不是所有重繪。在Diff算法中，只平層的比較先後兩棵DOM樹的節點，沒有進行深度的遍歷。
        5.會將對比出來的差別進行從新渲染
        
    react中diff算法實現流程:
        DOM結構發生改變-----直接卸載並從新create
        DOM結構同樣-----不會卸載,可是會update變化的內容
        全部同一層級的子節點.他們均可以經過key來區分-----同時遵循1.2兩點
        (其實這個key的存在與否只會影響diff算法的複雜度,換言之,你不加key的狀況下,
        diff算法就會以暴力的方式去根據一二的策略更新,可是你加了key,diff算法會引入一些另外的操做)
    
複製代碼

React會逐個對節點進行更新，轉換到目標節點。而最後插入新的節點，涉及到的DOM操做很是多。diff總共就是移動、刪除、增長三個操做，而若是給每一個節點惟一的標識（key），那麼React優先採用移動的方式，可以找到正確的位置去插入新的節點。算法

vue會跟蹤每個組件的依賴關係，不須要從新渲染整個組件樹。而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制。

以上內容來自於Vue 和 React 的優勢分別是什麼？，你們說的越多理解的越深越好。我只說了其中的三點。

前端經常使用的數據請求格式有哪些？都有些什麼特色？

這個問題在http中已經回答了一部分了，這裏就在單獨詳細的描述一下使用場景

Get/Post/Delete/Patch/Put常常用的這五種，其餘的就不說了

一般：
    咱們使用Get請求來獲取數據
    咱們使用Post請求來發送數據
    咱們使用Put請求來更新數據
    咱們使用Delete請求來刪除數據
    咱們使用Patch請求用於對資源應用部分修改。
Get和Post的區別：
    1.Get 請求能緩存，Post 不能
    2.Post 相對 Get 安全一點點，由於Get 請求都包含在 URL 裏，
    （固然你想寫到 body 裏也是能夠的），且會被瀏覽器保存歷史紀錄。Post 不會，可是在抓包的狀況下都是同樣的。
    4.URL有長度限制，會影響 Get 請求，可是這個長度限制是瀏覽器規定的，不是 RFC 規定的
    5.Post 支持更多的編碼類型且不對數據類型限制
複製代碼

二次封裝axios，描述一下你在項目中封裝axios的思路和想法

關於axios等封裝，我以前有一篇簡易封裝axios的文章，你們能夠簡單參考。

一般來講，咱們在二次封裝axios，通常會引入UI組件的一些Message和Loading組件用來作提示信息。
    1.經過獲取存儲在瀏覽器端，或者是vuex中的token信息，判斷是否跳轉登陸頁面
    2.在獲取到token的狀況下設置自定義請求頭部信息
    3.在響應事件中，根據返回的不一樣狀態碼，根據業務需求，使用switch判斷跳轉頁面仍是發出提示信息。
    4.封裝請求和響應事件的返回結果，使用Promise封裝。
    5.增長請求loading和提示信息。
簡單版本大體如上，複雜版本須要根據業務進行對應的封裝。
複製代碼

請介紹一下this

其實大部分狀況下能夠用一句話來歸納，this老是指向調用該函數的對象。

對於常規的函數來講，誰調用該函數，this就指向該調用者，全局環境下調用函數執行，this指向window

對於箭頭函數的this總結以下：

箭頭函數不綁定this，箭頭函數中的this至關於普通變量。

箭頭函數的this尋值行爲與普通變量相同，在做用域中逐級尋找。

箭頭函數的this沒法經過bind，call，apply來直接修改（能夠間接修改）。

改變做用域中this的指向能夠改變箭頭函數的this。

描述this問題，這裏咱們能夠擴展說明如何去改變this指向，經過bind，call，apply，而後說說他們的區別，懂得多的話，
能夠說說他們的實現原理，或者手寫bind，call，apply的實現。
複製代碼

請介紹一下節流函數和防抖函數，簡單實現節流函數和防抖函數

「節流」與「防抖」的本質： 這兩個東西都以閉包的形式存在。

它們經過對事件對應的回調函數進行包裹、以自由變量的形式緩存時間信息，最後用 setTimeout 來控制事件的觸發頻率。

防抖函數：有這樣一個按鈕，他提供查看你將來老婆的樣子，當你在必定時間內屢次點擊查詢時，他只會在你最後一次點擊之後，
採起執行查詢操做。

節流函數：當你在玩LOL的時候，你在放出大招後的一段時間內，再次點擊放大招是不啓做用的，由於有一個冷卻時間。

代碼我就不寫在這裏了，簡易版本的很簡單，完整版封裝通常咱們都使用lodash封裝好的。
複製代碼

請介紹一下Eventloop(事件循環)

搞懂 Event Loop，是理解 Vue 對 DOM 操做優化的第一步。

Micro-Task 與 Macro-Task
事件循環中的異步隊列有兩種：macro（宏任務）隊列和 micro（微任務）隊列。

常見的 macro-task 好比： 
    setTimeout、setInterval、 setImmediate、script（總體代碼）、 I/O 操做、UI 渲染等。
常見的 micro-task 好比: 
    process.nextTick、Promise、MutationObserver 等。
    
你們也知道了當咱們執行 JS 代碼的時候其實就是往執行棧中放入函數，當遇到異步的代碼時，會被掛起並在須要執行的時候，
加入到 Task（有多種 Task） 隊列中。
一旦執行棧爲空，Event Loop 就會從 Task 隊列中拿出須要執行的代碼並放入執行棧中執行，
因此本質上來講 JS 中的異步仍是同步行爲。

因此 Event Loop 執行順序以下所示：

首先執行同步代碼，這屬於宏任務
當執行完全部同步代碼後，執行棧爲空，查詢是否有異步代碼須要執行
執行全部微任務
當執行完全部微任務後，若有必要會渲染頁面
而後開始下一輪 Event Loop，執行宏任務中的異步代碼，也就是 setTimeout 中的回調函數

這裏不少人會有個誤區，認爲微任務快於宏任務，實際上是錯誤的。
由於宏任務中包括了 script ，瀏覽器會先執行一個宏任務，接下來有異步代碼的話纔會先執行微任務。
複製代碼

請用一個例子來形象的描述原型鏈

哈，這個問題我在沸點有發過一個形象的比喻，給面試官逗笑了。

每一個門派都有一個祖師爺。

學徒在山上學藝，學成下山後謹記師門教導，施展一身武藝。

恰逢一日對敵，面對敵人的怪異武功，師門好像不曾教過破解之法，便高喊一聲祖師爺救我，

剎那間一道白光降於頭頂，祖師爺靈魂附體，一套精絕凌厲的拳法殺得敵人措手不及。

但敵人也極是難纏，恐怕非要那門傳說中從天而降的掌法才能制敵。

你心中暗自着急，催促着祖師爺趕快發招，這時只聽身內傳來了祖師的聲音：

「MD這破掌法當年偷懶沒學，我去把我師祖也叫來問問...」

每一個門派(FunctionX)都有一個祖師爺(prototype)。

學徒(object)在山上學藝(= new FunctionX)，學成下山後謹記師門教導，

施展一身武藝(http://object.xxxobject.xxx)。

恰逢一日對敵，面對敵人的怪異武功，師門好像不曾教過破解之法(object對象沒有yyy方法)，

便高喊一聲祖師爺救我，剎那間一道白光降於頭頂，祖師爺(__proto__)靈魂附體，

一套精絕凌厲的拳法殺得敵人措手不及(繼續尋找原型中是否有yyy方法)。

但敵人也極是難纏，恐怕非要那門傳說中從天而降的掌法才能制敵。你心中暗自着急，

催促着祖師爺趕快發招，這時只聽身內傳來了祖師的聲音：

「MD這破掌法當年偷懶沒學，我去把我師祖也叫來問問...」（若是原型中沒有yyy方法，則繼續查找原型的原型，是謂原型鏈）
複製代碼

請介紹一下回流（Reflow）與重繪（Repaint）

迴流：當咱們對 DOM 的修改引起了 DOM 幾何尺寸的變化（好比修改元素的寬、高或隱藏元素等）時，
瀏覽器須要從新計算元素的幾何屬性（其餘元素的幾何屬性和位置也會所以受到影響），
而後再將計算的結果繪製出來。這個過程就是迴流（也叫重排）。

重繪：當咱們對 DOM 的修改致使了樣式的變化、卻並未影響其幾何屬性（好比修改了顏色或背景色）時，
瀏覽器不需從新計算元素的幾何屬性、直接爲該元素繪製新的樣式（跳過了上圖所示的迴流環節）。這個過程叫作重繪。

由此咱們能夠看出，重繪不必定致使迴流，迴流必定會致使重繪。
硬要比較的話，迴流比重繪作的事情更多，帶來的開銷也更大。但這兩個說到底都是吃性能的，
因此都不是什麼善茬。咱們在開發中，要從代碼層面出發，儘量把迴流和重繪的次數最小化。
複製代碼