今年前端的秋季社招做了一個總結

從7月份開放的簡歷，也收到了蠻多詢問和麵試，7月份算是招人旺季，需要跳槽的小夥伴抓住機會。一開始廣泛看面試題，沒抓住重點複習，有很多平時也沒怎麼用到，導致一開始面試的時候，問的問題看過，但是都記不清答得不太好，所以一開始的面試都掛了，但是之後針對性的補全知識之後就比較順利，也找到感覺了，基本上後面的面試都順利通過。面試了12家公司左右，有些高頻問題會標記次數/總次數，可供大家參考。

面試題記錄

js類

1. addEventListener,第三個參數的作用
2. 介紹JS有哪些內置對象？
3. 如何監聽dom的變動（Mutation Observer）
4. 如何編寫高性能的JavaScript？
5. 描述瀏覽器的渲染過程，DOM樹和渲染樹的區別？
6. 重繪和迴流（重排）的區別和關係？
7. 如何最小化重繪(repaint)和迴流(reflow)？
8. script 的位置是否會影響首屏顯示時間？
9. 箭頭函數和普通函數有什麼區別/箭頭函數的優點
10. promise的狀態（peding,fulfilled,rejected，狀態一旦確定不可更改）
11. call，apply，bind的作用與不同之處
12. 你知道幾種深拷貝的方法
13. 解釋JavaScript中的作用域與變量聲明提升？

html類

1. html5有什麼新的特性
2. 簡述一下你對HTML語義化的理解？
3. Doctype作用？標準模式與兼容模式各有什麼區別?
4. HTML5 為什麼只需要寫 ？
5. 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
6. 頁面導入樣式時，使用link和@import有什麼區別？
7. 介紹一下你對瀏覽器內核的理解？
8. 常見的瀏覽器內核有哪些？
9. html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
10. HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？
11. 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？
12. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
13. HTML5的form如何關閉自動完成功能？

css類

1. 簡述下flex佈局
2. CSS有哪些繼承屬性
3. 簡述下grid佈局
4. 你可以用幾種方式來實現水平垂直居中
5. css3有哪些新的屬性
6. 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什麼不同的？
7. 瞭解BFC嗎，BFC可以用來解決什麼問題
8. display:none和visibliy:hidden的區別
9. CSS選擇符有哪些？哪些屬性可以繼承？
10. CSS優先級算法如何計算？
11. CSS3新增偽類有那些？
12. 如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？
13. position的值relative和absolute定位原點是？

類（簡歷中有寫常用技術棧為vue）

1. 雙向綁定原理（頻率很高，建議在面試前手寫一個簡單的雙向綁定，有可能面試官會直接問compile，watcher，Observe，deps的功能和之間的聯繫）
2. vue3.0和2.0雙向綁定的區別，這樣的改動有什麼好處
3. vue-router的實現原理，history和hash模式有什麼區別
4. 虛擬dom為什麼效率高
5. Vue 組件 data 為什麼必須是函數
6. Vue computed 實現
7. Vue complier 實現
8. 怎麼快速定位哪個組件出現性能問題
9. 請描述vue生命週期
10. keep-alive是否與普通組件有一樣的生命週期，如果不是，它有哪些鉤子
11. vue如何實現seo/為什麼會被seo搜索到，ssr的生命週期與普通vue生命週期有什麼不一樣
12. computed如何得知數據變化/computed有緩存嗎
13. $nextTick原理
14. vue父子組件傳參有哪些方式
15. v-if和v-show有什麼區別

http類

1. 跨域有哪些方式，有些面試會問jsonp和Nginx的原理，其他的原理倒是沒怎麼問（★跨域面試必問）
2. jsonp回調函數參數格式/如何設置回調（類似這樣的問題，有點記不清了）
3. 後端修改請求頭，實現cros跨域時，在發送post請求之前會先發送什麼
4. 列舉一些http狀態碼，每一類起碼都要列出幾個來
5. http，tcp，ip各處在什麼層
6. http2.0與http1.x相比有哪些優化/http發展歷程
7. http都有哪些請求方式
8. 瞭解過http連接池嗎
9. 瀏覽器的緩存機制，如何實現協商緩存（etag）
10. 簡述從瀏覽器輸入地址到頁面渲染完成之間發生了什麼

性能類

1. 實際項目中做過的性能優化，優化之後效果怎麼樣（★性能優化幾乎必問）
2. 一個頁面中有大量的數據，如何優化頁面
3. 一個頁面中有大量的圖片，如何優化頁面
4. 圖片除了雪碧圖，還有什麼可以優化的方式
5. 為什麼gzip不壓縮圖片
6. 單頁應用的首屏優化
7. 請簡述cookie,localstorage,sessionstorage的區別(2/8)

技術其他類

1. 平時的工作中如何保證產品在不同瀏覽器中的兼容問題
2. 有考慮過前端模塊化的問題嗎
3. 對webpack有沒有了解，自己有寫過webpack配置文件嗎/是否有改過webpack的配置
4. 對腳手架工具有沒有了解，自己有實現過嗎
5. 搭建項目時會對整體的開發做哪些考慮/搭建項目時會考慮哪些因素，會做哪些規劃
6. 如何製作骨架屏
7. 是否瞭解過seo
8. 簡述mvc和mvvm
9. 請簡述重繪和重排
10. （如果簡歷有寫使用ts）簡述使用ts的好處

非技術類

1. 職業規劃，目前有沒有為下一個階段目標做什麼儲備工作
2. 如果有做過組長或類似管理經驗，會問平時的管理類工作有那些，如何管理組員和調配工作，或者績效考核的標準是什麼，怎樣帶領大家成長，怎樣提高大家的效率等問題（★如果簡歷有寫，必問）
3. 如果在工作中遇到產品提出一個急切的需求，在手頭有工作的情況下如何處理
4. 遇到奇葩需求或者不好做的需求如何處理
5. 離職原因（★）
6. 對行業的要求，對新公司和新團隊的期望等
7. 最近有在學什麼新技術嗎

最後

基礎知識非常重要。

有些時候你的技術範圍和麵試公司的可能不太一致，導致最後沒能拿到offer，也不要太難過，不一定是你的問題。

面試的時候會比較高密度的問各種問題，有很多在面試完之後忘記了，這裡只留下了部分。如果在面試過程中和麵試官有良性互動，聊的比較好的，基本上都能通過，就算很多問題答不出來也要讓面試官覺得你有潛力之類的（個人感覺僅供參考）。

最後祝大家面試順利，拿到心儀的offer。都看到這裡了轉發一下唄，關注並私信回覆“前端資源”可以獲取我個人整理的面試題，以及面試資料哦