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社區做出來的前端重構頁面（我覺得挺好看的哈哈）
點此鏈接：分享 ：8年開發老碼農福利贈送：網頁製作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，送給每一位對編程感興趣的小夥伴
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、屬性名等並不重要，不能把前端學成文科。應該把注意力放在覈心的基礎知識上，在理解的基礎上分別在橫向、縱向去拓展知識網絡，我總結了一下面試常考的題型和內容。
題型主要是兩類：問答題和編程題
問答包括一般問答題和場景設計題，主要涉及到：
場景設計題是最能考察候選者綜合素質的題型，記一道自己遇到的場景題：
要實現一個搜索組件，要求能夠根據輸入的關鍵字實時檢索，將檢索結果顯示在下方，如果讓你來做這個組件，你覺得有哪些設計要點與難點，又有哪些可能的坑需要注意？（貓眼面試題）
基礎數據結構（鏈表、堆棧和二叉樹）
時間複雜度與空間複雜度（能夠分析出一個算法的複雜度）
排序算法與查找算法（常考插入、快速排序和二分查找）
線程與進程（聯繫與區別）
內存死鎖（理解與避免）
各種LeetCode、劍指Offer算法題（多刷多看）
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（解釋與如何防範）
DOM操作（基礎API要熟練）
事件委託與事件模型（要能手寫代碼）
瀏覽器渲染機制與過程（常和性能的問題掛鉤）
垃圾回收算法（新舊兩種算法的區別）
內存泄漏與回收（場景與解決方案）
跨域（原理和方法、跨域預檢）
瀏覽器緩存（cookie與session區別、webStorage）
前端性能優化（白屏問題、首屏加載、CDN、優化方案）
基本語法、指令（v-if、v-for、ref等, 知道自定義指令嗎?）
父子組件間通信（屬性傳值和事件emit）
Vue-router 和 Vuex（解決了什麼問題？原理、優缺點）
雙向數據綁定原理（最好能手寫一個簡易實現）
Vdom與diff算法（遍歷細節與AST）
v-model原理（語法糖）
SPA與SSR優缺點對比（SEO、重定向等）
Vue與React比較
HTML語義化與標籤（優點，常考標籤meta、link、img等）
HTML5新特性（postMessage、語義化標籤、webStorage和Canvas等）
CSS選擇器與權重（僞類僞元素，種類與計算方式、樣式覆蓋）
BFC和層疊上下文（解釋、生成與應用場景）
display、position參數（默認值，各種屬性值之間的區別，sticky知道嗎？）
盒子模型與文檔流（IE盒子模型、塊級元素與內聯元素等）
CSS3新特性與動畫（border畫三角形，box-sizing，animation等）
水平垂直居中佈局和兩欄佈局（傳統方案）
flex佈局（屬性與值的解釋）
基本類型與對象（typeof判斷，內存位置和類型轉換）
數組與高階函數（常用API，哪些改變原數組哪些不改變？）
閉包與柯里化（解釋、應用場景和優缺點）
this與作用域（改變this的幾種情況、作用域鏈）
原型與繼承（原型鏈與四種經典繼承方式）
異步與單線程（event loop和任務隊列，setTimeout等）
ES6新語法和特性（let、const、箭頭函數、模板字符串、Promise、模塊化、class等）
設計模式（常考單例、工廠和觀察者模式）
JS基礎知識
HTML與CSS基礎
前端框架（Vue舉例，我是Vue棧）
瀏覽器基礎知識
計算機網絡協議知識
算法與數據結構和操作系統
編程主要分爲算法題和業務原理題
準備算法題最好的辦法就是多做，首推LeetCode，給大家推薦一個筆記，裏面有解析CS-Notes
這裏小白也把自己遇到過的算法題大致列舉一下：
編程題另外一類需要手寫實現的是業務原理題，主要包括以下這些：
手寫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）
數據扁平化、降維處理（比如給你一個有多層嵌套的數組，讓你解析出來）
正則表達式：連字符命名轉駝峯式命名（互轉）
分別使用深度優先和廣度優先實現對象深拷貝
防抖和節流的實現
如何實現一個隨機字符串？
將數組隨機打亂，有什麼方法？
有兩個變量a和b分別儲存一個數值，不借助第三個變量交換a和b的值，你有幾種方法？
不使用Set一行代碼實現數組去重
如何查找數組中重複的元素（出現2次及以上）？
寫一個計算字符串中每個字符出現次數的函數
快速排序、插入排序和冒泡排序
二分查找及優化
怎麼判斷鏈表是否有環？
返回二叉樹的最大深度
實現兩個超出Number範圍表示的“大數”的加法
返回一個字符串中出現次數最多的儘可能長的子串和這個子串出現的次數
用兩個數組及其API實現一個隊列
一個整數數組，求子數組的最大和
等等
小白在秋招中遇到的題目和知識點大致如上。接下來補充一下能爲你的面試加分的知識點或技能：
Canvas
WebGL
PWA
React Native
WebSocket
Node.js
其他新穎的技術
三. 大廠面試有什麼不一樣？
小白麪過頭條 騰訊 美團這些大廠，也面過去哪兒 貓眼 有贊這種明星公司，還面過趣店 鬥魚 趣頭條此類獨角獸，更有幾家名不見經傳的小公司和初創公司。作爲一個有理想有抱負的好青年，相信大家心中肯定都有一份大廠的情懷吧（小白是這樣的😆），那麼大廠的面試和其他公司有什麼不一樣呢？小白來聊聊自己的感受和體會。
- 面試輪次多
大廠的面試區別於其他公司最明顯的一個特點就是面試的輪次與週期比較長，技術面最少都是三輪（頭條3輪，騰訊3.5輪，美團3輪）。而其他公司技術面多爲2輪甚至1.5輪面試，成功通過後進入HR面。所以面大廠之前，一定要做好能量和水分的補充，保持良好的心理狀態和精神狀態。 - 知識考察細
雖然面試的公司不同，但是出的題總是大同小異，有些經典題甚至屢試不爽。在知識考察上大廠和其他公司最大的區別就是考察粒度細，考察範圍廣。比如下面這道大家見的最多的題：
從輸入URL到頁面呈現在眼前，都經歷了哪些過程？
這道題很能考察FEer的基礎知識和綜合素質，所以不管大小公司都會考，但大廠的考察細節和考察範圍很廣，我拿騰訊的面試舉例，在你回答的過程中，面試官會問你：“ DNS查詢有幾種方式？怎麼確定使用哪種查詢方式？TCP爲啥需要三次握手，兩次握手不行嗎？TCP每次握手發送的報文類型分別是啥？瞭解TCP的超時重傳機制嗎？滑動窗口怎麼用？服務器返回的報文丟了會發生什麼？MAC層瞭解嗎？有IP地址了爲啥還需要MAC地址？路由器緩存瞭解嗎？”
再舉另外一道幾乎每家必考的題：
MVVM的實現原理談一下你的理解。（對Vue來說就是雙向數據綁定原理）
Vue技術棧的朋友肯定都知道是使用Object.defineProperty()重寫setter和getter來監聽屬性變化，配合觀察者模式，通知變化，最後渲染變化（當然這是2.0的原理，3.0已經用Proxy重構了）。同樣的題頭條會這麼問你：“ 你知道defineProperty有什麼缺點嗎？你瞭解defineProperty的基礎用法嗎？能不能利用它實現一個簡易的雙向綁定呢？發佈訂閱模式和觀察者模式有什麼不同？”（如果過年後去面頭條，就是換成Proxy問你了）
重新回顧一下你所瞭解的基礎知識，其原理、細節、優缺點和應用場景你都瞭解嗎？ - 看重算法、看重手寫代碼
小白在上文中提到過大廠對算法是必考的，而且難度和要求只會更高。在這裏我再次強調一遍：不管你認爲算法對前端有沒有用，進大廠先得過算法這道坎。對於其他公司算法一般就考你簡單的排序和查找（插入快排等）。大廠可不會就這麼簡單放過你，對複雜度的判斷與優化，排序的穩定性與應用場景，各種LeetCode的原題變題（頭條是特例，算法考得很難，但是阿里騰訊也不簡單）
除了算法，大廠面試很看重手寫代碼這個環節，每家必有這個環節（不止一輪）；一些小公司可能沒有讓你手寫代碼的環節，整場面試用嘴說就夠了。如果你正在準備大廠的面試，那一定要去熟練自己的代碼速度和精度（有贊當時看我寫代碼寫得慢直接掛了），不光是要關注正確率，細節也不能忽視，比如縮進、命名和註釋等。常考的業務題一定要熟練，多寫多練，理解原理後測測自己能不能手寫實現一個。 - 不同的公司，不同的靈魂
不同的公司文化不一樣，價值觀不一樣，當然面試也就不盡相同。我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，有沒有外星人，尼斯湖真的有水怪嗎？水怪長啥樣？每晚看完《走近科學》，我都會裹緊小被子，害怕野人把我抓走，那是一段充滿了未知與神祕的難忘時光。後來上了大學，我開始厭倦學習，逃避學習，漸漸地失去最寶貴的東西——好奇心和求知慾。對生活沒有什麼期望和方向，每天沉迷網絡和遊戲，考試能及格就行，對學習這件事完全提不起興趣。
在前端學習的過程中，我漸漸喜歡上了編程和代碼，不再反感它，甚至喜歡上了看書，對電子遊戲的興趣越來越小 ( 甚至會反感 ) 。你現在讓我去學一門新框架新技術甚至新語言，我沒有心理負擔，反而覺得很新鮮。漸漸的我找回了最初對學習的感動和興趣，找回了好奇心，又一次感覺到這個世界充滿了美妙和樂趣。知識就是力量，學習讓我快樂！
涉足程序員這個行列以來，接觸到很多厲害的大佬和前輩。我發現他們身上有一種特別的魅力是其他人羣少有的，那就是他們總是在不斷學習前進，不斷提高自己的認知，不斷探尋這個世界的奧祕（有次看見大佬說：二進制就是世界的本源）。反而對物質沒太多追求，畢竟收入這麼高哈哈，而是注重精神上的追求，構建自己的精神世界，提高精神境界。這一特質深深吸引了我，我也想像他們一樣，去享受知識與探索的樂趣。
程序員最普遍的目標是：“做一個有趣的人”，這是在其他人羣所看不到的景象。程序員是一羣尊重知識、追求知識和熱愛知識的人，他們理性、友善、寬容，他們不會主動傷害別人，傷害世界，只是單純的熱愛知識，熱愛生活。在小白看來這是羣可愛的人，能夠和他們爲伍，很開心很激動！
寫在最後的話：
這是我第一次嘗試寫作發表文章，每一個字都是手碼出來的，也是受大佬們的影響。小白水平有限，閱歷尚淺，文中不可避免會有錯誤和不準確的地方，懇請大佬們能夠指出，不吝賜教，十分感謝😆。本篇文章是小白這一年對前端的摸索和歷程，如果能夠給到您些許的幫助，那將是對小白莫大的鼓勵和認可。