我的前端面試心法（已拿字節(jié)offer）

（給前端大學加星標，提升前端技能.）

作者：czpcalm

https://juejin.cn/post/6898187200035782670

0、 我的秋招經(jīng)歷

題主基本情況，南方普通985普通學生，接觸前端十個月左右，今年 8 月后開始正式準備秋招。

說起我的秋招，一個詞，就是“逆襲”。一開始，華為筆試沒過，三七互娛筆試沒過被撈起來后一面又掛，信心受挫。中間沒有再繼續(xù)投遞，而是沉下心準備，身邊同學陸續(xù)拿到offer，也挺糾結(jié)。在十月底，趕在秋招的尾巴，投了四五家網(wǎng)申還沒截止的公司，沒想到，面試一路過，最后成功上岸字節(jié)，結(jié)束秋招。

準備面試和參加面試的過程中，總結(jié)了一些個人經(jīng)驗，梳理一下，希望對準備面試的人有些幫助，尤其是沒有面試經(jīng)歷的學生。這里不談及具體的面試題目，而是一些通用的方法論。

此文純個人想法，希望讀者保持自己的判斷。

1、拋開面試，系統(tǒng)學習

在一切之前，應該系統(tǒng)地去學習前端的基礎知識。 對前端而言，這些基礎包括 HTML，CSS，JavaScript，瀏覽器原理，網(wǎng)絡協(xié)議，MVVM 框架和一些必要的計算機基礎等。應該先拋開面試的目的去學習這些知識，建立自己的知識體系，然后再結(jié)合面試題，運用掌握的知識去理解并解決面試題。

然而，很多人為了應付面試，基礎技能掌握不扎實，就盲目地從網(wǎng)上查找各種面經(jīng)，記憶甚至背誦各種面試題，本末倒置。

這里，推薦一些系統(tǒng)學習的途徑和方法。

MDN文檔：

每個Web開發(fā)人員必備，很權(quán)威很齊全的Web開發(fā)文檔。作為學習辭典使用，可以查詢到每個概念、方法、屬性的詳細解釋，注意使用英文關(guān)鍵字搜索。里面的一些 HTML，CSS，HTTP 技術(shù)教程也相當不錯。

HTML 和 CSS：

推薦結(jié)合 MDN文檔 和 W3school 兩個線上教程，體會把玩上面的示例。這部分沒有什么難度，主要在于記憶和編碼實踐，加深印象。

JavaScript

前端的重頭戲，值得花大部分時間學習。

推薦通過書籍學習，《 JavaScript 高級程序設計（第 4 版）》你值得擁有。整本書內(nèi)容質(zhì)量都很高，尤其是前十章語言基礎部分，建議多讀幾遍。

另外，大推一個網(wǎng)上教程 現(xiàn)代 JavaScript 教程 ，文章深入淺出，很容易理解，上面的內(nèi)容幾乎都是重點，而且充分發(fā)揮了網(wǎng)上教程的時效性和資料鏈接。

學習資料在精不在多，二者結(jié)合，定能構(gòu)建你的 JavaScript 知識體系。

官方文檔

一些框架和工具的學習，一定要充分利用官方文檔，一般都會有快速上手的教程。因為這些版本更新很快，有些書籍跟文章的部分內(nèi)容已經(jīng)不適用了。建議從官方文檔入手，不懂的地方 Google 一下。

博客文章

把博客放在最后，是因為它不適合系統(tǒng)學習，更適合單點強化，此時你應該擁有自己知識框架后，并且清楚文章內(nèi)容的知識點。前端開發(fā)者比較聚集的兩個博客平臺是 掘金 和 segmentfault。最重要的是推薦大家都微信搜索關(guān)注一下“前端大學”公眾號，并置頂星標，它有最新前端資料，面試經(jīng)驗，可以一起提升前端技術(shù)。

2、注重基礎，不要盲目學習框架

我在準備面試的時候，在 JavaScript 上花費了大量的時間。在學習 Vue 的時候，覺得很輕松，文檔上很多東西都能理解。

不要急于學習框架和工具，把基本的 HTML，CSS，JavaScript 寫熟練了。 運用原生技術(shù)，寫一些基礎的頁面或組件，框架和工具最終也是通過這三大基礎技術(shù)實現(xiàn)。

