前端面試總結2020年8月16家公司(附真實面試題)

入職新公司好幾天了，給你們分享下面試的經歷。

但願能對找工做的同窗有幫助。

1 爲何辭職？

馬老闆說了，離職無非兩個緣由，「一個是受委屈了，一個是錢少了」

我確實以爲錢少了，由於去年又買了一套房，兩套房貸壓着，而且也有了能夠漲薪的能力。但更重要的是以爲發展受限，我上家公司是家外包，18年10月份入職的，20年8月份離職。程序員若是深感技術受限，會很是焦慮的，也容易否認自我。

2年時間在項目中技術並無明顯的提高，一些新的知識點或者新的嘗試也不會讓你作，由於全部的任務都是上面分配下來的。因此對於大多數新的技能都是經過下班後本身的我的項目進行嘗試的。

身邊不少同事都是30多歲了，這個年紀跳出外包的機會比較小了，或者意味從此他們的程序員生涯都會在外包待着。

這不是我想要的生活，18年有面了自研公司，並且工資比外包高，因爲種種緣由，仍是選擇了外包，當初走錯了一條路，致使如今又要退回去走另一條。我但願在30歲前能真正理解前端這個行業，像一位老者回顧人生，能讀透。若是可能的話，我大概會在30歲前成爲真正的高級前端工程師，這兩天我也對本身作了新的規劃，但願真2023年能對如今的本身說，感謝曾經的你，我來接棒。

「當你想離職了，你要相信，你這個想法大機率是個正確決定」，這個時候不要猶豫，說明你已經意識到你不適合這裏了，抓緊走，越快越好。

本身今年有作了2個小項目，基礎功能作好了，還有不少問題，又時間再改。

簡祕網： 簡祕網：在線編輯簡歷的網站

手賺網 響應式的網站

手賺網後臺 後端用的是node+express+mongodb

2 面試經歷

換工做的想法是今年6月份就有了，有看掘金上面不少知識點的總結和相關面經，說實話，「這些面經大多用的上。」

我面試的公司有10幾家，有外包的，自研的，電話的，視頻的，現場的都有，外包是他們打過來的。給出的offer最高的是18.5k，最低16k，我工做經驗4年，這個工資基本是行情價。固然那些比較牛逼或是985,211的同窗拿的工資會高不少，可是畢竟少數，這裏不作討論。

我是在職的時候就去面試了，由於擔憂疫情緣由，招聘需求會減小。實際面試過程當中，前端的需求仍是較多的(可能也跟我最近2年沒有去面試，對前兩年的需求沒有感知有關) 有一些規律能夠給你們說一下，「大公司會把80%的時間花在問項目上，小公司或者外包會把80%時間問一些技術點上面」。

3 面試會問什麼

3.1 具體題型

爲了保證招聘公司能招聘到合適的員工，如下全部面試題都不會指出具體的公司。 如下問題分爲「必問題」，和「大機率問題」，「小几率問題」

這個機率值是經過對面試的這10幾個公司，作了全面的統計得出來的(「不具備普適性」)

有些問題你們都會，我就不貼答案了

必問題 必問題 必問題

1. vue響應式原理？詳細說一下過程。

能夠看一下 這篇文章 或者掘金相關文章。
真是必問題，不管外包仍是自研，仍是電話，都會問這個題。

什麼？你不要？好的niubi同窗

2.vue的生命週期

• 必問題，大概說一下每一個週期的特色
• 爲何會有生命週期
• 項目中有用到哪幾個鉤子函數
• ssr有哪幾個鉤子函數

vue相關面試總結，第3條

3.HTML5或者css3的新特性

這個問題雖然不是100%問到，可是絕大多數公司都問了，我就放入這個分類吧，你不會有意見吧（有意見我也不會聽啊）

• 你有用到哪些新標籤
• 新特性主要包括哪幾大塊？你項目中有用到哪些？
• canvas有用過嗎

4.做用域，閉包，原型鏈

