我在阿里招前端，我該怎麼幫你？

時間 2020-02-17

原文原文鏈接

我是誰？爲何寫這篇文章？

我是淘寶技術部的一名普通的前端技術專家，花名磐衝。每一年都想給團隊內招幾個同窗，可是努力了幾年，一個都沒有招進來。是我看簡歷太少了嗎？不是，只算內部簡歷系統，我看過的簡歷至少上千。是我要求太嚴格嗎？也許是吧，不過，我電話面試拒絕的同窗，只有1位在一段時間後，入職了另外一個部門。css

好吧，我認可，我本身在招聘上多是有點沒找到方法。可是，看了那麼多簡歷，經歷了那麼屢次面試，我最大的感覺倒是可惜。由於有好多同窗，在電話那頭我聽出了努力，聽出了能力，聽出了激情，可是卻沒有聽到亮點、和讓我以爲，可以繼續闖過下一關的能力。前端

我面試過的同窗，在結束的時候，我都會指出問題，並給出學習建議。大部分同窗不是不夠努力，不是不夠聰明，而是沒有找對方法，沒有切中要害。我總結了一下以前全部的面試經歷，以及常見的問題，寫下這篇文章，但願可以給前端的同窗，不管是否來面試阿里的職位，有一個參考。同時，也是寫下我本身總結的方法，但願能幫助到其餘技術相關的同窗。vue

咱們想要的同窗

JD

業務背景

淘寶內部最大創新項目之一，大團隊已有百人規模，大部分項目處於保密階段，前景遠大node

職位描述

1.負責組件庫與業務頁面開發。
2.帶領團隊完成技術產品實現。
3.負責大型多應用架構設計。
4.利用前端技術與服務端協同完成團隊業務目標。react

職位要求

0.掌握圖形學，webgl或熟練使用threejs框架，熟練canvas相關渲染及動畫操做的優先。
1.熟練掌握JavaScript。
2.熟悉經常使用工程化工具，掌握模塊化思想和技術實現方案。
3.熟練掌握React前端框架，瞭解技術底層。同時瞭解vue以及angular等其餘框架者優先。
4.熟練掌握react生態經常使用工具，redux/react-router等。
5.熟悉各類Web前端技術，包括HTML/XML/CSS等，有基於Ajax的前端應用開發經驗。
6.有良好的編碼習慣，對前端技術有持續的熱情，個性樂觀開朗,邏輯性強，善於和各類背景的人合做。
7.具備TS/移動設備上前端開發/NodeJS/服務端開發等經驗者優先。webpack

翻譯一下JD

爲何起這個標題呢？由於有不少人看到職位描述，可能就在和本身作的事情一一比對，把關鍵字都覈對上。而不少前端同窗看到職位要求第一條裏的圖形學，可能就開始打退堂鼓了。或者看到幾個關鍵字本身都認識，就以爲沒問題，還挺簡單的。ios

就這樣望而卻步真的好嗎？爲何職位描述看着簡單，面試卻這麼難呢？你真的讀懂這份職位描述了嗎？

如今，不妨先停一下，就上面的問題，咱們來細細品一下。什麼叫讀懂職位描述呢？從我我的的理解，讀懂職位描述，應該是讀懂這個職位須要哪些基礎能力，以及可能遇到哪些挑戰。咱們寫本身簡歷的時候，「精通react」和「熟練使用react」，相信你們不會隨意去寫。一樣的，JD裏面的：掌握、熟練掌握、瞭解、熟悉，也不是隨意寫的，這表明了團隊對新同窗的能力要求。git

回想寫本身簡歷的時候，咱們會對這個前綴捫心自問一下。由於會擔憂一旦寫了精通，面試官的問題會更難，甚至以爲只有源碼滾瓜爛熟的人，才能稱得上精通。固然也會有同窗很是自信，用react作過幾個項目，就寫上了精通react。github

這兩種均可以稱爲精通，也都不能夠。沒有客觀標準，又怎麼去衡量呢？而標準在哪裏呢？因此在這裏，我從阿里面試官角度，給出我認爲的標準，儘量的作到客觀可量化。那麼，基於上面這份職位標準，我來翻譯一下職位要求：web

