2020 校招，我是如何拿到小米、京東、位元組大廠前端offer

愛前端不愛戀愛發表於2020-11-09
前端

前言
Hi~，我是 2020 屆物聯網專業畢業生，現就讀於杭州。謹以此文來記錄我的秋招以及入門前端以來的學習歷程，如有錯誤，希望大家能及時提出！



面試情況
從19年8月初到11月底，前前後後一共面試了 14 家公司的前端崗，按城市劃分為：
北京：小米，京東，美團，百度，去哪兒
杭州：阿里，網易，微店，位元組跳動
上海：七牛雲，哈囉出行
深圳：騰訊，富途，樂信
歷時4個月，最終收穫了 小米、京東、微店、位元組跳動 的offer
過程太過曲折，這其中也發生了很多讓我印象深刻的事……
8月初，提前批面試aliyun，撲通倒在了三面；正式批面試淘系技術部，HR面後，過了大概兩個星期，變成 面試已回絕
（釋出文章時，系統一直提示有違禁詞彙，檢查了半天，原來是 aliyun 的鍋，只可以打拼音）
9月中旬，簡訊收到了百度面試的喜訊，興高采烈買了去上海的動車票，起了個大早，卻連 現場一面也沒通過
10月初，郵箱收到網易的現場面試通知，那一天從 10:00 面到 19:00，等候區就剩我一人了，HR面結束後，工作人員還送了張食堂券（不愧是豬廠，伙食還不錯），結尾依舊收到了 拒信
11月中旬，已經收穫了雷布斯的offer，但不想獨自去北京奮鬥，抱著不死心的態度，我再次面試了 位元組跳動（之前提前批簡歷直接被刷），經過 四輪技術+一輪HR 之後，成功留在了杭州研發中心（我可是抖音的忠實使用者！）
整個秋招，我的心情從一開始的信心滿滿，到感覺自己進大廠的機會渺茫，最後觸底反彈，想想真是一波三折



成長之路



“我自己是一名從事了8年web前端開發的老程式設計師（我的微信：webxxq），今年年初我花了一個月整理了一份最適合2020年自學的web前端全套培訓教程（（視訊+筆記+素材+原始碼+專案實戰），從最基礎的HTML+CSS+JS到移動端HTML5以及各種框架和新技術都有整理，打包給每一位前端小夥伴（總共約85G），這裡是前端學習者聚集地，歡迎初學和進階中的小夥伴（所有前端教程關注我的微信公眾號：web前端學習圈，關注後回覆“2020”即可領取）。

大一
回想起來，當初掉入前端這個坑，是因為參加了大一開設的選修課：《小型網站的建設與維護》。
第一節課，講課老師新建了一個 txt 文字，寫入幾行程式碼，然後修改字尾名為 html，一個網頁就被這樣被建立了，還可以自定義樣式，作為小白的我，第一次感覺程式碼這麼有吸引力，才知道這個叫做 前端開發（碼農）。
在老師的鼓勵（慫恿）下，我報名參加了省裡的網站競賽，在學校機房度過了17 年的暑假。
最開始，我還是用 Adobe Dreamweaver 寫程式碼，jQuery 一把梭，管它什麼效能、程式碼規範、維護性，都不存在的。看著菜鳥教程，邊做邊學，能硬編碼就硬編碼，找現成的 JQ 外掛東拼西湊，我的網站才正式完工，想來都是一把辛酸淚……（當時只會寫 JQ 程式碼，原生 JS 根本不會寫）


大二
第二年，我意外發現了掘金這個網站，我的前端視野一下子廣闊了許多，發現很多前所未聞的名詞：閉包，ES6，原型，繼承， 作用域……
慢慢地，我自學了 React、Vue、原生 JavaScript、NodeJS。
為了學習 Git，我建了 GitHub 賬號。
為了搭建 個人部落格，購買了 aliyun 的學生伺服器和個人域名。一個星期的時間裡，我又是配環境，又是學 Linux 命令，第一次用 vim 簡直不要太爽，當我的部落格在公網成功開啟的那一刻，我感覺人生達到了巔峰！
期間，我報名參加了阿里的 D2 會議（雖然當時根本聽不懂，湊個熱鬧），那天特別激動來到西溪園區，看到了好多大牛!