• 說一下三者的概念參考第3條 第4條 第6條
• 原型鏈有什麼用處參考第6條
• 怎麼實現原型鏈繼承參考第12.1條
• 你項目中什麼地方用到了閉包？爲何要用閉包？閉包的原理是什麼？

好吧，這3個問題，從我入行起就一直被問。

5.es6

• 項目中有用到哪些es6的特性 (他重點想讓你說出箭頭函數和promise，毫無疑問他還準備了this相關的問題)
• 說下es5和es6箭頭函數中this的指向
• 有哪些辦法能夠改變this參考第5條
• promise怎麼使用？它解決了什麼問題？
• 怎麼中斷promise？ (能夠返回一個空的promise，既無resolve也沒有reject) 參考第13條，建議把整條都過一遍

6.性能優化

• 上個項目的性能優化是怎麼作的
• 代碼層面怎麼作性能優化
• webpack怎麼作性能優化

參考文章

大機率題 大機率題

大機率題是基本50%以上會被問到

1. flex

一些作移動端開發的大機率會問，尤爲是作ui-app的

• 有用過flex嗎
• 說下flex有哪些屬性
• 使用flex實現垂直居中
• 使用flex實現九宮格佈局

參考1-10

2. 響應式佈局

• 你知道哪幾種響應式佈局的方式
• 說下rem,em,px的區別
• 說下rem的實現

3. 塊元素有哪些

• 說下塊元素和行內元素的區別和特色
• 知道哪些空元素 (相似於img這樣的單標籤元素)

4. css中有哪些屬性是能夠繼承的

5. 瞭解css的動畫嗎？說下transform

6. vuex

• 項目中有用到vuex嗎
• 若是不用vuex有什麼其它的替代方案 (能夠說下其它的組件通訊方式)
• vuex有哪些優點和缺點 (功能強大，但相比eventBus會更重一點)
• vuex有哪些屬性 (5大屬性)
• 說一下vuex的action和mutation的區別
• 有看過vuex的源碼嗎 (老哥，如今是你的表演時間了)

參考文章第7條

7. 指令

• v-model的本質是什麼 (語法糖) 參考文章第17條
• .sync有用過嗎？它是怎麼用的 (本質仍是語法糖，父組件省略v-on事件)

8. vue的diff運算

• 看過相關源碼嗎
• 說下你的理解
• diff中的key有什麼做用

參考文章第11條

9.v-show 和 v-if的區別

參考文章第4條

10.vue路由

• 路由有哪幾種
• 說下這幾種路由的區別
• history須要後臺配置相關的url嗎

參考文章第9條

11.i18n

• 怎麼配置的
• 怎麼切換語言

12.看你用了socket,說一下它是怎麼通信的

13.2個頁面怎麼進行通信

• 同域名的2個頁面怎麼通信
• 不一樣域的2個頁面怎麼通信

14.虛擬dom

• 說下你對虛擬dom的理解
• 虛擬dom的實現原理
• 虛擬dom的優缺點

參考文章第12條 13 條

15.爲何data要設置成函數

參考文章第18 條

16.Computed和Watch

參考文章第24 條

17.長列表優化

• 項目中有用到渲染列表嗎
• 怎麼優化這種長列表
• 若是不作分頁呢？在前端有什麼辦法作優化

這個問題現場面試的時候，被問到了幾回，正常的是經過分頁優化的，可是若是不分頁呢？那我就須要作相似按需加載的方式了。能夠參考「雲中橋」的文章，寫的很是詳細了。

參考文章第30 條 以及雲中橋的這個系列文章

18.深拷貝與淺拷貝的區別

參考第7條

• 手寫深拷貝 參考第4條
• 怎麼實現淺拷貝 (object.asign)

19.數組

• 有用過數組的那些方法
• 怎麼實現數組去重

參考第8條

20.迴流和重繪

• 說一下二者的區別
• 說一下什麼場景會觸發

參考第3條

21.存儲

