作者|沈礫捷(磐衝)
出品|阿里巴巴新零售淘系技術部

我是誰？為什麼寫這篇文章？

好吧，我承認，我自己在招聘上可能是有點沒找到方法。但是，看了那麼多簡歷，經歷了那麼多次面試，我最大的感受卻是惋惜。因為有好多同學，在電話那頭我聽出了努力，聽出了能力，聽出了激情，但是卻沒有聽到亮點、和讓我覺得，能夠繼續闖過下一關的能力。

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

我們想要的同學

★ JD

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

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

職位要求
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/服務端開發等經驗者優先。

★ 翻譯一下JD

為什麼起這個標題呢？因為有很多人看到職位描述，可能就在和自己做的事情一一比對，把關鍵字都核對上。而很多前端同學看到職位要求第一條裡的圖形學，可能就開始打退堂鼓了。或者看到幾個關鍵字自己都認識，就覺得沒問題，還挺簡單的。

就這樣望而卻步真的好嗎？為什麼職位描述看著簡單，面試卻這麼難呢？你真的讀懂這份職位描述了嗎？
現在，不妨先停一下，就上面的問題，我們來細細品一下。

什麼叫讀懂職位描述呢？從我個人的理解，讀懂職位描述，應該是讀懂這個職位需要哪些基礎能力，以及可能遇到哪些挑戰。我們寫自己簡歷的時候，“精通react”和“熟練使用react”，相信大家不會隨意去寫。同樣的，JD 裡面的：掌握、熟練掌握、瞭解、熟悉，也不是隨意寫的，這代表了團隊對新同學的能力要求。

回想寫自己簡歷的時候，我們會對這個前綴捫心自問一下。因為會擔心一旦寫了精通，面試官的問題會更難，甚至覺得只有源碼倒背如流的人，才能稱得上精通。當然也會有同學非常自信，用 react 做過幾個項目，就寫上了精通 react 。

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

首先，總覽全部的要求，會發現這個職位雖然提到了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頁面，同時還有額外精力去支持大促會場頁。更好的技術思考和設計，一定能給你帶來更多的可能性，而系統的優雅程度，一定不是靠業務代碼的堆砌，而是作為技術核心的你，如何去思考。

我想怎麼幫你

我相信每個人都是能快速成長的，只是每個人缺少的東西不同。有的人少了些腳踏實地，有的人少了些登高望遠的機會，更多的人或許只是沒有找到那條正確的路。
我希望這篇文章能夠幫助到正在前端領域努力的人，也希望這一篇文章就能成為指路明燈之一。但同時我也深知，每個人都是不一樣的，所以，我這裡留下聯繫方式， 需要的同學可以加微信：vianvio （加備註：前端同路人）

我可以給你做模擬面試，同時給出我認為的，適合你的發展思路和建議，當然也可以幫你內推。

另外，目前我們成立了一個模擬面試群，有定期活動，可以參考：https://github.com/vianvio/FE-Companions 歡迎有興趣的同學來參加。

介紹一下我所在的團隊

我在阿里巴巴淘寶技術部-ihome 業務。目前，ihome 正在深耕家居家裝行業，縱向深入行業內部，希望能給行業帶來一些創新。目前可對外公開的產品和業務形態有：躺平 App、位於青島和寧波的桔至生活門店。我們還有更多有趣、充滿挑戰和超出你想象的業務。
如果你願意來和我們一起相信，那請發送簡歷過來，我們一定會一起看見！
前端簡歷請發送到：[email protected] 或 [email protected]
主攻3d方向的同學，簡歷請發送到：[email protected]
java簡歷請發送到：[email protected] 或 [email protected]
客戶端簡歷請發送到：[email protected]
或許有人會覺得奇怪，聯繫方式寫在最後，還有多少人能看到，這裡我引用馬老師和逍遙子老師對阿里價值觀的解讀，來解釋一下：我們的價值觀是為了幫助我們尋找同路的人。我們期待有志之士的加入！

關注「淘系技術」微信公眾號，一個有溫度有內容的技術社區~