大三
一月初，我報名參加了螞蟻金服體檢科技大會，會議更多的是從設計和使用者體驗角度出發，如何改善產品
見到了 AntD 的創造者：玉伯，御術等前端大佬
玉伯在開場就發表致歉，因為當年的聖誕節彩蛋事件，轟動不小！

時間來到大三下學期，我想在當地找個實習，於是投遞了人生第一份前端實習簡歷。面試當天，因為緊張，面試官給我遞來的紙水杯，在桌子上被我打翻了?……幸好，當天晚上就接到了HR的電話，通過了。
在這幾個月的實習期內（期間逃了不少課），公司給予了我足夠的發展空間，給我配了 MacBook 和 24 寸的顯示器。我嘗試 搭建腳手架，構建 React 企業應用， 寫 H5 頁面，從零開發微信小程式 等等。學習如何做到版本控制，規範 Git 提交，一步步實現專案落地，和 UI、產品、測試、後端一同協作開發。在協助我的 mentor 進行面試的時候，偶然看到了我當初的面試評級是 A，高興了好一陣子。
不過，天下無不散之宴席，意識到要秋招的我，辭去了實習崗位，投入到複習階段。然後我就被校招好好上了一課，由於我是非科班，根本不懂什麼演算法，只會簡單的資料結構，於是乎在各公司的秋招筆試、面試中，吃盡了苦頭。
ps：這裡推薦幾本書籍和我常用的學習網站（需要翻牆）：
《圖解 HTTP》
《JavaScript ES6函數語言程式設計入門經典》
《學習JavaScript資料結構與演算法》
《你不知道的JavaScript》系列
MDN，淘系前端團隊，凹凸實驗室
medium.com/
codepen.io/
dev.to/
developers.google.cn/web/




面經分享
第一部分是我前端面試的經驗總結，第二部分是我認為比較有思考空間的題目

經驗總結

  • 一份漂亮的簡歷，需要包括以下部分（排版由上而下）
  1. 個人亮點（專精領域，個人部落格，開源專案）
  2. 教育經歷（畢業院校，在校經歷、榮譽）
  3. 工作經歷（實習）
  4. 專案經歷
  5. 專業技能
  • 紮實的前端基礎，比如
  1. 作用是什麼？
  2. flex:1 的 1 代表什麼？
  3. Generator 如何丟擲錯誤？
  • 熟悉一門前端框架（React 優先）
  • 勤刷 LeetCode 的演算法題，熟悉掌握相應的資料結構如常見的連結串列、棧、佇列、雜湊表、樹
  • 熟悉網路基礎、Git 命令、Linux 命令
  • 多去了解前端的新趨勢（Flutter，PWA，Serveless，GraphQL）
  • 要有自信，讓面試官感受到你對前端的熱愛


    面試題
    由於面試的公司和次數略多，老生常談的面試題就不放出來了，也不按公司劃分面試題了


    演算法題
    大多出自 LeetCode ，LeetCode HOT 100，最好自己過一遍，理解最優解


    程式設計題
  • 用 Class 實現 EventEmitter，要求擁有 on，once，emit，off 方法
  • 實現 deepClone，要求能成功克隆帶有迴圈引用的物件
  • CSS 實現一個寬度為瀏覽器1/2，寬高比為 2:1 的盒子
  • 實現 sum 函式
sum(1)(2)(3) == 6; // true
sum(1, 2, 3) == 6; // true
  • 實現 sum2 函式
console.log(sum2(1)(2)(3)()) // 6
console.log(sum2(1, 2, 3)()); // 6
  • 用尾遞迴實現 fibonacci 數列
  • 實現 co 函式
  • 實現以下功能，當對一個 arr 做 push 操作時，會自動列印一行提示訊息
