從0到1，小白的前端摸索之路

時間 2019-11-06

標籤白的前端摸索之路简体版

原文原文鏈接

0基礎，一年自學經驗，8個offer，包括頭條、去哪兒、貓眼、鬥魚、趣店、趣頭條等，總價值180W前端

掘金的朋友們，你們好！ios

我是白小白，目前是一名電子科技大學信通學院的大四學生。回想起本身正式涉足前端的學習，已然過去一年又幾。這一年裏，有困惑、迷茫，也有堅持、不棄，既收穫成長，亦收穫一點小成績。於此於文，將本身這一年來在前端上的摸索和歷程記錄下來。受惠前人，飲水思源。此篇心得若是可以給到您些許的幫助，那將是對小白莫大的鼓勵。git

邂逅篇——爲何選擇前端？

先介紹下小白學前端以前的狀況：學業成績通常，有一點C的基礎，瞭解一點Linux的皮毛，英語六級程序員

大三學年伊始，我面臨一個選擇：考研仍是就業（成績太差留學沒戲）。和同窗室友閒聊一通，他們的答案基本一致，又寒暄了高中的老同窗，獲得的回覆仍是一致：「考研」 。我並不驚訝，咱們學校深造率一直比較高（報名考研和選擇留學合計85%左右），要知道秋招時在咱們班加上我選擇就業的才3個，其中一個仍是國防生工做包分配，加上現實就業壓力大，崗位競爭激烈，讀研是最顯而易見的選擇。可是當時的我並無選擇和你們同行，由於我不喜歡抽象又枯燥的編程。研究生成天都在教研室看論文，寫代碼，作項目，一想到這種場景我就頭暈。github

肯定就業以後，我就着手作準備，由於本身性格比較外向健談（話多嘴碎），我但願從事一份與人打交道（嘮嗑）的工做，加上本身高中有開淘寶店的經歷，我首先把目光放在了銷售，正好新學期校園迎新活動如火如荼的進行中，我報名了中國移動的校園直銷隊。第一次作銷售，心情仍是很激動的。三天半的活動結束，咱們隊的業績其實還不錯，可是我肯定銷售不會是個人歸宿：天天都要保持微笑不厭其煩跟別人介紹產品，有時獲得的只是一個冷眼旁光，還獲得處跑處處看，太累並且價值（工資）不大。web

第一次對前端有正式的認識，來自於學校工做室的招新宣講，當時臺上的同窗介紹前端的話語我還依稀記得：「學好JavaScript，走遍世界都不怕，既能先後端，又能桌面移動端，上天下海，無所不能」，當時的本身聽不太懂，可是感受很厲害的樣子。今後，前端在我腦海造成了初步印象，回去簡單Google一下，發現對前端還有「簡單易學」「門檻低」「工資高」等形容，愈來愈感興趣（本身零基礎），在逼乎大神的推薦下，我從imooc前端路徑和FCC前端學習路徑開始了個人前端入門。面試

由於有C語言的編程基礎，跟着路徑學習阻力不大。一個月斷斷續續，把基礎部分都學完了（過一遍），初步瞭解了前端三劍客HTML、CSS和JavaScript，路徑刷完以後，我開始嘗試脫離路徑教學獨立寫一個頁面，從結構、樣式到邏輯。好了，問題來了，我發現本身根本寫不出來（更準確來講根本不理解），HTML標籤爲啥這麼用？CSS盒子模型怎麼寫？JavaScript面向對象咋理解? 越寫越不理解，越寫疑問越多，越寫越崩潰。。。寫了三天放棄了，以爲本身智商不夠，可能真不適合編程，不適合作技術。ajax

雙十一臨近，本着體驗生活和了解工做的初衷，我報名了京東臨時工的招聘。先在成都京東總部進行了初步的培訓後，咱們被分到各個站點進行工做，工做內容單調又無聊：卸貨、分揀、派單、客服、退件和查詢（我基本都在站點不用出去）。問了一下身邊的小哥哥，他說天天工做就是這樣，來車的時候忙一點，其餘時候很閒，工資的話在成都能吃能喝。瞭解到京東配送的大概流程還算有點收穫，我發現京東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分失之交臂，只能拿個9八、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.一、SPDY 與 http2.0對比（發展和特性）
  - http常見狀態碼（常考30一、30二、40一、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，有沒有外星人，尼斯湖真的有水怪嗎？水怪長啥樣？每晚看完《走近科學》，我都會裹緊小被子，懼怕野人把我抓走，那是一段充滿了未知與神祕的難忘時光。後來上了大學，我開始厭倦學習，逃避學習，漸漸地失去最寶貴的東西——好奇心和求知慾。對生活沒有什麼指望和方向，天天沉迷網絡和遊戲，考試能及格就行，對學習這件事徹底提不起興趣。

在前端學習的過程當中，我漸漸喜歡上了編程和代碼，再也不反感它，甚至喜歡上了看書，對電子遊戲的興趣愈來愈小 ( 甚至會反感 ) 。你如今讓我去學一門新框架新技術甚至新語言，我沒有心理負擔，反而以爲很新鮮。漸漸的我找回了最初對學習的感動和興趣，找回了好奇心，又一次感受到這個世界充滿了美妙和樂趣。知識就是力量，學習讓我快樂！

涉足程序員這個行列以來，接觸到不少厲害的大佬和前輩。我發現他們身上有一種特別的魅力是其餘人羣少有的，那就是他們老是在不斷學習前進，不斷提升本身的認知，不斷探尋這個世界的奧祕（有次看見大佬說：二進制就是世界的本源）。反而對物質沒太多追求，畢竟收入這麼高哈哈，而是注重精神上的追求，構建本身的精神世界，提升精神境界。這一特質深深吸引了我，我也想像他們同樣，去享受知識與探索的樂趣。

程序員最廣泛的目標是：「作一個有趣的人」，這是在其餘人羣所看不到的景象。程序員是一羣尊重知識、追求知識和熱愛知識的人，他們理性、友善、寬容，他們不會主動傷害別人，傷害世界，只是單純的熱愛知識，熱愛生活。在小白看來這是羣可愛的人，可以和他們爲伍，很開心很激動！

寫在最後的話：

這是我第一次嘗試寫做發表文章，每個字都是手碼出來的，也是受大佬們的影響。小白水平有限，閱歷尚淺，文中不可避免會有錯誤和不許確的地方，懇請大佬們可以指出，不吝賜教，十分感謝😆。本篇文章是小白這一年對前端的摸索和歷程，若是可以給到您些許的幫助，那將是對小白莫大的鼓勵和承認。