【面試】三年渣渣前端面試總結

lz最近剛剛找到工做，一直想找一個機會寫下本身的面試總結，因此趁着空閒的時間就把在面試過程當中遇到的一些問題給梳理出來。對本身的知識進行查漏補缺，也但願能夠幫助到正在找工做的你，話很少說，咱們直接看面試

聲明：本文只是對知識點進行梳理，lz會在關鍵地方給出具體連接，不會給出具體答案，具體的答案須要靠本身去搜索去總結，

1.HTML&CSS

• 語義化標籤
• 冒泡和捕獲
• 三欄佈局(浮動、定位、flex、BFC)
• 垂直居中、水平居中(這個至少得說出四種實現方式)
• 盒模型和如何更改盒模型(box-sizing)(當時面個人面試官說我這兩種模型說反了😭)
• css選擇器及優先級
• BFC
• position：inherit、static、relative、fixed、absolute
• z-index
• transition、animation、transform

面試題
①：如何使用CSS實現鼠標滑過一個元素控制另外一個元素的顯示與否
②：給你三個嵌套標籤，如何實現中間的點擊事件先觸發，而後最裏面一個最後是最外面的觸發

2.JavaScript

• null和undefined的區別
• let、const、var比較
• push、slice、filter、map等經常使用API的使用和內部實現(面試題見①)
• 必須掌握__proto__和prototype並能畫出原型圖(面試題見②)
• 閉包的理解，閉包帶來的好處和影響以及閉包的使用場景(可結合防抖節流來講)
• JavaScript繼承：原型繼承和class繼承(面試題見③)
• 箭頭函數的做用以及什麼狀況下不能使用箭頭函數
• JavaScript的事件執行機制
• JavaScript隱式轉換及規則
• call、apply、bind的異同以及內部實現
• new的模擬實現
• ES5模擬實現const
• Promise實現一、Promise實現二、Promise.all實現、Promise.race實現
• async await的實現原理(須要介紹Iterator、Generator)(面試題見④)
• async await promise的執行順序
• 實現ES6的class extends(要考慮靜態屬性方法)

①舉個🌰，在往數組中插入某一項方法有哪些？答：push、shift、slice、splice，這些API的執行速度是怎麼樣的？這就須要咱們知道它們的內部是如何實現的
②求下面代碼的值，並畫出原型圖解釋緣由

var F = new Function()
var obj = new F()
F.prototype.a = 1
obj.prototype.b = 2
obj.a = ???
obj.b = ???
複製代碼

③介紹幾種原型繼承以及他們的優缺點，請卸車class extend繼承的內部實現，擴展如何實現class內的靜態方法
④這一道題開放性很大，須要實現同步異步以及結合閉包嵌套執行

瀏覽器

• 進程和線程
• 瀏覽器由哪些進程組成
• 瀏覽器內核線程組成
• 瀏覽器多進程到JS單線程全面梳理
• 瀏覽器重繪(repaint)重排(reflow)與優化
• 瀏覽器的跨域方式
• 跨域-JSONP、CORS、NGINX反向代理
• V8的垃圾回收機制
• HTTP握手
• HTTP緩存
• HTTP狀態碼
• HTTP1.0 1.1 2.0作了哪些改進
• localStorage、sessionStorage、cookie、session

面試題
①狀態碼爲304時的數據處理過程？
②HTTP爲何須要三次握手四次揮手

數據結構和算法

• 鏈表結構特色
• 鏈表的插入刪除和雙向鏈表實現以及如何判斷閉環
• 二叉樹的遞歸和非遞歸實現
• 求二叉樹的高度和寬度(遞歸和非遞歸實現)
• 斐波那契數列第幾項以及前幾項的和(遞歸和非遞歸實現)，摸這裏
• 數組去重，此問題可升級爲一、數組中對象去重二、數組中對象屬性相同值不一樣去重
• 無序數組第k大數字(分數據量大小討論)
• 目標數字在數組中排第幾
• 求數組中最大的兩個值
• 字符串匹配([](){}這種類型)(面試題見①)
• 實現一個EventBus包含on、emit、once、off
• 常見的數組操做
• 只出現一次的數字Ⅰ/Ⅱ/Ⅲ
• 重建二叉樹

①🌰： (1){} 返回 false ， (){} 返回 true ，思路：

let obj = {
    '[': -1,
    ']': 1,
    '(': -2,
    ')': 2,
    '{': -3,
    '}': 3,
}
判斷執行過程當中，只要出現了字符不存在或者字符對應的值大於0就返回 false，不然返回 true
複製代碼

Vue

• 爲何使用v-for時必須添加惟一的key?
• Vue的雙向綁定原理(必問感受這已是面Vue的開場白)
• Vue單向數據流(結合props討論)
• Vue組件間通訊(父子組件，兄弟組件)
• Vue computed在何時初始化以及在何時開始計算的(須要瞭解源碼)
• Vuex的工做原理
• Vue與React的區別
• Vue高階組件(這個仍是有難度的)

其餘

1. 性能優化(能夠從DOM操做、JS代碼書寫、webpack懶加載CDN配置資源緩存Hash值、HTTP緩存以及你在項目中優化的任何點均可以說)
2. Git操做(工做區、暫存區和版本庫以及各類狀態之間的切換，merge與rebase的區別)
3. webpack(webpack懶加載、CDN配置、資源緩存、Hash值等方面)

工程

• Airbnb-開發規範
• 前端工程化
• 觀察者和發佈訂閱模式

推薦

• Vue源碼解析
• Redux源碼解析
• 正則表達式
• 前端優化最佳實踐
• 移動端適配

暫時先想這麼多吧，之後想到了再更新，你們面試若是在面試中遇到了什麼問題能夠留言討論

tips
①：若是面試官提問問題的時候必定不要沒在有聽懂題意就直接回答問題
②：在面試官提問出問題當你把基礎部分都回答過以後，必定要對問題中的一些點進行擴展回答，這是你能拿到offer的充分沒必要要條件謹記謹記謹記