首先，總覽所有的要求，會發現這個職位雖然提到了3d相關的技能，可是大部分倒是應用開發相關的能力，因此這個職位並非想找專業的3d領域同窗，而是須要一個工程化能力強，對3d有了解的同窗。

0.掌握圖形學，webgl或熟練使用threejs框架，熟練canvas相關渲染及動畫操做的優先。

初級：

學習過圖形學相關知識，知道矩陣等數學原理在動畫中的做用，知道三維場景須要的最基礎的構成，能用threejs搭3d場景，知道webgl和threejs的關係。
知道canvas是幹嗎的，聊到旋轉能說出canvas的api。
知道css動畫，css動畫屬性知道關鍵字和用法(換句話說，電話面試會當場出題要求口噴css動畫，至少能說對大概，而不是回答百度一下就會用)。
知道js動畫，能說出1~2個社區js動畫庫，知道js動畫和css動畫優缺點以及適用場景。
知道raf和其餘達到60fps的方法。

中級：

若是沒有threejs，你也能基於webgl本身封裝一個簡單的threejs出來。
聊到原理能說出四元數，聊到鼠標操做能提到節流，聊到性能能提到restore，聊到幀說出raf和timeout的區別，以及各自在優化時候的做用。
知道怎樣在移動端處理加載問題，渲染性能問題。
知道如何結合native能力優化性能。
知道如何排查性能問題。對chrome動畫、3d、傳感器調試十分了解。

高級：

搭建過整套資源加載優化方案，能說明白總體方案的各個細節，包括前端、客戶端、服務端分別須要實現哪些功能點、依賴哪些基礎能力，以及如何配合。
設計並實現過前端動畫引擎，能說明白一個複雜互動項目的技術架構，知道須要哪些核心模塊，以及這些模塊間如何配合。
有本身實現的動畫相關技術方案產出，這套技術方案必須是解決明確的業務或技術難點問題的。爲了業務快速落地而封裝一個庫，不算這裏的技術方案。若是有相似社區方案，必須能從原理上說明白和競品的差別，各自優劣，以及技術選型的緣由。

1.熟練掌握JavaScript。

初級：

JavaScript各類概念都得了解，《JavaScript語言精粹》這本書的目錄都得有概念，而且這些核心點都能脫口而出是什麼。這裏列舉一些作參考：
知道組合寄生繼承，知道class繼承。
知道怎麼建立類function + class。
知道閉包在實際場景中怎麼用，常見的坑。
知道模塊是什麼，怎麼用。
知道event loop是什麼，能舉例說明event loop怎麼影響平時的編碼。
掌握基礎數據結構，好比堆、棧、樹，並瞭解這些數據結構計算機基礎中的做用。
知道ES6數組相關方法，好比forEach，map，reduce。

中級：

知道class繼承與組合寄生繼承的差異，並能舉例說明。
知道event loop原理，知道宏微任務，而且能從我的理解層面說出爲何要區分。知道node和瀏覽器在實現loop時候的差異。
能將繼承、做用域、閉包、模塊這些概念融匯貫通，而且結合實際例子說明這幾個概念怎樣結合在一塊兒。
能脫口而出2種以上設計模式的核心思想，並結合js語言特性舉例或口噴基礎實現。
掌握一些基礎算法核心思想或簡單算法問題，好比排序，大數相加。

2.熟悉經常使用工程化工具，掌握模塊化思想和技術實現方案。

初級：

知道webpack，rollup以及他們適用的場景。
知道webpack v4和v3的區別。
脫口而出webpack基礎配置。
知道webpack打包結果的代碼結構和執行流程，知道index.js，runtime.js是幹嗎的。
知道amd，cmd，commonjs，es module分別是什麼。
知道全部模塊化標準定義一個模塊怎麼寫。給出2個文件，能口噴一段代碼完成模塊打包和執行的核心邏輯。

中級：

知道webpack打包鏈路，知道plugin生命週期，知道怎麼寫一個plugin和loader。
知道常見loader作了什麼事情，能幾句話說明白，好比babel-loader，vue-loader。
能結合性能優化聊webpack配置怎麼作，能清楚說明白核心要點有哪些，並說明解決什麼問題，須要哪些外部依賴，好比cdn，接入層等。
瞭解異步模塊加載的實現原理，能口噴代碼實現核心邏輯。

高級：