框架也是建立在原生技術(shù)之上的，扎實的基礎能讓你在學習框架時暢通無阻。比如，Vue 指令本質(zhì)上是 HTML 元素特性；Vue 2.x 響應式原理是 JavaScript 的訪問器屬性的應用，Vue 3.0 采用了 ES6 新增語法 Proxy。如果你熟悉 JavaScript ，自然能明白 Vue 2.x 在對象與數(shù)組上的響應缺陷和 Vue 3.0 的改進意義。

盲目學習框架，容易陷入為了框架而框架的誤區(qū)。只有經(jīng)歷繁瑣的原生 DOM 操作，你才能明白為什么提出 write less, do more 的 jQuery 曾風靡一時。只有經(jīng)歷一手操作數(shù)據(jù)一手操作視圖的工作流，你才能體會 MVVM 數(shù)據(jù)驅(qū)動開發(fā)的強大之處。理解框架和工具的意義，而不是因為別人用了這個技術(shù)，所以你也要用，最后給項目添加不必要的復雜度。

從面試官的角度看，一個框架不熟悉的人，可能是開發(fā)經(jīng)驗稍欠，而一個基礎不扎實的人，很大程度學習能力不強。這種看法，在校招，尤其是大廠的校招，尤為突出，因為公司更注重的是學生的可培養(yǎng)性。

3、精準出擊，逐個擊破面試題考點

面試本質(zhì)也是考試，面試題就起到很好的考綱作用。想要取得優(yōu)秀的面試成績，刷面試題是必須的，除非你樣樣精通。

網(wǎng)上有很多面試題的收集文章，在掘金上就能找到，比如10 個 GitHub 上超火的前端面試項目，打造自己的加薪寶庫。另外，這篇文章2020年前端面試復習必讀文章【超三百篇文章/贈復習導圖】羅列了一些重要考點的好文，也是很好的備面資料。這里推薦大家微信搜索關(guān)注一下“前端大學”公眾號，并置頂星標，它有最新前端資料，面試經(jīng)驗，可以一起提升前端技術(shù)。在看面試題的時候，應該從面試題發(fā)現(xiàn)考點，然后深入學習考點相關(guān)的知識，千萬不要陷入背題的誤區(qū)。畢竟題目是多變的，但考點相對固定。

兼聽則明，偏聽則暗。 對于網(wǎng)上看到的各種面試題答案，應該思考是否正確可行，是否還有改進的地方。大部分博客對知識點的總結(jié)無法做到完全全面。所以，我對很多考點，我都會 Google 一下，結(jié)合多篇文章，然后總結(jié)出自己的答案。

4、面試是一種輸出

很多人刷了很多面試題，看了很多面經(jīng)，知識儲備充分，但面試的時候，即使是自己熟悉的考點，也很難令面試官滿意。其關(guān)鍵原因在于，學習是一種輸入，但面試是一種輸出。

面試需要的不是你懂，而是要讓面試官知道你懂，你必須有能力將考點中的要點聯(lián)系起來，連貫的說出來，這并不是看過一次就能達到的。但不少人以為看過這類文章，知道這個點，就可以了。事實上，只是“知道”遠遠不夠。

這種問題，根本上，是對技術(shù)點的不夠深入，不夠熟悉，沒有形成自己的理解。我也經(jīng)歷過這一過程，你知道這些概念，自己也能分清，但難以向別人講明白。簡單測試一個CSS問題：什么是BFC？ 你肯定知道叫塊級格式化上下文，問題是，怎么向面試官解釋這個東西？

為了解決這個問題，首先，學習過程注重理解而不是記憶。

第二，一個知識點，需要通過多篇文章學習，重復學習，加深理解，總結(jié)出自己的答案和看法。

第三，刻意練習。如果你有伙伴，可以相互提問。如果沒有，也可以自問自答。

5、注重表達邏輯

如果上一點是說能正確回答問題，這點則是能更好的回答問題。一個邏輯清晰的回答，能讓面試官感受到，面前的小伙子不僅熟悉這個問題，還有比較優(yōu)秀的語言能力和邏輯能力。

比如，常見問題：說說 var, let/const 的區(qū)別。大部分人都能羅列出它們的區(qū)別和注意點，但這很難給面試官留下什么印象。但是，如果你添加幾句聯(lián)系性的語句，效果就不一樣了：

