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

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

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

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

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

我們想要的同學

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，何況我又遇不到這些場景，我怎麼可能知道。

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

1. 我所認識的淘寶前端，以及我所在團隊的P6同學，上面初級都能做到，中級至少覆寫60%，進階覆寫20%；P6+同學，中級覆寫80%以上，進階覆寫50%以上；P7同學進階覆寫80%以上。
2. 我們團隊的前端，每一個人都負責多個複雜業務項目(客觀資料上：至少對接20+服務端接口，5個以上router配置，涉及多個使用者角色的綜合業務系統)，以及一些通用能力，比如元件庫等。不存在一個人隻接一條業務線，隻負責維護某幾個元件這種螺絲釘式的工作。我不知道大廠都是螺絲釘的言論為什麼會被複用到網際網路企業，我個人感受是，如果我在阿裡的工作是螺絲釘，那麼我以前幾份工作可能勉強算是螺紋。另外，如果你想要晉升，那麼維護好這幾個業務系統隻是你的本職工作，晉升時請提供一些更高層面的思考和技術産出。
3. 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的遊戲。在時間問題排除之後，我建議分三個階段：

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

我想怎麼幫你

我相信每個人都是能快速成長的，隻是每個人缺少的東西不同。有的人少了些腳踏實地，有的人少了些登高望遠的機會，更多的人或許隻是沒有找到那條正确的路。

我希望這篇文章能夠幫助到正在前端領域努力的人，也希望這一篇文章就能成為指路明燈之一。

介紹一下我所在的團隊

我在阿裡巴巴淘寶技術部-ihome業務。目前，ihome正在深耕家居家裝行業，縱向深入行業内部，希望能給行業帶來一些創新。目前可對外公開的産品和業務形态有：躺平App、位于青島和甯波的桔至生活門店。我們還有更多有趣、充滿挑戰和超出你想象的業務。我們期待有志之士的加入！

或許有人會覺得奇怪，聯系方式寫在最後，還有多少人能看到，這裡我引用馬爸爸和逍遙子大佬對阿裡價值觀的解讀，來解釋一下：我們的價值觀是為了幫助我們尋找同路的人。

感謝你陪我一起走到這篇文章的最後，如果你覺得這篇文章已經對你有很大幫助了，那就請我喝杯咖啡吧~

最後

1. 覺得文章不錯，可以點個​

   ​在看​

   ​​呀^_^另外歡迎​

   ​留言​

   ​交流～
2. 關注我的公衆号​

   ​若川視野​

   ​，回複pdf領取前端優質書籍pdf
3. 我的部落格位址：​

   ​https://lxchuan12.cn​

   ​​ 歡迎收藏