能設計出或具體說明白團隊研發基礎設施。具體包括但不限於：
項目腳手架搭建，及如何以工具形態共享。
團隊eslint規範如何設計，及如何統一更新。
工具化打包發佈流程，包括本地調試、雲構建、線上發佈體系、一鍵部署能力。同時，方案不只限於前端工程部分，包含相關服務端基礎設施，好比cdn服務搭建，接入層緩存方案設計，域名管控等。
客戶端緩存及預加載方案。

3.熟練掌握React前端框架，瞭解技術底層。同時瞭解vue以及angular等其餘框架者優先。

初級：

知道react常見優化方案，脫口而出經常使用生命週期，知道他們是幹什麼的。
知道react大體實現思路，能對比react和js控制原生dom的差別，能口噴一個簡化版的react。
知道diff算法大體實現思路。
對state和props有本身的使用心得，結合受控組件、hoc等特性描述，須要說明各類方案的適用場景。
以上幾點react替換爲vue或angular一樣適用。

中級：

能說明白爲何要實現fiber，以及可能帶來的坑。
能說明白爲何要實現hook。
能說明白爲何要用immutable，以及用或者不用的考慮。
知道react不經常使用的特性，好比context，portal。
能用本身的理解說明白react like框架的本質，能說明白如何讓這些框架共存。

高級：

能設計出框架無關的技術架構。包括但不限於：
說明如何解決可能存在的衝突問題，須要結合實際案例。
能說明架構分層邏輯、各層的核心模塊，以及核心模塊要解決的問題。能結合實際場景例舉一些坑或者優雅的處理方案則更佳。

4.熟練掌握react生態經常使用工具，redux/react-router等。

初級：

知道react-router，redux，redux-thunk，react-redux，immutable，antd或同級別社區組件庫。
知道vue和angular對應全家桶分別有哪些。
知道瀏覽器react相關插件有什麼，怎麼用。
知道react-router v3/v4的差別。
知道antd組件化設計思路。
知道thunk幹嗎用的，怎麼實現的。

中級：

看過全家桶源碼，不要求每行都看，可是知道核心實現原理和底層依賴。能口噴幾行關鍵代碼把對應類庫實現即達標。
能從數據驅動角度透徹的說明白redux，可以口噴原生js和redux結合要怎麼作。
能結合redux，vuex，mobx等數據流談談本身對vue和react的異同。

高級：

有基於全家桶構建複雜應用的經驗，好比最近很火的微前端和這些類庫結合的時候要注意什麼，會有什麼坑，怎麼解決

5.熟悉各類Web前端技術，包括HTML/XML/CSS等，有基於Ajax的前端應用開發經驗。

初級：

HTML方面包括但不限於：語義化標籤，history api，storage，ajax2.0等。
CSS方面包括但不限於：文檔流，重繪重排，flex，BFC，IFC，before/after，動畫，keyframe，畫三角，優先級矩陣等。
知道axios或同級別網絡請求庫，知道axios的核心功能。
能口噴xhr用法，知道網絡請求相關技術和技術底層，包括但不限於：content-type，不一樣type的做用；restful設計理念；cors處理方案，以及瀏覽器和服務端執行流程；口噴文件上傳實現；
知道如何完成登錄模塊，包括但不限於：登錄表單如何實現；cookie登陸態維護方案；token base登陸態方案；session概念；

中級：

HTML方面可以結合各個瀏覽器api描述經常使用類庫的實現。
css方面可以結合各個概念，說明白網上那些hack方案或優化方案的原理。
能說明白接口請求的先後端總體架構和流程，包括：業務代碼，瀏覽器原理，http協議，服務端接入層，rpc服務調用，負載均衡。
知道websocket用法，包括但不限於：鑑權，房間分配，心跳機制，重連方案等。
知道pc端與移動端登陸態維護方案，知道token base登陸態實現細節，知道服務端session控制實現，關鍵字：refresh token。
知道oauth2.0輕量與完整實現原理。
知道移動端api請求與socket如何經過native發送，知道如何與native進行數據交互，知道ios與安卓jsbridge實現原理。

高級：

