2020 校招,我是如何拿到小米、京東、字節(jié)大廠前端offer
（給前端大學(xué)加星標(biāo)，提升前端技能.）
前言作者：B2D1
https://juejin.im/post/5e66ecdee51d45270c27916d
面試情況Hi~，我是 2020 屆物聯(lián)網(wǎng)專業(yè)畢業(yè)生，現(xiàn)就讀于杭州。謹(jǐn)以此文來記錄我的秋招以及入門前端以來的學(xué)習(xí)歷程，如有錯誤，希望大家能及時提出！
從19年8月初到11月底，前前后后一共面試了 14 家公司的前端崗，按城市劃分為：
北京：小米，京東，美團，百度，去哪兒
杭州：阿里，網(wǎng)易，微店，字節(jié)跳動
上海：七牛云，哈啰出行
深圳：騰訊，富途，樂信
歷時4個月，最終收獲了 小米、京東、微店、字節(jié)跳動 的offer
過程太過曲折，這其中也發(fā)生了很多讓我印象深刻的事……
8月初，提前批面試aliyun，撲通倒在了三面；正式批面試淘系技術(shù)部，HR面后，過了大概兩個星期，變成 面試已回絕
（發(fā)布文章時，系統(tǒng)一直提示有違禁詞匯，檢查了半天，原來是 aliyun 的鍋，只可以打拼音）
9月中旬，短信收到了百度面試的喜訊，興高采烈買了去上海的動車票，起了個大早，卻連 現(xiàn)場一面也沒通過
10月初，郵箱收到網(wǎng)易的現(xiàn)場面試通知，那一天從 10:00 面到 19:00，等候區(qū)就剩我一人了，HR面結(jié)束后，工作人員還送了張食堂券（不愧是豬廠，伙食還不錯），結(jié)尾依舊收到了 拒信
11月中旬，已經(jīng)收獲了雷布斯的offer，但不想獨自去北京奮斗，抱著不死心的態(tài)度，我再次面試了 字節(jié)跳動（之前提前批簡歷直接被刷），經(jīng)過 四輪技術(shù)+一輪HR 之后，成功留在了杭州研發(fā)中心（我可是抖音的忠實用戶！）
整個秋招，我的心情從一開始的信心滿滿，到感覺自己進大廠的機會渺茫，最后觸底反彈，想想真是一波三折
大一
回想起來，當(dāng)初掉入前端這個坑，是因為參加了大一開設(shè)的選修課：《小型網(wǎng)站的建設(shè)與維護》。
第一節(jié)課，講課老師新建了一個 txt 文本，寫入幾行代碼，然后修改后綴名為 html，一個網(wǎng)頁就被這樣被創(chuàng)建了，還可以自定義樣式，作為小白的我，第一次感覺代碼這么有吸引力，才知道這個叫做 前端開發(fā)（碼農(nóng)）。
在老師的鼓勵（慫恿）下，我報名參加了省里的網(wǎng)站競賽，在學(xué)校機房度過了17 年的暑假。
最開始，我還是用 Adobe Dreamweaver 寫代碼，jQuery 一把梭，管它什么性能、代碼規(guī)范、維護性，都不存在的。看著菜鳥教程，邊做邊學(xué)，能硬編碼就硬編碼，找現(xiàn)成的 JQ 插件東拼西湊，我的網(wǎng)站才正式完工，想來都是一把辛酸淚……（當(dāng)時只會寫 JQ 代碼，原生 JS 根本不會寫）
大二
第二年，我意外發(fā)現(xiàn)了掘金這個網(wǎng)站，我的前端視野一下子廣闊了許多，發(fā)現(xiàn)很多前所未聞的名詞：閉包，ES6，原型，繼承， 作用域……
慢慢地，我自學(xué)了 React、Vue、原生 JavaScript、NodeJS。
為了學(xué)習(xí) Git，我建了 GitHub 賬號。
為了搭建 個人博客，購買了 aliyun 的學(xué)生服務(wù)器和個人域名。一個星期的時間里，我又是配環(huán)境，又是學(xué) Linux 命令，第一次用 vim 簡直不要太爽，當(dāng)我的博客在公網(wǎng)成功打開的那一刻，我感覺人生達(dá)到了巔峰！
期間，我報名參加了阿里的 D2 會議（雖然當(dāng)時根本聽不懂，湊個熱鬧），那天特別激動來到西溪園區(qū)，看到了好多大牛
大三
一月初，我報名參加了螞蟻金服體檢科技大會，會議更多的是從設(shè)計和用戶體驗角度出發(fā)，如何改善產(chǎn)品
見到了 AntD 的創(chuàng)造者：玉伯，御術(shù)等前端大佬
玉伯在開場就發(fā)表致歉，因為當(dāng)年的圣誕節(jié)彩蛋事件，轟動不小！
時間來到大三下學(xué)期，我想在當(dāng)?shù)卣覀€實習(xí)，于是投遞了人生第一份前端實習(xí)簡歷。面試當(dāng)天，因為緊張，面試官給我遞來的紙水杯，在桌子上被我打翻了?……幸好，當(dāng)天晚上就接到了HR的電話，通過了。
在這幾個月的實習(xí)期內(nèi)（期間逃了不少課），公司給予了我足夠的發(fā)展空間，給我配了 MacBook 和 24 寸的顯示器。我嘗試 搭建腳手架，構(gòu)建 React 企業(yè)應(yīng)用， 寫 H5 頁面，從零開發(fā)微信小程序 等等。學(xué)習(xí)如何做到版本控制，規(guī)范 Git 提交，一步步實現(xiàn)項目落地，和 UI、產(chǎn)品、測試、后端一同協(xié)作開發(fā)。在協(xié)助我的 mentor 進行面試的時候，偶然看到了我當(dāng)初的面試評級是 A，高興了好一陣子。
不過，天下無不散之宴席，意識到要秋招的我，辭去了實習(xí)崗位，投入到復(fù)習(xí)階段。然后我就被校招好好上了一課，由于我是非科班，根本不懂什么算法，只會簡單的數(shù)據(jù)結(jié)構(gòu)，于是乎在各公司的秋招筆試、面試中，吃盡了苦頭。
ps：這里推薦幾本書籍和我常用的學(xué)習(xí)網(wǎng)站（需要翻墻）：
《圖解 HTTP》
《JavaScript ES6函數(shù)式編程入門經(jīng)典》
《學(xué)習(xí)JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》
《你不知道的JavaScript》系列
MDN，淘系前端團隊，凹凸實驗室
medium.com/
codepen.io/
dev.to/
developers.google.cn/web/
面經(jīng)分享
第一部分是我前端面試的經(jīng)驗總結(jié)，第二部分是我認(rèn)為比較有思考空間的題目
經(jīng)驗總結(jié)
一份漂亮的簡歷，需要包括以下部分（排版由上而下）
個人亮點（專精領(lǐng)域，個人博客，開源項目）
教育經(jīng)歷（畢業(yè)院校，在校經(jīng)歷、榮譽）
工作經(jīng)歷（實習(xí)）
項目經(jīng)歷
專業(yè)技能
扎實的前端基礎(chǔ)，比如
作用是什么？flex:1的 1 代表什么？Generator如何拋出錯誤？
熟悉一門前端框架（React 優(yōu)先）
勤刷 LeetCode 的算法題，熟悉掌握相應(yīng)的數(shù)據(jù)結(jié)構(gòu)如常見的鏈表、棧、隊列、哈希表、樹
熟悉網(wǎng)絡(luò)基礎(chǔ)、Git 命令、Linux 命令
多去了解前端的新趨勢（Flutter，PWA，Serveless，GraphQL）
要有自信，讓面試官感受到你對前端的熱愛
面試題
由于面試的公司和次數(shù)略多，老生常談的面試題就不放出來了，也不按公司劃分面試題了
算法題
大多出自 LeetCode ，LeetCode HOT 100，最好自己過一遍，理解最優(yōu)解
編程題
用 Class 實現(xiàn) EventEmitter，要求擁有 on，once，emit，off 方法
實現(xiàn) deepClone，要求能成功克隆帶有循環(huán)引用的對象
CSS 實現(xiàn)一個寬度為瀏覽器1/2，寬高比為 2:1 的盒子
實現(xiàn) sum 函數(shù)
sum(1)(2)(3) == 6; // truesum(1, 2, 3) == 6; // true
實現(xiàn) sum2 函數(shù)
console.log(sum2(1)(2)(3)()) // 6console.log(sum2(1, 2, 3)()); // 6
用尾遞歸實現(xiàn) fibonacci 數(shù)列
實現(xiàn) co 函數(shù)
實現(xiàn)以下功能，當(dāng)對一個 arr 做 push 操作時，會自動打印一行提示消息
const arr = [1,2,3];arr.push(4);// arr pushed a new element: 4
代碼實現(xiàn)中斷 Promise 的運行
有一組圖片，實現(xiàn)后一張圖片必須等到上一張圖片加載完畢，才能開始加載
為 Test 類添加方法，打印指定內(nèi)容
class Test {constructor() {this.person = { name: "jack", age: 38, position: "CTO" };}// ......}const test = new Test();for (const ele of test) {console.log(ele);}// [ 'name', 'jack' ]// [ 'age', 38 ]// [ 'position', 'CTO' ]
實現(xiàn) handler 函數(shù)，遇到 b 和 ac 都要去除
console.log(handler("aabaa")); // 'aaaa'console.log(handler("abaccbc")); // 'c'console.log(handler("aaccc")); // 'c'console.log(handler("aaabccc")); // ''
實現(xiàn) decode 函數(shù)
decode('HG[3|B[2|CA]]F') === 'HGBCACABCACABCACAF' // true實現(xiàn) _bind 函數(shù)，使打印 success
function Animal(name, color) {this.name = name;this.color = color;}Animal.prototype.say = function() {return `I'm a ${this.color} ${this.name}`;};const Cat = Animal._bind(null, "cat");const cat = new Cat("white");if (cat.say() === "I'm a white cat" &&cat instanceof Cat &&cat instanceof Animal) {console.log("success");}
CSS 實現(xiàn)圓環(huán)進度條效果
說出以下打印內(nèi)容
console.log(-1 >>> 32);console.log(-1 << 32);console.log(1 >> 32);console.log(5 >>> 2);var a = { n: 1 };var b = a;a.x = a = { n: 2 };console.log(a.x);console.log(b.x);
簡答題
實現(xiàn) F12 開發(fā)者工具的檢查（inspect）功能
實現(xiàn) 把一個盒子從一個區(qū)域拖放到另一個指定區(qū)域中
盒子一部分在區(qū)域內(nèi)，一部分在區(qū)域外，該如何處理
簡述幾個封裝好的關(guān)鍵方法
開發(fā)完的項目，在微信瀏覽器上白屏，該如何排查
如何統(tǒng)計一個頁面上哪些區(qū)域用戶點擊次數(shù)最多
如何根據(jù)按鈕級別的粒度，設(shè)計用戶權(quán)限，例如：A 可以訪問按鈕，B 不可以
如何對一個網(wǎng)頁內(nèi)容進行自動化截屏，如何解決登錄限制
A組件包裹B組件，B組件包裹C組件，它們的 componentDidMount 觸發(fā)順序如何
React setState 到底是異步還是同步的，其原理是什么
React Hooks 的使用有哪些注意事項
React 的合成事件機制
簡述 React 類組件的新老生命周期，談?wù)?React Fiber 架構(gòu)的引入
詳細(xì)介紹一下 Redux 狀態(tài)管理，如何和 React 組件連接
React HOC 的用途，什么是裝飾器模式
Mobx 的實現(xiàn)原理
Koa 的中間件原理，介紹一下 compose 函數(shù)
介紹 NodeJS 的 EventLoop 機制，process.nextTick() 的作用
NodeJS 是單線程還是多線程，都有哪些線程，JS 為什么是單線程的
CommonJS 的實現(xiàn)原理
NodeJS 中存在哪些流，怎么理解 pipe() 及其優(yōu)點
require 的解析規(guī)則
介紹一下負(fù)載均衡，NodeJS 的 cluster 和 child_process 是什么
webpack 是如何進行打包的
webpack 動態(tài) import 是如何實現(xiàn)的
如何編寫自己的 loader 和 plugin
簡述 webpack 配置文件中的 externals，UMD 了解嗎
介紹一下 DNS，什么是迭代查詢和遞歸查詢，什么是一級域名、二級域名
HTTP 首部（Header）和實體（Body）的分隔符是什么，用正則如何匹配
HTTPS 的詳細(xì)過程，什么是數(shù)字證書，消息摘要，非對稱加密，Hash 算法
如何實現(xiàn) Tab（標(biāo)簽）頁之間，客戶端與服務(wù)器的實時通訊
HTTP 狀態(tài)碼：301、302、307 的區(qū)別
簡述瀏覽器的垃圾回收機制，什么是強引用、弱引用、循環(huán)引用
簡述 requestAnimationFrame 和 requestIdleCallback 的作用
CSS 選擇器的解析順序是從右到左，還是從左到右，為什么
click 事件在移動端有什么問題，如何解決，你在移動端還遇到那些坑
簡述 JWT 的生成過程和優(yōu)缺點，怎么主動注銷 JWT 和續(xù)簽 JWT
通過什么檢測網(wǎng)站的性能，有哪些指標(biāo)
如何查看網(wǎng)站的 Ajax 請求是由哪行代碼發(fā)出的，一個元素都綁定了哪些事件，Chrome 調(diào)試面板 F8,F10,F11 各代表什么
說說你對 jpg、gif、jpeg、png、webp、base64 URL 的了解
結(jié)尾
天道酬勤，只要你想，大廠offer并不是遙不可及！
希望我的經(jīng)歷能為你帶來幫助，如果有問題，請在評論區(qū)留言，下篇文章將會分享我的 前端知識點筆記 ?！
分享前端好文，點亮?在看?