const arr = [1,2,3];
arr.push(4);
// arr pushed a new element: 4
  • 程式碼實現中斷 Promise 的執行
  • 有一組圖片，實現後一張圖片必須等到上一張圖片載入完畢，才能開始載入
  • 為 Test 類新增方法，列印指定內容
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' ]
  • 實現 handler 函式，遇到 b 和 ac 都要去除
console.log(handler("aabaa")); // 'aaaa'
console.log(handler("abaccbc")); // 'c'
console.log(handler("aaccc")); // 'c'
console.log(handler("aaabccc")); // '

'

  • 實現 decode 函式
    decode('HG[3|B[2|CA]]F') === 'HGBCACABCACABCACAF' // true
  • 實現 _bind 函式，使列印 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 實現圓環進度條效果
  • 說出以下列印內容
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);


**簡答題** * 實現 F12 開發者工具的檢查（inspect）功能 * 實現 把一個盒子從一個區域拖放到另一個指定區域中 * 盒子一部分在區域內，一部分在區域外，該如何處理 * 簡述幾個封裝好的關鍵方法 * 開發完的專案，在微信瀏覽器上白屏，該如何排查 * 如何統計一個頁面上哪些區域使用者點選次數最多 * 如何根據按鈕級別的粒度，設計使用者許可權，例如：A 可以訪問按鈕，B 不可以 * 如何對一個網頁內容進行自動化截圖，如何解決登入限制 * A元件包裹B元件，B元件包裹C元件，它們的 componentDidMount 觸發順序如何 * React setState 到底是非同步還是同步的，其原理是什麼 * React Hooks 的使用有哪些注意事項 * React 的合成事件機制 * 簡述 React 類元件的新老生命週期，談談 React Fiber 架構的引入 * 詳細介紹一下 Redux 狀態管理，如何和 React 元件連線 * React HOC 的用途，什麼是裝飾器模式 * Mobx 的實現原理 * Koa 的中介軟體原理，介紹一下 compose 函式 * 介紹 NodeJS 的 EventLoop 機制，process.nextTick() 的作用 * NodeJS 是單執行緒還是多執行緒，都有哪些執行緒，JS 為什麼是單執行緒的 * CommonJS 的實現原理 * NodeJS 中存在哪些流，怎麼理解 pipe() 及其優點 * require 的解析規則 * 介紹一下負載均衡，NodeJS 的 cluster 和 child_process 是什麼 * webpack 是如何進行打包的 * webpack 動態 import 是如何實現的 * 如何編寫自己的 loader 和 plugin * 簡述 webpack 配置檔案中的 externals，UMD 瞭解嗎 * 介紹一下 DNS，什麼是迭代查詢和遞迴查詢，什麼是一級域名、二級域名 * HTTP 首部（Header）和實體（Body）的分隔符是什麼，用正則如何匹配 * HTTPS 的詳細過程，什麼是數字證照，訊息摘要，非對稱加密，Hash 演算法 * 如何實現 Tab（標籤）頁之間，客戶端與伺服器的實時通訊 * HTTP 狀態碼：301、302、307 的區別 * 簡述瀏覽器的垃圾回收機制，什麼是強引用、弱引用、迴圈引用 * 簡述 requestAnimationFrame 和 requestIdleCallback 的作用 * CSS 選擇器的解析順序是從右到左，還是從左到右，為什麼 * click 事件在移動端有什麼問題，如何解決，你在移動端還遇到那些坑 * 簡述 JWT 的生成過程和優缺點，怎麼主動登出 JWT 和續簽 JWT * 通過什麼檢測網站的效能，有哪些指標 * 如何檢視網站的 Ajax 請求是由哪行程式碼發出的，一個元素都繫結了哪些事件，Chrome 除錯皮膚 F8,F10,F11 各代表什麼 * 說說你對 jpg、gif、jpeg、png、webp、base64 URL 的瞭解

**結尾** 天道酬勤，只要你想，大廠offer並不是遙不可及！ 希望我的經歷能為你帶來幫助，如果有問題，請在評論區留言，下篇文章將會分享我的 前端知識點筆記 ?！

相關文章