知道移動端webview和基礎能力，包括但不限於：iOS端uiwebview與wkwebview差別；webview資源加載優化方案；webview池管理方案；native路由等。
登錄抽象層，可以給出完整的先後端對用戶體系的總體技術架構設計，知足多業務形態用戶體系統一。考慮跨域名、多組織架構、跨端、用戶態開放等場景。
mock方案，可以設計出知足各類場景須要的mock數據方案，同時能說出對先後端分離的理解。考慮mock方案的通用性、場景覆蓋度，以及代碼或工程侵入程度。
埋點方案，可以說明白前端埋點方案技術底層實現，以及技術選型原理。可以設計出基於埋點的數據採集和分析方案，關鍵字包括：分桶策略，採樣率，時序性，數據倉庫，數據清洗等。

6.有良好的編碼習慣，對前端技術有持續的熱情，個性樂觀開朗，邏輯性強，善於和各類背景的人合做。

初級：

知道eslint，以及如何與工程配合使用。
瞭解近3年前端較重要的更新事件。
面試過程當中遇到答不出來的問題，能從邏輯分析上給出大體的思考路徑。
知道幾個熱門的國內外前端技術網站，同時能例舉幾個面試過程當中的核心點是從哪裏看到的。

高級：

在團隊內推行eslint，並給出工程化解決方案。
面試過程思路清晰，面試官給出關鍵字，可以快速反應出相關的技術要點，可是也要避免口若懸河，說一堆可有可無的東西。舉例來講，當時勾股老師面試個人時候，問了我一個左圖右文的佈局作法，個人回答是：我本身總結過7種方案，其中比較好用的是基於BFC的，float的以及flex的三種。以後把關鍵css口噴了一下，而後css就面完了。

7.具備TS/移動設備上前端開發/NodeJS/服務端開發等經驗者優先。

根據瞭解的深度分初/中/高級。
知道TS是什麼，爲何要用TS，有TS工程化實踐經驗。
知道移動端前端常見問題，包括但不限於：rem + 1px方案；預加載；jsbridge原理等。
能說出大概的服務端技術，包括但不限於：docker；k8s；rpc原理；中後臺架構分層；緩存處理；分佈式；響應式編程等。

JD的要求很難嗎？

首先，感謝你能看到這裏，若是你是仔細看的，那麼我更加感動了。並且你已經用實際行動，證實了你的學習能力和耐心。上面那麼大篇幅的JD翻譯，有一個問題，你們應該都有答案了：爲何職位描述看着簡單，面試卻這麼難呢？然而，有些同窗可能會嘲諷起來：寫了那麼多，我認識的有些阿里P6，P7也不是都會啊，大廠都是螺絲釘，也就面試時候問問，實際工做不仍是if else，況且我又遇不到這些場景，我怎麼可能知道。

在這裏，我想嚴肅的說明的是：

我所認識的淘寶前端，以及我所在團隊的P6同窗，上面初級都能作到，中級至少覆蓋60%，高級覆蓋20%；P6+同窗，中級覆蓋80%以上，高級覆蓋50%以上；P7同窗高級覆蓋80%以上。

咱們團隊的前端，每個人都負責多個複雜業務項目(客觀數據上：至少對接20+服務端接口，5個以上router配置，涉及多個用戶角色的綜合業務系統)，以及一些通用能力，好比組件庫等。不存在一我的只接一條業務線，只負責維護某幾個組件這種螺絲釘式的工做。我不知道大廠都是螺絲釘的言論爲何會被複用到互聯網企業，我我的感覺是，若是我在阿里的工做是螺絲釘，那麼我之前幾份工做可能勉強算是螺紋。另外，若是你想要晉升，那麼維護好這幾個業務系統只是你的本職工做，晉升時請提供一些更高層面的思考和技術產出。

if else也分鮮花和牛糞。有的人寫的是[].reduce，而有的人寫的是var temp = ''; for() { temp += 'xxx' }。另外，若是不知道原理，那麼相似webpack這種明星級的技術產品，將永遠與你無緣。冷靜下來想一想，webpack難道也只是if else嗎？是，又不全是。

聰明的你應該看出來了，上面JD翻譯裏的初級、中級和高級，對應的就是我認爲的，阿里p6/p6+/p7的能力標準，同時也是一張知識圖譜。初級的要求更偏實際應用和基礎原理，中級的要求是基於原理的拓展和複雜技術架構的應用，高級的要求是對跨棧、跨端，多領域結合產出綜合方案的能力。並且，咱們對技術的要求，都是可以與實際業務場景結合，或者能對提高工做效率有幫助的。空談和尬想，或者只是百度來的文章，沒有通過內化，那麼面試過程當中將被瞬間拆穿。

