0基礎，一年自學經驗，8個offer，包括頭條、去哪兒、貓眼、鬥魚、趣店、趣頭條等，總價值180W
掘金的朋友們，大家好！
我是白小白，目前是一名電子科技大學信通學院的大四學生。回想起自己正式涉足前端的學習，已然過去一年又幾。這一年裡，有困惑、迷茫，也有堅持、不棄，既收穫成長，亦收穫一點小成績。於此於文，將自己這一年來在前端上的摸索和歷程記錄下來。受惠前人，飲水思源。此篇心得如果能夠給到您些許的幫助，那將是對小白莫大的鼓勵。
邂逅篇——為什麼選擇前端？
先介紹下小白學前端之前的情況：學業成績一般，有一點C的基礎，瞭解一點Linux的皮毛，英語六級
大三學年伊始，我面臨一個選擇：考研還是就業（成績太差留學沒戲）。和同學室友閒聊一通，他們的答案基本一致，又寒暄了高中的老同學，得到的回覆還是一致：“考研” 。我並不驚訝，我們學校深造率一直比較高（報名考研和選擇留學合計85%左右），要知道秋招時在我們班加上我選擇就業的才3個，其中一個還是國防生工作包分配，加上現實就業壓力大，崗位競爭激烈，讀研是最顯而易見的選擇。但是當時的我並沒有選擇和大家同行，因為我不喜歡抽象又枯燥的程式設計。研究生整天都在教研室看論文，寫程式碼，做專案，一想到這種場景我就頭暈。
確定就業之後，我就著手做準備，因為自己性格比較外向健談（話多嘴碎），我希望從事一份與人打交道（嘮嗑）的工作，加上自己高中有開淘寶店的經歷，我首先把目光放在了銷售，正好新學期校園迎新活動如火如荼的進行中，我報名了中國移動的校園直銷隊。第一次做銷售，心情還是很激動的。三天半的活動結束，我們隊的業績其實還不錯，但是我確定銷售不會是我的歸宿：每天都要保持微笑不厭其煩跟別人介紹產品，有時得到的只是一個冷眼旁光，還得到處跑到處看，太累而且價值（工資）不大。
第一次對前端有正式的認識，來自於學校工作室的招新宣講，當時臺上的同學介紹前端的話語我還依稀記得：“學好JavaScript，走遍世界都不怕，既能前後端，又能桌面移動端，上天下海，無所不能”， 當時的自己聽不太懂，但是感覺很厲害的樣子。從此，前端在我腦海形成了初步印象，回去簡單Google一下，發現對前端還有 “簡單易學”“門檻低” “工資高”等形容，越來越感興趣（自己零基礎），在逼乎大神的推薦下，我從imooc前端路徑和FCC前端學習路徑開始了我的前端入門。
因為有C語言的程式設計基礎，跟著路徑學習阻力不大。一個月斷斷續續，把基礎部分都學完了（過一遍），初步瞭解了前端三劍客HTML、CSS和JavaScript，路徑刷完之後，我開始嘗試脫離路徑教學獨立寫一個頁面，從結構、樣式到邏輯。好了，問題來了，我發現自己根本寫不出來（更準確來說根本不理解），HTML標籤為啥這麼用？CSS盒子模型怎麼寫？JavaScript物件導向咋理解? 越寫越不理解，越寫疑問越多，越寫越崩潰。。。寫了三天放棄了，覺得自己智商不夠，可能真不適合程式設計，不適合做技術。
雙十一臨近，本著體驗生活和了解工作的初衷，我報名了京東臨時工的招聘。先在成都京東總部進行了初步的培訓後，我們被分到各個站點進行工作，工作內容單調又無聊：卸貨、分揀、派單、客服、退件和查詢（我基本都在站點不用出去）。問了一下身邊的小哥哥，他說每天工作就是這樣，來車的時候忙一點，其他時候很閒，工資的話在成都能吃能喝。瞭解到京東配送的大概流程還算有點收穫，我發現京東ERP系統（系統很複雜）都是用Firefox開啟，我好奇他們為啥必須用Firefox（其他瀏覽器不行嗎），他們回答我他們也不知道，只是公司培訓他們要這麼做。
雙11結束之後，我又陷入迷茫了，我到底能做啥？銷售是不可能銷售的，運營公關又嫌單調，程式設計又很難理解學不下去。心想，自己畢業只能找個不喜歡的工作餬口，要不放棄就業，回去跟著大家考研。當時看了幾篇文章，再一次感知到技術的重要性和必要性，又去請教了學長學姐，告訴我不要輕易放棄，要相信自己。思來想去，再次把目光聚焦到之前沒寫完的頁面。
學習篇——怎樣學習和做了哪些準備
17年雙十一之後，我正式下定決心走技術這條路，總結之前的學習教訓，重新思考如何學習前端
我必須重新去思考，去反省自己的學習方法和方式。這一次我花在檢索和收集資訊的時間更多了，除此之外，我還試著去看前人的學習心得和經驗，最後獲取到比較一致的建議，那就是必須以基礎知識為核心，系統性、輻射性的進行學習與積累；在多數前輩的推薦下，我去圖書館借了一本《JavaScript高階程式設計》（第三版），此後的時間，無論是在課堂還是在宿舍，一有時間我就堅持看。
剛開始看高程三的時候，被這本書的厚度嚇到了（畢竟我都不咋愛看書），而且專業性較強，對此有一定的心理負擔。大概花了三個星期的時間，每天看20，30頁，然後去理解其中的內容，整書看了個十有八九，看完之後真正對JS、對前端有了一個巨集觀的認識，之前不理解的知識點也通過系統學習後聯絡了起來，對比之前的路徑學習，我認為路徑學習並不適合初學者，因為知識點相對分散、零碎，前後知識點邏輯性關聯性不強，學習過程中很難形成整體性認識和理解，過後容易忘記，書籍是人類最好的朋友。我之後的收穫離不開這本書的啟蒙，這是每一個FEer都應該首先閱讀的書。
繼續我的前端之旅，當時的自己由於實踐較少，感覺CSS甚至比JS還要難以掌握及運用，不知道大家是咋學CSS的，我一直找不到好的方法去學。CSS有大量零散的、需要記憶的特性、屬性和屬性值，不經常使用很快就會忘記。從學JS的思路切入，先理解原理先掌握大局觀，雖然有很多屬性（還在一直增加），但是基本原理和框架不變，小白認為：CSS選擇器與權重、盒子模型與BFC、常用屬性（display、position、float等）、塊級元素和內聯元素、層疊上下文和常見佈局是需要重點掌握和熟練的。看過張鑫旭大神寫的《CSS世界》，覺得還不錯，能夠幫助你構建起對CSS的大局觀，但是個人感覺整書在邏輯性上稍稍欠缺一些，讀起來有些費勁（大神原諒我這麼說）。
在之後的學習中，我瞭解到微信小程式，那時候正好是小程式大火的時候，開發者數量急劇增長，於是我也湊了一波熱鬧。但是苦於沒有什麼實戰經驗，我在慕課網購買了一門小程式的實戰課程（149元，感覺挺值的），此後便跟著視訊和老師進行自己第一個demo的實踐。每節視訊我都仔細看，看完就親自手寫每一行程式碼，跟上老師的進度，遇到不會的或者出錯的我會重新回去看視訊，一遍看不懂就多看幾遍，然後對比出錯的地方，進行總結和學習 , 也正是這門課的契機，我開始學著去看文件，去查文件，用文件解決問題。除此之外就是老師講授的除錯技巧和經驗，學到了很多隻有在專案中才能體會的東西。我的第一個真正的實戰demo也完成了。
寒假臨近，我深知不能閒著，於是我申請了學院的P2P專案《搭建基於LNMP的學生論壇系統》。一方面回顧一下Linux的相關知識和操作，一方面鍛鍊下自己的專案能力。整個專案花的時間不多，我使用了Discuz框架，主要難點是在Linux環境中安裝和配置Nginx、MySQL、PHP環境，最後使用ngrok服務做了內網穿透，申請了免費域名做CNAME解析，讓公網也能通過域名訪問。目中途因為自己裝錯不相容版本的軟體，在窮舉了所有網路給出的解決方案後仍不能解決錯誤，我絕望了，最後選擇了推翻重做。第二遍有了教訓之後輕車熟路，但還是遇到了不少新問題（比如環境搭好之後無法解析CSS，導致頁面沒有樣式），不過都沒能阻擋我，一一解決。下圖是自己參考了ZUK社群做出來的前端重構頁面（我覺得挺好看的哈哈）
18年，開學已經是第六個學期，正值金三銀四的春招季。小白本來也想著去投遞找實習，看了幾家公司的JD，無奈自己的技術棧（前端框架還沒接觸過，後端也不瞭解）尚未成形放棄了。還是先著力現在，把基礎打好。當時自己正在看《圖解HTTP》補補網路基礎知識。
不久後便迎來了我的第二個專案，這是一個外包專案，一位研究生學姐聯絡上我們，需要我們組成一個小團隊實現一個基於微信小程式，專注於成都戶籍政策資訊彙總和加工輸出，解決使用者相關資訊獲取成本高、質量低的痛點的產品。這也是我第一次參與到團隊形式的開發實踐中，我們從 產品調研->需求分析->商業策劃->團隊分工->專案排期->開發工作。在整個專案活動中，我接觸到釘釘、Tower等團隊協作軟體，認識到git/github、碼雲等程式碼託管工具，更親身經歷到團隊中FEer的工作流和報告流，需要和設計師溝通原型和UI，需要和後端交流介面和業務，需要和PM討論需求和功能。整個專案的時間持續了將近倆月，最後由於其他原因被迫中斷，很是遺憾?，只留下一些頁面。。。
在小程式的學習和開發過程中，越來越體會到ES6的重要性和必要性，無論從程式碼簡潔上還是開發效率上（亦或是市場需求上），其效果和作用越來越凸顯，當時在大家的推薦下，我買了一本《JavaScript忍者祕籍》（第二版），這本由jQuery之父撰筆的備受好評的工具書，成了我JS（ES6）啟蒙的第二本書，在書中瞭解到ES6諸多新特性、優缺點及其適用場景，每一章後面都有針對的習題，能夠檢驗和鞏固自己的理解。
轉眼已是4月底，當時騰訊正在舉辦第一屆大學生微信小程式應用開發賽，看到進入總決賽的隊伍將有機會進入到騰訊微信總部實習，小白馬上找了搭檔報名。一開始我們準備做小遊戲（當時小遊戲已經紅紅火火），無奈被告知小遊戲類目不納入此次比賽範圍。我們臨時調轉了方向，搭檔是遊戲的技術棧，沒法幫我分擔小程式的開發需求，後來乾脆開發我來，文件他做。時間不等人，我們必須抓緊，沒有PM，沒有UI，沒有後端，怎麼辦？那自己來做PM，做UI，做後端！我們做了一個大學生校園閒置平臺IoS（靈感就是校園版的閒魚），旨在簡化交易流程，降低交易成本，讓同一所學校的同學可以更加省心快捷的流通自己的閒置物品，從立項討論到最後作品提交（完成），我們只用了15天，而且還是兩個小白。這個比賽專案讓我第一次接觸到前後端聯調開發流程，為了寫介面CRUD，我學了一點Node，配合Koa和MongoDB勉強滿足業務需求。我們的作品在校園選拔賽中獲得前十（60只隊伍）的成績，被推薦進入西南賽區分賽。
進入5月份，我正式接觸到前端框架，選的Vue，跟著官方文件和一些教程，我也寫了一個todoList的Demo入門，瞭解到基本的模板指令、語法、框架特性和組織結構（當時第一反應就是和原生小程式好像啊，後來才知道，應該是微信的Developer借鑑了Vue思想，Vue又借鑑了React的思想）。配套的全家桶也入門了一點，Vue-router、Vuex、Vue-cli和Axios。由於沒有更加深刻擴充地實踐和學習，對Vue的理解只停留在皮毛和表面。先不管，我得去找找暑期實習。
實習篇——我與公司不得不說的祕密
無面試經驗，暑期實習投遞10家公司，收到2家offer、1家意向書，第一次有工資領真開心
正值學校舉辦雙選會實習生專場和 ‘實習僧’ 科大線下活動，我帶著簡歷去試試，第一次參加雙選會的記憶至今難忘（成都的小夥伴要是感興趣19年春招可以來科大體驗一下哈哈）：車水馬龍，鱗次櫛比，如遇趕集的鬧市，明星公司的“攤位”前紛紛排起了長隊，招呼聲、交談聲不絕於耳，真是好不熱鬧！我列印了10份記錄著上文經歷的簡歷，循著自己的感覺分別投了10家公司，有些公司當場筆試面試，有些則是另作安排，太多公司不認識，當時只想找一家願意收留我的去實習，也沒什麼動力去提前瞭解。當場收到一家公司的意向書，而且離學校還挺近（後來瞭解到，那家公司就是本校校友創辦的，正在孵化中），自己不太想去初創公司，婉拒了，回去繼續等其他的通知。
幾天後我接到一個HR小姐姐的電話，表示我的筆試已經通過，需要約一個時間進行面試，這是我第一次接到正式的面試通知（心想這家公司應該不錯，流程正規）。幾天後，面試如約而至，一面技術面，是一位稍顯文藝、面相友善的面試官（後來入職才知道是經驗十分豐富的前端老司機，我的mentor，真是緣分），大致總結一下當時被問到的內容：
- 事件委託與事件模型（捕獲->觸發->冒泡）
- HTML語義化和規範標準
- Event Loop和訊息佇列
- CSS盒子模型和BFC理解
- 閉包的理解和作用域
- 原型與繼承（有幾種繼承方式）
- 瀏覽器快取和相關API
- 0.1 + 0.2 不等於 0.3？電商專案中涉及小數咋處理？
- 用過哪些ES6語法，介紹一下
- 跨域產生的原因和處理方式
因為是實習生，問的都是比較基礎的知識點（這些基礎題大家肯定都會），也沒有讓手寫程式碼實現的要求，但這是我第一次面試，當時還是挺緊張的，有些題答得不好。在忐忑的心情中，被告知一面通過，二面是另一個身材魁梧，表情嚴肅的面試官（這是我的leader，UED老大）。看著挺有距離感的，其實交流起來很和藹，我以為他會問我更深入的題目和知識，結果沒有，問了一些我的大致情況：學什麼專業？上過什麼課？老家是哪的？能實習多久？20分鐘結束之後就跟著小姐姐進入HR面了，HR們問的問題具有共通性，比如咋學前端的？為啥選擇前端？有什麼興趣愛好？大學做過什麼印象深刻的事情？等等，這裡就不浪費篇幅仔細描述了，之後就是和另一個HR小姐姐確定入職和實習的細節。小白也是在這小姐姐那裡第一次瞭解到頭條及其“可怕”的薪資（現在回想起來，這難道是冥冥之中的神祕力量？）
另一家公司是電話面試，面試官主要問了JS基礎知識（就是常問的那些，沒有印象深刻的）和簡單的演算法題（一個陣列中如何查詢重複出現2次及以上的元素），還有一道常問的題：程式和執行緒的區別？自己答得都還不錯，40分鐘的面試很快過去。然後是和HR的交流，薪酬、實習時間和地點的細節確定。
一週後我收到了兩家公司的offer郵件，一家是G7（成都）智慧物聯網，一家是上海牽趣網路科技公司，我選擇了留成都，畢竟方便又熟悉嘛。拿到offer就安心準備各科的期末考試了，學業可不能掉鏈子鴨。
暑期開始的第一天，我到公司報導入職，從此開始了為期三個月的實習生活。正式瞭解到公司在全國四個城市有base，成都是主要的研發中心，公司規模在1500+，主營業務以商用車車聯網解決方案和數字化業務為主，客戶包括京東、順豐等，在這個垂直細分領域是一家獨角獸（我的眼光果然不錯）。
UED總共有30+人，我被分到車隊運營產品中心，這個部門主要負責三個產品，一個Web端車隊運營系統，一個給司機用的hybrid APP（包括小程式端），還有一個炫酷的大屏監控專案，極大地豐富了我的眼界。實習的過程中，我認識到很多厲害又謙虛的前輩，特別是我的mentor（啟蒙導師），總是耐心地為我講解知識點、幫我解決問題。小白在公司不僅瞭解到詳細嚴謹的立項->研討->排期->開發->測試->上線流程，還在mentor那裡學習到常用的開發工具和開發經驗，比如用抓包工具Charles代理資源。由於部門負責的產品和業務比較豐富，自己有幸接觸到不同形態和平臺的開發工作，比如Web端專案迭代（SPA等），Hybrid開發與native端進行協作聯調，小程式端的釋出，最刺激的就是大屏專案（雖然我沒怎麼參與到新迭代的開發），炫酷吊炸天，使用WebGL和ECharts進行渲染，基於GIS的車隊資料視覺化。
因為是實習生，mentor分配給我的任務都不難且合理，一邊熟悉工作環境，一邊上手專案程式碼，工作強度也不大，我是標準的965（只加過兩次班），公司每天加班的人也不多。剛開始不是很熟悉流程和程式碼，我回到租房還得繼續coding，後來漸漸熟悉了，節奏就比較穩定。公司氛圍不錯，UED的同事們每天都會一起吃飯，互通有無，一派和諧景象。每天晚上我都會抽出時間自我充電，每週六週日我也會堅持去公司學習，因為公司比較舒適，有顯示器、空調、微波爐和人體工學椅，哈哈哈哈哈哈。也是在實習的這段時間，我抓緊時間把我的基礎補上。
開發工作之餘，我總結歸納了常考知識點，包括前端部分，瀏覽器部分，網路協議部分，演算法和資料結構部分等，這裡我要強調一下：演算法很重要！演算法很重要！演算法很重要！一直以來FEer寫業務邏輯看似不涉及過多演算法，從而忽略了演算法的重要性，但是如果你的目標是大廠，演算法是一定逃不過的（我在後面的秋招中深刻體會到這點），自己演算法基礎很弱，我就從最簡單的《演算法圖解》看起，一邊刷LeetCode，一邊看書和部落格。這裡把自己學演算法的步驟介紹一下：
- 閱讀演算法入門書籍，理解和記憶基礎知識。比如時間複雜度、空間複雜度，基礎的資料結構等
- 將基礎演算法用JavaScript描述和實現出來。比如常見的排序查詢演算法，連結串列二叉樹結構等
- 刷LeetCode，先自己嘗試解決，不能解決看別人的解析，自己再用JS實現。強烈建議刷演算法題去LeetCode等專業平臺進行，因為除了有大量優質經典的習題，這裡又是面試題的素材來源，還有嚴謹的測試用例供你驗證自己的程式碼，切忌自己隨性刷題！
- 測試通過的題，要嘗試去思考其他方法從時間和空間兩個維度進行優化，面試的一大考點就是先問你實現，再問你優化，比如下面這道題：
暴力迴圈的思路O(N*logN)大家都能想到，但是你能想到時間複雜度更低的方法嗎？（騰訊面試題）
給定一個整數 n，計算所有小於等於 n 的非負整數中數字 1 出現的個數。 示例: 輸入: 13 輸出: 6 解釋: 數字 1 出現在以下數字中: 1, 10, 11, 12, 13 。
一轉眼到了9月份，金九銀十的秋招拉開帷幕。隨著和同事們的相處、瞭解加深，我越來越喜歡G7，mentor、leader以及前輩同事們都對我很好，公司的發展也很有前景，工作不累還能學到很多東西，漂亮的小姐姐也很多。當時我甚至想過放棄秋招，放棄自己大廠的目標，留在G7。可是生活就是這麼妙不可言，當時正值公司新一輪的融資，公司上下都鎖hc，沒辦法走轉正和三方流程。思考良久，在國慶節前夕和leader提了離職，當時leader說：“先讓我去秋招，職位給我留著，想回來的時候再回來”。感謝G7，感謝前輩們，秋招拿不到好成績沒臉回去見你們。（越來越覺得，最後去頭條就是註定的）
秋招篇——我的180W面經
16場筆試，12場面試，8個offer，總價值180W+，平均offer價值22W+
小白回到學校已經是9月底，正式加入秋招隊伍。時間上已經晚了，錯過了不少公司的網申投遞，有些公司（阿里8月中旬就截止網申了）8月中旬就開啟秋招行程了，校招的同學一定要注意時間，儘早做準備哦。來學校宣講的公司很多，那段時間還真是挺忙的，每天跑宣講會、做筆試、跑酒店、做面試、回宿舍、做線上。。。接下來小白將會把自己的面試心得寫下來，希望能給螢幕面前的你些許幫助。
首先假設我們基於一個共識和三個約定：
共識：題是刷不完的，題背後的知識點（網）才是核心，無限的東西就沒必要去學習記憶，有限的東西才有學習記憶的價值
- 以下面試題不僅有我在面試中遇到的，更有為了面試發掘於各個渠道的
- 以下心得體會面向校招偏向基礎，希望能給同仁們和同學們一些參考
- 如果看官大佬們覺得寫得還不錯願意轉載，一定要註明出處和署名哦
一. 面試到底在考察什麼？
面試是一種考核候選者綜合素質的考核形式，說白了就是考核四個方面：聽、說、讀、寫
- 先來說說 “聽”
面試官發問常常不會直接問你某個知識點，而是通過一些例項和問題來間接考察你相關知識點的掌握情況。比如以下兩個例子：
-
問：JS中非同步任務既有setTimeout，又有setInterval，還有Promise等等，那這些任務的執行順序是怎麼確定的呢？（Event Loop 和 任務佇列）
-
問：事件委託中為什麼父級元素能夠監聽到子級元素的事件呢？（事件模型 和 釋出訂閱模式）
面試過程中準確解析出面試官的發問意圖十分重要，一旦解讀出現偏差，回答的內容可能會偏離面試官的期望，為你的面試結果埋下隱患。
如何提高“聽”的能力呢？
方法就是仔細聽多交流，遇到不理解或者不確定的問題時，大膽詢問面試官，進一步縮小範圍、鎖定方向再完成作答，不要有太多心裡包袱，該問就問。
- 再來聊聊 “說”
有時候回答問題我們知道是那個意思，但是就是表達不出來或者表述不清楚，沒辦法讓面試官明白自己的思路和意圖。這個問題是很多候選者的通病，問題我聽懂了，知識點我也會但是我說不出來。
為什麼會出現這種情況呢？答案是：對知識點只瞭解個概念和表面，原理和本質不瞭解
我們經常去看別人的面經和解析，面試題都是大同小異的，但是一千個面試者就有一千份解讀，不少人看面經往往只關注個題目、結果和結論，心裡想著背下來面試的時候把結果一說完事。而忽略了過程和原理，別人解讀得再好再詳細，你看不進去不理解都是無用功。
我想大家小時候都有這種經歷：考試的時候，把 “+” 看成 “-”，亦或是把題目看錯（題目讓你選不正確的，你看漏了一個“不”）等等馬虎粗心的表現讓你和100分失之交臂，只能拿個98、99分。而且類似的事還屢次發生，事後的反省就是“這次粗心了，下次細心點，知識點都會”。其實很多人（家長和孩子）根本不理解這件事的實質，一次兩次的偶然尚可以解釋為“粗心”，但是經常發生那就不得不思考其原因了。實質是啥？實質就是你對知識的熟練程度或者對考試的理解程度還達不到100%，只有98%、99%，所以你才會一而再再而三的“粗心”，別小看這一兩分的差距，這是要花充分的努力才能填補的差距（對於很多人來說就可能是一生的差距）！
如何解決“說”不出來的問題呢？
你能說出多少取決於你有多少“東西”，立足基礎，擴充知識的廣度和深度才是最好最根本的解決方案，而緊張和情緒上的問題，往往多面兩輪就能克服。
- 接下來看看 “讀”
這個比較簡單，就是閱讀能力、理解能力和審題能力；面試官有時會丟擲一個命題或問題，你不僅需要對問題本身做出判斷，還要對答案做一個全面的分析。你對題目的理解將直接影響你這道題的完成質量。請看下面這道題：
以下用來隱藏DOM的方法，哪一個更好？A. display:none B. visibility:hidden
我想一些人會選B，理由顯而易見。
①因為visibility:hidden不會銷燬dom，只是視覺上隱藏，只會引發重繪而不會引發迴流，效能上佔優；而display:none會銷燬dom引發迴流。
這個答案沒錯，但不全面，只能拿60分；你看看下面這個回答會不會更好一些呢：
②display和visibility哪個更好取決於不同的場景，如果需要隱藏效果的dom在頁面初始渲染時是隱藏的，那使用display更好，因為visibility會將dom渲染出來再隱藏，增加渲染成本；但是如果需要隱藏效果的dom在初始渲染時是顯示的，那使用visibility更佳，原因如①
“讀”的能力建立在你充分的思考和豐富的實踐上，不斷實踐不斷總結經驗，學會甄別面試官設下的坑。（記一次面試官問：一個無序陣列怎麼實現二分查詢？）
- 最後來談談 “寫”
面試題中一大環節就是讓你手寫程式碼實現（包括用筆，用鍵盤等），而且這一個環節往往又是難度最大、價值最高的部分，將直接決定你的整場面試質量！這個環節發揮好了甚至能挽救你之前問答題答得不好的頹勢，實現彎道超車。
紙上得來終覺淺，絕知此事要躬行
前端知識多而雜，有些知識點理解起來簡單，優缺點和應用場景也能輕鬆掌握，甚至還經常出現在我們日常工作學習中，但是面試的時候讓你手寫出來，你不一定能寫出來，你還別不信這個邪，現在我們來做個測試，給你幾分鐘，拿出一張紙，在不借助外界資源的情況下，嘗試手寫原生ajax請求（高頻考點）
幾分鐘過去了，是不是發現自己連例項的建構函式名都忘了？監聽事件名是onreadystatechange還是onreadystatuschange？status和readyStatus分別是啥？都有哪些值？分別代表什麼意思？POST請求是不是忘了設定請求頭？寫完是不是發現忘了做IE6的相容判斷（window.ActiveXObject）？
再問一個只有1%的前端能回答上來的問題，我們每天都在使用雙擊，你知道雙擊事件名是啥嗎？
程式設計師的程式設計能力直接影響其程式設計壽命，手寫程式碼就是你程式設計能力最好體現。“寫”的能力只能通過經常寫和天天寫來提高。熟能生巧，勤能補拙，這是我自己感悟出來的祕籍。
二. 面試要考那些知識？
前端涉及到的知識點實在是太多，面試題也是層出不窮，別說刷題了，題看都看不過來。小白認為那些需要死記硬背的API、屬性名等並不重要，不能把前端學成文科。應該把注意力放在核心的基礎知識上，在理解的基礎上分別在橫向、縱向去擴充知識網路，我總結了一下面試常考的題型和內容。
題型主要是兩類：問答題和程式設計題
-
問答包括一般問答題和場景設計題，主要涉及到：
-
JS基礎知識
- 基本型別與物件（typeof判斷，記憶體位置和型別轉換）
- 陣列與高階函式（常用API，哪些改變原陣列哪些不改變？）
- 閉包與柯里化（解釋、應用場景和優缺點）
- this與作用域（改變this的幾種情況、作用域鏈）
- 原型與繼承（原型鏈與四種經典繼承方式）
- 非同步與單執行緒（event loop和任務佇列，setTimeout等）
- ES6新語法和特性（let、const、箭頭函式、模板字串、Promise、模組化、class等）
- 設計模式（常考單例、工廠和觀察者模式）
-
HTML與CSS基礎
- HTML語義化與標籤（優點，常考標籤meta、link、img等）
- HTML5新特性（postMessage、語義化標籤、webStorage和Canvas等）
- CSS選擇器與權重（偽類偽元素，種類與計算方式、樣式覆蓋）
- BFC和層疊上下文（解釋、生成與應用場景）
- display、position引數（預設值，各種屬性值之間的區別，sticky知道嗎？）
- 盒子模型與文件流（IE盒子模型、塊級元素與內聯元素等）
- CSS3新特性與動畫（border畫三角形，box-sizing，animation等）
- 水平垂直居中佈局和兩欄佈局（傳統方案）
- flex佈局（屬性與值的解釋）
-
前端框架（Vue舉例，我是Vue棧）
- 基本語法、指令（v-if、v-for、ref等, 知道自定義指令嗎?）
- 父子元件間通訊（屬性傳值和事件emit）
- Vue-router 和 Vuex（解決了什麼問題？原理、優缺點）
- 雙向資料繫結原理（最好能手寫一個簡易實現）
- Vdom與diff演算法（遍歷細節與AST）
- v-model原理（語法糖）
- SPA與SSR優缺點對比（SEO、重定向等）
- Vue與React比較
-
瀏覽器基礎知識
- DOM操作（基礎API要熟練）
- 事件委託與事件模型（要能手寫程式碼）
- 瀏覽器渲染機制與過程（常和效能的問題掛鉤）
- 垃圾回收演算法（新舊兩種演算法的區別）
- 記憶體洩漏與回收（場景與解決方案）
- 跨域（原理和方法、跨域預檢）
- 瀏覽器快取（cookie與session區別、webStorage）
- 前端效能優化（白屏問題、首屏載入、CDN、優化方案）
-
計算機網路協議知識
- DNS協議與查詢方式（基於UDP）
- http1.0、http1.1、SPDY 與 http2.0對比（發展和特性）
- http常見狀態碼（常考301、302、401、403和503）
- http快取與304（強制快取和協商快取）
- 請求響應報文頭（知道的越多越好）
- https 與加密方式（https握手過程與優缺點）
- 長短輪詢與 WebSocket（解釋與比較）
- TCP與UDP對比（優缺點與適用場景）
- TCP協議（三握四揮、超時重傳、滑動視窗等，大廠考得很細）
- XSS和CSRF（解釋與如何防範）
-
演算法與資料結構和作業系統
- 基礎資料結構（連結串列、堆疊和二叉樹）
- 時間複雜度與空間複雜度（能夠分析出一個演算法的複雜度）
- 排序演算法與查詢演算法（常考插入、快速排序和二分查詢）
- 執行緒與程式（聯絡與區別）
- 記憶體死鎖（理解與避免）
- 各種LeetCode、劍指Offer演算法題（多刷多看）
場景設計題是最能考察候選者綜合素質的題型，記一道自己遇到的場景題：
要實現一個搜尋元件，要求能夠根據輸入的關鍵字實時檢索，將檢索結果顯示在下方，如果讓你來做這個元件，你覺得有哪些設計要點與難點，又有哪些可能的坑需要注意？（貓眼面試題）
-
-
程式設計主要分為演算法題和業務原理題
準備演算法題最好的辦法就是多做，首推LeetCode，給大家推薦一個筆記，裡面有解析 CS-Notes
這裡小白也把自己遇到過的演算法題大致列舉一下：
-
如何實現一個隨機字串？
-
將陣列隨機打亂，有什麼方法？
-
有兩個變數a和b分別儲存一個數值，不借助第三個變數交換a和b的值，你有幾種方法？
-
不使用Set一行程式碼實現陣列去重
-
如何查詢陣列中重複的元素（出現2次及以上）？
-
寫一個計算字串中每個字元出現次數的函式
-
快速排序、插入排序和氣泡排序
-
二分查詢及優化
-
怎麼判斷連結串列是否有環？
-
返回二叉樹的最大深度
-
實現兩個超出Number範圍表示的“大數”的加法
-
返回一個字串中出現次數最多的儘可能長的子串和這個子串出現的次數
-
用兩個陣列及其API實現一個佇列
-
一個整數陣列，求子陣列的最大和
-
等等
程式設計題另外一類需要手寫實現的是業務原理題，主要包括以下這些：
-
手寫setTimeout
-
手寫instanceof
-
手寫一個閉包函式
-
手寫new
-
手寫bind
-
手寫Promise
-
手寫 ajax（包括用Promise封裝ajax）
-
手寫 jsonp 封裝
-
手寫事件委託
-
使用reduce實現一個map
-
手寫實現一個模板字串
-
手寫實現一個箭頭函式
-
柯里化：實現一個滿足sum(1)(2)(3).value(), sum(1, 2)(3).value(), sum(1, 2, 3).value()的函式
-
解析URL的引數（正則或者String API）
-
資料扁平化、降維處理（比如給你一個有多層巢狀的陣列，讓你解析出來）
-
正規表示式：連字元命名轉駝峰式命名（互轉）
-
分別使用深度優先和廣度優先實現物件深拷貝
-
防抖和節流的實現
-
小白在秋招中遇到的題目和知識點大致如上。接下來補充一下能為你的面試加分的知識點或技能：
- Canvas
- WebGL
- PWA
- React Native
- WebSocket
- Node.js
- 其他新穎的技術
三. 大廠面試有什麼不一樣？
小白麵過頭條 騰訊 美團這些大廠，也面過去哪兒 貓眼 有贊這種明星公司，還面過趣店 鬥魚 趣頭條此類獨角獸，更有幾家名不見經傳的小公司和初創公司。作為一個有理想有抱負的好青年，相信大家心中肯定都有一份大廠的情懷吧（小白是這樣的?），那麼大廠的面試和其他公司有什麼不一樣呢？小白來聊聊自己的感受和體會。
1. 面試輪次多
大廠的面試區別於其他公司最明顯的一個特點就是面試的輪次與週期比較長，技術面最少都是三輪（頭條3輪，騰訊3.5輪，美團3輪）。而其他公司技術面多為2輪甚至1.5輪面試，成功通過後進入HR面。所以面大廠之前，一定要做好能量和水分的補充，保持良好的心理狀態和精神狀態。
2. 知識考察細
雖然面試的公司不同，但是出的題總是大同小異，有些經典題甚至屢試不爽。在知識考察上大廠和其他公司最大的區別就是考察粒度細，考察範圍廣。比如下面這道大家見的最多的題：
從輸入URL到頁面呈現在眼前，都經歷了哪些過程？
這道題很能考察FEer的基礎知識和綜合素質，所以不管大小公司都會考，但大廠的考察細節和考察範圍很廣，我拿騰訊的面試舉例，在你回答的過程中，面試官會問你：“ DNS查詢有幾種方式？怎麼確定使用哪種查詢方式？TCP為啥需要三次握手，兩次握手不行嗎？TCP每次握手傳送的報文型別分別是啥？瞭解TCP的超時重傳機制嗎？滑動視窗怎麼用？伺服器返回的報文丟了會發生什麼？MAC層瞭解嗎？有IP地址了為啥還需要MAC地址？路由器快取瞭解嗎？”
再舉另外一道幾乎每家必考的題：
MVVM的實現原理談一下你的理解。（對Vue來說就是雙向資料繫結原理）
Vue技術棧的朋友肯定都知道是使用Object.defineProperty()重寫setter和getter來監聽屬性變化，配合觀察者模式，通知變化，最後渲染變化（當然這是2.0的原理，3.0已經用Proxy重構了）。同樣的題頭條會這麼問你：“ 你知道defineProperty有什麼缺點嗎？你瞭解defineProperty的基礎用法嗎？能不能利用它實現一個簡易的雙向繫結呢？釋出訂閱模式和觀察者模式有什麼不同？”（如果過年後去面頭條，就是換成Proxy問你了）
重新回顧一下你所瞭解的基礎知識，其原理、細節、優缺點和應用場景你都瞭解嗎？
3. 看重演算法、看重手寫程式碼
小白在上文中提到過大廠對演算法是必考的，而且難度和要求只會更高。在這裡我再次強調一遍：不管你認為演算法對前端有沒有用，進大廠先得過演算法這道坎。對於其他公司演算法一般就考你簡單的排序和查詢（插入快排等）。大廠可不會就這麼簡單放過你，對複雜度的判斷與優化，排序的穩定性與應用場景，各種LeetCode的原題變題（頭條是特例，演算法考得很難，但是阿里騰訊也不簡單）
除了演算法，大廠面試很看重手寫程式碼這個環節，每家必有這個環節（不止一輪）；一些小公司可能沒有讓你手寫程式碼的環節，整場面試用嘴說就夠了。如果你正在準備大廠的面試，那一定要去熟練自己的程式碼速度和精度（有贊當時看我寫程式碼寫得慢直接掛了），不光是要關注正確率，細節也不能忽視，比如縮排、命名和註釋等。常考的業務題一定要熟練，多寫多練，理解原理後測測自己能不能手寫實現一個。
4. 不同的公司，不同的靈魂
不同的公司文化不一樣，價值觀不一樣，當然面試也就不盡相同。我mentor之前跟我說：面試就像找物件，彼此都在找合適的對方。網際網路公司這麼多，總有你青睞的吧，畢竟，一個有趣的靈魂會渴望另外一個有趣的靈魂。
在所有小白麵過的公司裡面，面試體驗最好的是貓眼，其次是騰訊，最差的是頭條。
-
貓眼的面試是互動式面試。面試官手寫題目，候選者手寫程式碼，你一問我一答，溫馨的小提示和不經意設下的坑都讓你的大腦與舌頭迅速升溫。四輪面完不覺得累竟然有點享受，思索回味。小姐姐說他們公司標準的965，嗯，你沒看錯。。。
-
騰訊面試官都很健談，從語氣中你能感覺到這個公司充滿了歡樂與活力。騰訊最喜歡考的就是網路，3輪電面，每輪如一，網路相關的知識佔比60%，其他33%，再加一道邏輯題結尾，哎玩得就是這麼刺激！請聽題：
一個班裡有60%的同學喜歡足球，70%的同學喜歡籃球，80%的同學喜歡排球。請問同時喜歡籃球和足球的同學有多少？
-
去哪兒的面試效率極高，面試通過當場談薪資發offer（我兩個小時就拿offer了）。我想在大陸無公司出其右，面試難度中等，面試流程簡化，公司新人培訓方案全面且合理，是一家可以放心的公司。
-
趣頭條，2018崛起的新秀，你可以看出他們求賢若渴，面試偏基礎偏應用，HR小姐姐盡心盡力。公司充滿對校招生的善意（去實習的同學說對校招生很好），還有，每一輪結尾的情商題也是他們的特點：
你和你的同事發生爭執，你怎麼處理？ leader的決策出現失誤，意見不合，你怎麼處理？照著leader說的做還是對著幹？
-
頭條的面試簡直就是“地獄”，時間長題目難不說，都在預料之中。但是面試官不屑的面孔與冷漠的眼神能讓螢幕外的空氣凝固，他們故意為之，傳說中的壓力測試，題難不死你我用表情殺死你。另外，他們很喜歡考手寫程式碼，沒有HR面。
-
其他公司的印象就不深刻了，平平淡淡，此刻我想起一種修辭手法——白描。
四. 簡單聊聊VP面和HR面
VP，指副總裁。我這裡只是借用這個詞引申技術面的最後一輪（一般是你的leader或者部門直系領導面你）。雖說是技術面試，但是面試內容已經不是具體的知識點和題目了，而是想要了解你的大致情況，一般會問你專案做了什麼？為什麼想做這個專案？在公司實習的過程中學到了什麼？聊聊你認為有前景的前端技術等等（鬥魚居然問我支教的經歷，做了什麼事？有什麼收穫？）。整體比較輕鬆，不要有太多心理壓力，自然表達就好。當然有些公司技術最後一輪照樣問你大量的知識點，還很難，這種操作一般是大廠才會有！
HR，人力資源。一般到了HR面掛的可能性就不大了，但這不是說你就可以掉以輕心，馬馬虎虎。HR面主要幹兩件事：①瞭解你的性格三觀 ②確定你的薪資待遇 你正常表達自己即可，HR都很擅長溝通，交流體驗很好。如果你在HR面不幸掛了不要過多責怪HR，他們的權力不大。可能是HC（人員編制）滿了或者是你的面試排序較低，只能說你的運氣稍稍欠缺一些。在大部分的公司裡，HR的工作就是：在規定週期內招到滿足公司要求的候選者，並且儘可能壓低人力成本。
五. 心態決定一切
做了這麼多場筆試，面了這麼多公司，小白有一些話必須得跟你說。在我剛剛參加秋招的時候，因為時間上已經晚了將近一個月，錯過了不少大廠的網申，加上準備不充分，一開始接連碰壁和失敗，阿里百詞斬筆試就掛了，美團有贊面試沒通過，知乎YY沒訊息沒後續。那段時間我情緒很失落，開始懷疑自己，否定自己，覺得自己一無是處，可能找不到工作。可是雖然我每天都在失敗，每晚都會惆悵和迷茫，但我並沒有選擇放棄 , 第二天又象個沒事人一樣面對新的公司、新的挑戰。終於形勢觸底反彈，自己做的多了面的多了，有經驗有成長了，開始收穫了。
直掛雲帆濟滄海 , 長風破浪會有時
越是艱難和挫折，越不能放棄自己和懷疑自己，堅持下去才會有希望有可能。馬雲爸爸說：今天很殘酷，明天更殘酷，但是後天就很美好，而很多人死在明天晚上。相信自己，你其實比你想象的還要強大，如果自己還沒有認輸，那就不叫真正的失敗。願各位在追尋的路上都能找到自己的燈塔和光明！最後曬一下頭條給小白的offer，付出會有回報的！
附錄：推薦一下小白覺得不錯的書籍和資源
書籍：
《JavaScript高階程式設計》（第三版）、《JavaScript忍者祕籍》（第二版）、《你不知道的JavaScript》（上中下三卷）、《CSS世界》、《圖解HTTP》、《圖解TCP/IP》、《演算法圖解》、《演算法》（第四版）、《大話資料結構》、《如何高效學習》、《未來世界的倖存者》
刷題刷面經：
LeetCode 和《劍指Offer》：面試題、演算法題的取材地，開拓思維，開拓眼界。
牛客網：刷面經的第一選擇，超多大佬大廠第一手面經新鮮出爐，牆裂推薦！
Github：絕對是程式設計師的最大福利，學會搜尋（例如前文提到的CS-Notes）
技術社群與工具：
掘金、思否、InfoQ、Google、Wikipedia
收穫篇——快樂才是最重要的
從正式開始學習到最後收穫offer，正好一年。但當我回頭看，我發現自己真正的收穫並不是什麼offer，也不是什麼高薪。我開頭說過我不喜歡程式設計和寫程式碼，確實，大學的前兩個學年，我從來沒想過自己會進入程式設計師這個行列，我覺得人生就應該去做自己喜歡的事情（其實我就是給自己不想學習找個藉口），那兩年自己確實參加了不少社團活動與社會實踐。
小時候的我對世界充滿了好奇，很想知道到底有沒有UFO，有沒有外星人，尼斯湖真的有水怪嗎？水怪長啥樣？每晚看完《走近科學》，我都會裹緊小被子，害怕野人把我抓走，那是一段充滿了未知與神祕的難忘時光。後來上了大學，我開始厭倦學習，逃避學習，漸漸地失去最寶貴的東西——好奇心和求知慾。對生活沒有什麼期望和方向，每天沉迷網路和遊戲，考試能及格就行，對學習這件事完全提不起興趣。
在前端學習的過程中，我漸漸喜歡上了程式設計和程式碼，不再反感它，甚至喜歡上了看書，對電子遊戲的興趣越來越小 ( 甚至會反感 ) 。你現在讓我去學一門新框架新技術甚至新語言，我沒有心理負擔，反而覺得很新鮮。漸漸的我找回了最初對學習的感動和興趣，找回了好奇心，又一次感覺到這個世界充滿了美妙和樂趣。知識就是力量，學習讓我快樂！
涉足程式設計師這個行列以來，接觸到很多厲害的大佬和前輩。我發現他們身上有一種特別的魅力是其他人群少有的，那就是他們總是在不斷學習前進，不斷提高自己的認知，不斷探尋這個世界的奧祕（有次看見大佬說：二進位制就是世界的本源）。反而對物質沒太多追求，畢竟收入這麼高哈哈，而是注重精神上的追求，構建自己的精神世界，提高精神境界。這一特質深深吸引了我，我也想像他們一樣，去享受知識與探索的樂趣。
程式設計師最普遍的目標是：“做一個有趣的人”，這是在其他人群所看不到的景象。程式設計師是一群尊重知識、追求知識和熱愛知識的人，他們理性、友善、寬容，他們不會主動傷害別人，傷害世界，只是單純的熱愛知識，熱愛生活。在小白看來這是群可愛的人，能夠和他們為伍，很開心很激動！
寫在最後的話：
這是我第一次嘗試寫作發表文章，每一個字都是手碼出來的，也是受大佬們的影響。小白水平有限，閱歷尚淺，文中不可避免會有錯誤和不準確的地方，懇請大佬們能夠指出，不吝賜教，十分感謝?。本篇文章是小白這一年對前端的摸索和歷程，如果能夠給到您些許的幫助，那將是對小白莫大的鼓勵和認可。