var是 ES5 之前的變量聲明方式，存在很多容易產(chǎn)生誤解的缺陷，具體體現(xiàn)在：……（羅列 var 的一些不足）, 針對這些問題，ES6 提出了 let/const 的變量聲明方式，它們具有一些新的特性：……（羅列 let/const 特性）。

這幾句簡單的連接，讓整個回答從一個簡單的要點堆砌變成關(guān)系密切的表達。

然而，這并非易事。前提是必須要有較好的邏輯思維，既然選擇這行，相信各位這點沒有問題。

在學習每一個技術(shù)點的時候，都要注意一些問題：是什么？為了解決什么問題？如何實現(xiàn)的，有沒有更深的原理？如何使用？使用的時候需要注意什么？有哪些應用的場景？有什么不足？這些不足能否避免？ 這些問題能讓你更加全面地體會各個問題的聯(lián)系。

需要指出一點，寫博客對這方面有很大的幫助。

即使你沒有寫過博客，建議在備考的時候，使用思維導圖等工具，并且經(jīng)常整理已學知識的聯(lián)系。

可能有人跟我一樣面試會緊張，一緊張就容易腦子空白。我的方法是，把面試官假想成是來請教我問題的同學，不得不說這種效果真的很好。（面試官表示老子懂的比你多了去了hh）

6、揚長避短，但盡量爭取

對于那些每個應聘者必備的技能，必須要熟悉再熟悉，不要讓基礎成為自己的短板，切合上一條注重基礎。而對于其它技能，深入學習其中的幾個，然后想辦法引導面試官提問這些方面的問題。

最有效最常見的引導方式是簡歷。簡歷信息往往是面試官出題的依據(jù)，所以簡歷一定不要寫自己沒接觸過的技術(shù)，即使招聘信息有這項要求，如果面試官提問簡歷上的內(nèi)容，發(fā)現(xiàn)你根本不會，那么，你簡歷上的所有技能點，面試官都會打個問號。對于你有深入學習的方面，可以單點列出，比如，熟悉 JavaScript，能熟練操作 DOM，盡管 JavaScript 包含了 DOM，但你依然可以強調(diào)一下。

面試官往往會根據(jù)應聘者的回答來決定下一個問題，我們也可以利用這點，在面試回答中引導。在回答開放性問題時，這種方法十分有效，但切記點到為止，不要過分深入導致偏題。比如，面試官提問：對一個已有的網(wǎng)站，你哪些的性能優(yōu)化方案？ 當你闡述性能改進提議之后，末了，加一句“除了性能，一個網(wǎng)站考慮還可以從安全性和 SEO 這些方面進行優(yōu)化”。如果面試官 Web 安全和 SEO 感興趣，那他就中套了。

如果面試官拋出了一個你稍有了解但不熟悉的問題。不要慌，先思考片刻。整合自己知道的，做一些合理的推測。然后在回答的時候，先表明自己不是很熟悉，但在學習其他知識的時候有接觸過，簡單說說自己的了解和推斷。不少面試官會故意提出一些稍微超出面試者能力的問題，考量面試者的臨場能力和遷移學習能力。

萬一，明確面試官問題后，發(fā)現(xiàn)自己絲毫不會，直接表明，把面試官的注意力轉(zhuǎn)移到下一道題，停留的時候長了，可能會放大這道題的影響。從容應對接下來的題目，面試官不會因為一兩道題淘汰一個各方面都很優(yōu)秀的面試者。

7、后話

對于面試，說幾句個人觀點。

面試，說到底是一種考試。正如我們一直批判應試教育脫離教育的本質(zhì)，為了面試學習技術(shù)也脫離了技術(shù)的初心。但考試對于人才選拔的有效性是毋庸置疑的，幾千年來一直如此。除非你有實力向公司證明你足夠優(yōu)秀，否則，還是得乖乖準備面試。這也并不妨礙你在通過面試之后按自己的方式學習。

其實在面試準備階段，個人的收獲是很大的，我也認為這是一種不錯的學習方式。首先，面試問題大部分基礎而且深入，這些是平時工作的基礎。就好像我們之前一直不明白學習語文的意義，但它的意義就在每天的談話間。

所謂面試造火箭，工作擰螺絲。面試往往有更高的要求，也迫使我們更專心更深入地去學習一些知識，也何嘗不是一種好事。