有時我會在boss直聘上直接打字面試，有時我也會聽到面試過程當中，電話那頭傳來鍵盤敲擊的聲音，甚至有時候我會主動讓面試的同窗去百度一下，或者掛電話思考一下，過15分鐘再聊。我敢這麼面試，由於我知道，我要的答案你查不出來，我看的是你真正理解的東西。能搜索到的，我不在意，我也但願你去查，來爲你更好的表現綜合能力。

破局的方法

好了，若是看到這裏，並無把你勸退的話，那麼讓咱們來點但願的曙光。這裏用一句阿里土話來給你們一些安慰：不難，要你幹嗎？

開篇我提到面試過那麼多同窗以後，我最大的感覺是可惜，由於有不少同窗在我看來就差一點點，他有足夠的我的能力，可能只是沒有找到感受。這裏我例舉兩個比較典型的問題。

什麼是亮點？

我相信這是不少同窗心中的疑惑，並且事實上，我看到不少簡歷下面的面試記錄都會寫：缺少亮點，暫不考慮。若是仔細看了上文，到這裏還有這個疑惑，那麼我以爲你須要再靜下心來感覺一下。

這裏我不對亮點作明確的表述，我舉一個例子來讓你們更有體感一些：

A: 負責公司前端工做，使用webpack打包代碼併發佈線上。使用webpack配置對總體性能作優化，用happypack加快了打包速度。
B: 建設內部雲構建體系，產出通用命令行指令工具；將發佈、環境切換、快速回滾能力平臺化，保證了線上環境穩定性；同時將研發流程量化管控，每週產出研發效能報告。

若是你是面試官，在簡歷的大海里看一個項目描述，什麼最吸引你的眼球呢？是webpack，happypack的關鍵字嗎？仍是一句話就讓你想到這件事的複雜性，和這個系統帶來的巨大價值？

沒有場景怎麼辦？

這也是不少同窗常常遇到的問題。上面例舉了那麼多技術點，而我在的環境，前端就我一個，甚至服務端我都要寫一點，哪有精力去搞這種大規模團隊用到的東西？

首先，時間靠本身合理規劃。我和老婆兩我的本身帶孩子，有兩個娃，天天平均9點下班，我天天回家收拾玩具，孩子睡得晚可能須要再陪玩一下，週末我帶孩子爲主，可是我去年仍然白金了2個ps4的遊戲。

在時間問題排除以後，我建議分三個階段：

畢業3年之內的階段：不用着急，你的選擇不少，你能夠覈對上面初級的點，看本身是否都作到了，沒作到就去好好學習吧，初級的技術要點對團隊規模沒有依賴，一我的也能作到極致。若是你所處的環境已經有2我的，能夠同時關注中級和高級的點，不要以爲人少就不去嘗試，放手去作，過程當中會有實打實的收穫。
畢業5年之內的階段：不論你處的環境團隊規模如何，請開始着眼於中級和高級相關能力，人少就不須要研發提效了嗎？我在segmentFault上發的第一篇文章，是如何用travis和github作一鍵部署，那時候我尚未去淘寶，我所在的團隊也沒有用到這個能力，這篇文章是我本身的我的項目用到的。而整個過程一樣涉及到了研發效能的方方面面。
畢業8年之內的階段：請開始着眼於高級相關的技術方案產出。我以組件動態化爲例，我早年維護手機淘寶的整個交易鏈路H5頁面，全部頁面的ui部分都是細粒度組件化抽離，經過配置下發頁面結構的。即便一我的維護一個頁面，也要竭盡所能去思考好的技術方案。這種高度動態的設計，帶來的好處是，每一年雙十一，80%的需求交給pd本身處理就好了，剩下流轉到我手上須要開發的需求，都是新增交互，或者以前抽象不足的組件。因此當時我在的團隊，3我的在維護了包括手淘首頁、商品詳情和正逆向交易鏈路全部H5頁面，同時還有額外精力去支持大促會場頁。更好的技術思考和設計，必定能給你帶來更多的可能性，而系統的優雅程度，必定不是靠業務代碼的堆砌，而是做爲技術核心的你，如何去思考。