• 說一下瀏覽器的存儲方式和區別
• 說一下強緩存和協商緩存

參考第4條

22.http

• 說一下經常使用的http狀態碼
• 說一下請求頭包含哪些 參考第4-2條

23.瀏覽器的渲染流程

• 直接說渲染的流程就好了 參考第6-1條

小几率題

個別公司會問，小於50%

1. 說一下你怎麼封裝組件的

由於組件是複用的，咱們要考慮暴露出屬性和事件，供不一樣的地方引入，組件裏面也有動態和靜態的內容。

2. 怎麼建立一個三角形

4條邊框，3條透明，只顯示一條

參考1-4

3. 垂直居中

方法較多

參考1-6

4. link標籤和import標籤的區別

這個只有一家公司在電話面試中問過

參考1-9

5. 事件的執行機制

參考1-15

6. 事件的委託/代理

參考1-18

7. 內存泄露

• 說一下內存泄漏的場景

參考1-36

8. 網絡分層

• 網絡分層分爲哪幾層
• 說一下tcp3次握手的用途

9. 跨域

• 跨域有哪些解決方案
• vue開發怎麼配置代理
• vue配置的代理屬於正向代理仍是反向代理

參考1-13

10. 路由的權限控制

主要在路由攔截的經過rrouter.addRoutes去動態添加後臺返回的權限表。

11. 說下你對webpack的瞭解

12. 性能優化

說下你上個項目有作過哪些優化/或者你瞭解哪些優化

3.2 開放題

1.你從此的規劃是什麼？

建議沒有提早準備，否則你一下說不上來的。還好我年初的時候有作過清晰的規劃，算是必問題了。

2.你有什麼優缺點

我的不喜歡這樣的問題，但還真得說

我當時說 優勢：有自我驅動力 缺點：有些焦慮

確定會追問，有自我驅動力體如今哪裏，能夠說下班後自學node,ui-app，數據庫等等。 焦慮體如今行業內不少人掌握的知識點深入且普遍，而且有本身的一套學習方法（「好比掘金裏面這麼多大佬，每次看大家的文章我都很焦慮啊」），相比，本身並無這麼出色。

又追問：那你以爲爲何別人說這麼出色呢？
答：由於別人看了相關的知識點會用本身理解再整理輸出，這樣理解的更加深入，也有助於覆盤，我目前正在這樣作。

3.你以爲你來到咱們團隊能爲咱們帶來什麼

這個應該是面試官要考慮的東西。
這個我當時沒答好，會說話的能夠多說點。

4.你爲何要離職/爲何要來咱們公司

說真話嗎，這個能夠本身先準備好話術吧，建議說實話。

5.介紹下你上個項目，而且說一下你上個項目用到了哪些技術點

不少人會以爲上個項目沒什麼可說的，用的技術都是比較大衆，若是是這樣的話，你就須要對上個項目梳理。我一開始也以爲咱們上個項目沒什麼說的，梳理之後發現有不少本身沒有意識到的技術點。

5.你還有什麼要問個人嗎

• 能夠問下團隊成員狀況
• 項目組的技術棧
• 項目是新開發仍是迭代

若是實在沒問題了，能夠說剛纔在人事那裏/上一個面試官那裏有了大體的瞭解了。

4 教訓

最後說個教訓吧，是真教訓！大公司會問一些項目的細節，因此你必須對你本身作的項目很是瞭解，包括各個模塊實現的步驟，思路，項目的配置，爲何要這麼配置，不要以爲你的項目很簡單，當你把全部代碼都仔細過一遍，你會發現你的項目有不少值得你深刻的地方。

「項目上欠下的技術債，面試大機率會被吊打。」 我此次就深入的意識到了，因此若是你不急着離職的話，打開你項目一點點把業務梳理一邊，一點點的過一遍代碼，即便是別人寫的。分析裏面用到的每一個技術點，看一下相關的配置文件，會發現配置也是頗有意思的地方。

「祝你們大能找到本身喜歡的工做。」