是不是夢想了好久，成爲叱詫風雲，揮手成頁面的前端大神？那你來對地方了，這篇文章整理了成爲前端大神的必備技能。先從初級前端工程師所需的技能開始，然後一路升級到高級工程師該掌握的技能，層層相扣，讓大家在工作中能遊刃有餘。最後附上我自己是如何從一個後端工程師轉成了前端工程師^^。看完這篇文章，照着這個方向走，一定能成爲別人羨慕已久的大神！
俗話說知己知彼百戰不殆，要成爲一名前端大神，首先知道它是做什麼的。單純從工作角度看，無非就是寫寫前端樣式，連接下後臺 api，解析解析數據，然後顯示給用戶，核心邏輯是這樣沒錯，只是這中間摻雜着無數個邊邊角角的問題，比如框架選擇、性能優化、兼容性調整、工程化等等。不過呢，這些並不需要一次性掌握，隨着一次一次完成工作任務，解決 bug，這些自然而然就學會了~
在正式開始之前，咱們先把心態放平，就像玩遊戲，遊戲滿級也不是一天兩天的事，滿級之後也纔是一個新的開始。。。無盡的追求完美~。時間上，掌握前端工程師的基本技能大概需要 4 個月到 1 年的時間（看自己的意志力和上進心），之後就是在工作實踐中不斷的提升自己，時刻關注業界新聞，保持在科技的最前沿。工作是一個長期的事情，咱們靜下心來慢慢學。
#完整技能大圖
先來看 github 上一大神製作的路線圖：
#核心技能
好了，相信你已經開始下定決心要成爲前端大神了，那咱們第一步就是把前端的核心裝備拿下，它們分別是 html, css 和 JavaScript。前端的初衷是開發網頁來讓其他人看的，可以向全世界分享信息，直到最近幾年才誕生了利用這些核心知識去開發移動 APP、小程序等多終端前端應用的工具，學好核心是前端工程師必備的素養。下邊就是核心技能的簡介：
#HTML
HTML 是用來編寫網頁代碼結構的，它有一系列的標籤用於顯示不同的頁面元素，比如用 <a/> 顯示一個超鏈接，<img/> 顯示一張圖片，就跟寫一個 word 文檔一樣，只是單純用 html 只能寫內容，不能進行排版和美化樣式，如果讓網頁變得漂亮，需要 CSS。
書籍：Web 開發經典叢書：HTML & CSS 設計與構建網站
#CSS
CSS 是用來美化 HTML 編寫的頁面的，通過一些語法選擇特定的 html 標籤，然後用一些屬性來給它們添加樣式，比如文字顏色，背景，位置，邊距，定位等等，還可以添加動畫效果讓頁面顯示的栩栩如生~。重點要掌握 CSS 的盒子模型、常用的佈局方式，比如 flex、grid 等。
#JavaScript
在寫完 html、css 之後，咱們就可以寫漂亮的頁面了，那麼接下來就是需要學習 JavaScript，讓網頁能和人進行互動，比如點擊按鈕彈出個對話框，處理用戶輸入的表單信息，添加一些複雜的動畫，使用 ajax 加載遠程數據等等。它可以直接操作 HTML 元素，給網頁開發提供了無限可能~這裏咱們一定要把 JavaScript 基礎語法掌握紮實，可以觀看我 B 站上的 JavaScript 視頻：
書籍：Eloquent JavaScript 3rd edition (包括 HTTP)
#網絡基礎
現在咱們可以做成型的網站了，那咱們該如何讓全世界的人看到咱們的傑作呢？那這裏網絡基礎就派上用場了，不需要精通，只需要掌握幾個基本概念就好了。
#域名
訪問網站咱們都知道需要使用 url (網址)，比如 www.baidu.com，這個 baidu.com 就是域名，域名可以從域名提供商購買，比如阿里雲。在購買域名之後要通過 DNS 解析服務把它對應到一臺服務器的 IP 地址上。
#服務器
服務器就是一臺安裝了服務器程序的電腦。用戶用域名訪問一個網站時，會有 DNS 解析服務把域名解析成 IP，再通過 IP 找到相應的服務器，服務器程序就把網站內容傳遞給用戶的瀏覽器。咱們的網站就部署在服務器上，它也是從阿里雲之類的提供商購買。
#Linux
服務器的操作系統一般是 linux，它可以沒有用戶界面，可以節省很多 CPU 和內存資源，這樣就要求咱們掌握一些常用命令，比如創建文件，切換目錄，複製和移動文件，顯示文件列表等。另外訪問服務器常用的工具是 SSH 和 FTP，咱們需要通過這幾個工具來從自己的電腦連接到遠程的服務器，然後安裝服務器程序和上傳網站程序。
#服務器程序
常用的服務器程序有 apache、nginx，它們都是基於 HTTP 協議的，有了服務器程序，網站文件比如 html 頁面才能發送到用戶的瀏覽器上。
#HTTP 協議
協議好比如說醫生開藥方，寫的龍飛鳳舞，但是藥房藥師居然都看得懂~這個可以說他們都有固定套路來理解對方~那麼在計算機領域，協議就是電腦之間用來交換數據的規則。HTTP 協議是用來在網絡上交換和傳輸數據的，比如說咱們的網站 html、css 和 js 就是通過這個 http 協議來發送到瀏覽器的。
#進階技能
上邊核心技能都掌握了的話，你就已經超過一半的前端工程師了，接下來就是成長爲更高級一些的前端工程師，這裏的目的是除了理解一些高級的概念之外，還要提高開發效率，也就是用到所謂的框架。
#響應式佈局
現在手機和平板差不多要比電腦都流行了，所以一個網站要適應不同尺寸的屏幕，有這種特性的網站就叫做響應式網站。實現響應式主要就是通過 css 的 media query 針對不同的屏幕寬度，編寫不同的 CSS 樣式。
#兼容性調整
網站需要在不同的操作系統和瀏覽器下都要保持一致。對於 CSS，可以使用 css hack 來對不同的瀏覽器加載不同的樣式。 對於 JavaScript，則可以使用 Babel 等轉化工具，把新的 JS 語法轉換成舊的，或者使用 polyfill 加上瀏覽器不支持的語法。
#UI 框架
UI 框架提供了頁面的基本 UI 樣式和佈局系統，比如按鈕、對話框、輪播圖，省了自己去開發，常用的有 Boostrap, Semantic UI， Tailwind CSS。
#SEO
SEO 全稱是 Search Engine Optimization，搜索引擎優化。咱們常見的百度、谷歌這些搜索引擎會定期爬取線上的網站內容，然後進行收錄，網站內容質量優秀、結構良好、訪問量大的還會排名比較靠前。爲了給自己的網站增加曝光量，這就需要針對搜索引擎給咱們的網站添加一些內容，比如關鍵字。
如何帶着 SEO 的思維將 MDN 的 Web 文檔寫的更符合搜索引擎展現
#Node.js、npm / yarn
因爲 Node.js 的出現，JavaScript 的開發可以脫離瀏覽器了，這樣就產生了好多借助 Node.js 來寫前端代碼的方式，然後用相應的打包工具去打包成瀏覽器可用的代碼。這樣的好處是，咱們可以充分利用 node.js 的包管理工具來方便開發，比如使用 npm 或者 yarn 管理項目的依賴。
#CSS 預編譯
咱們在寫 CSS 的時候可能一段代碼要重複好多次，寫一連串的選擇器，重複的屬性組合等等。這時 CSS 預編譯工具就派上用場了，比如 SASS、LESS，它們支持 CSS 選擇器嵌套、定義變量、Mixins、函數、繼承等等。
#自動化工具
自動化工具有 grunt、gulp 等，可以監控文件變動，或者做一些自動化操作，比如編譯 SASS 或 LESS 的代碼爲 CSS 等。
#React, Vue, Angular
這裏就不得不提當下十分熱門的前端開發框架了，React、Vue、Angular 三大件。它們都提供組件化開發的方式，這就讓前端開發模式發生了巨大的變化，以往以頁面爲核心現在轉爲了以組件爲核心，有了這些組件可以方便的在不頁面進行復用。另外基於狀態的數據管理，也讓改變組件狀態變得十分簡單。這三個框架可以都學，但是工作中基本上只會用到一個，深入一個就可以了。至於它們的 UI 框架也可以根據工作的需要去學習比如 ant design、element UI 等。
#模塊化 CSS
因爲 React 等組件化工程的出現，CSS 分散在不同的組件中，很容易因爲命名衝突而導致樣式被覆蓋，模塊化的 CSS 開發方式通過使用 css modules， 或者 styled-components (css-in-js 方式) 工具能很好的避免這些問題，它們也提供了其它類似 SASS/LESS 的功能。
#工程化工具
所謂工程化的工具，也就是打包工具，前端項目的各種 JS、SASS 源代碼可能分散的不同的地方，利用打包工具，比如 webpack、parcel，可以把它們打包成一個單一的 js 和 css 文件，它們支持按需打包，用到的代碼纔會打包到最終產品上，沒用到的則不會。另外圖片等靜態資源也可以指定規則進行打包。
#測試工具
沒有人想要不健壯的代碼，在改動一個地方之後引起全局崩塌~，咱們寫好的組件需要進行詳盡的測試才能確保不出問題，另外也方便咱們工程師節省時間，因爲只要添加的新功能保證測試結果還是正常，那麼就不需要再人工去測試了。常用的 UI 測試工具有 jest, enzyme 等等。
#高級技能
在把編寫網頁的技能掌握熟練以後，就要從多端開始拓展自己的技能了，另外還要深入已經掌握的技能。
#TypeScript
TypeScript 是微軟編寫的一款帶類型的 JavaScript 語言，它的代碼可以編譯成普通的 JavaScript，但是編寫的時候支持強類型，並且支持完全面向對象的形式。它的好處在於帶有了類型之後，代碼更容易維護，適合大型項目的開發。
#移動開發
移動開發包括移動的頁面 H5 開發、小程序和移動 APP 開發，好在這些有統一的開發平臺，使用 React 或者 Vue 就可以進行一次開發，多平臺使用。React 生態的有開發移動 APP 的 React Native，開發多端平臺的 taro。 Vue 有多端開發的 uni-app。
#桌面開發
桌面應用到現在還是有用武之地的，比如音樂軟件，聊天軟件，寫作軟件等等，這些也可以用前端技術開發，具體的工具有 eletron、proton native 等等。
#靜態網站生成工具
靜態網站因爲是純 html、css 和 JavaScript 網站，所以擁有最快的速度、對 SEO 搜索引擎優化友好，最適合用於數據不常變動的展示、博客類的網站的搭建，常用的工具有 hexo, gatsby, docusaurus 等。
#SSR（服務端渲染）
如果使用 React、Vue 等前端框架開發網站，那麼最終的頁面源代碼是沒有 html 的，因爲它們是用 JavaScript 去動態生成 html 代碼，這樣對 SEO 很不利，不過有了 serer side rendering，服務端渲染技術，就可以解決這個問題，它是把 JavaScript 生成好 HTML 之後，再把頁面發送給瀏覽器。常用的有 react 系的 next.js，vue 系的 nuxt.js。
#GraphQL
GraphQL 是一種查詢語言，跟普通的 restful 結構不一樣，它是按照類型來組織數據的，不同的類型之間也會有對應關係，就像數據一樣，前端開發者根據自己的需要編寫 graphql 語句來按需查詢想要的數據，它的這種模式非常適合 React 這種項目結構的開發。
#性能優化
性能優化的概念比較廣泛，而且根據應用的用戶量、用戶類別而不同。總體來說就是提高頁面首次加載的時間、動畫執行的效率、事件響應的效率。這些可以通過優化代碼結構、文件大小、DNS 緩存、lazy loading 等來實現。
書籍：Web 性能權威指南
#安全
安全也是一個寬泛的概念，要了解 CORS（跨域資源共享）, XSS（跨站腳本攻擊）, CSRF（跨站請求僞造） 等常見安全問題，也要了解 HTTPS 等安全協議，要儘量以周全的形式考慮，不要相信任何用戶的輸入，嚴格檢查需要接收用戶輸入的地方。
書籍：Web 安全測試
#工作與團隊技能
工作與團隊技能是在工作中所必備的，無論是初級還是高級前端工程師，這些只要在工作遇到了，就都需要掌握。
#Git
Git 是一個分佈式的代碼協作工具，幾乎所有的公司都在用。Github 是 git 的一個遠程倉庫，咱們可以把代碼發佈到 github 上，既可以作爲公開的向全世界展示自己的代碼、進行合作，也可以作爲私有的只限自己或者公司內部使用。
書籍：精通 Git 第 2 版
#Docker
Docker 是一種新的虛擬化技術，介於虛擬機和操作系統之間，它所用的資源少，並且能自動化管理鏡像的運行環境和集羣。因爲前後端開發的分離的方式，大型的前端應用也會部署到 Docker 上。
#CI
CI，持續集成，是一個自動化的部署過程，開發人員只需要改動代碼，提交到 git 倉庫，CI 系統會抓取代碼進行打包部署併發布，節省了人工運維的時間。
#ESLint 和 Prettier
代碼合作經常會有風格和規範不統一的情況。ESLint 除了可以檢查語法錯誤外，還可以定義開發規範，比如縮進字符的數量、命名方式等，而 prettier 則可以根據一些規範自動格式化代碼。
#最新技術
#WebAssembly
Web Assembly 是瀏覽器新支持的編程語言，用於輔助 JavaScript。確切的說，它不是一個編程語言，咱們可以用它的編譯器編譯其它語言，用來編寫更強大的功能，它目前支持 c++和 rust
#Web Components
Web Components 是類似 React、Vue 開發的方式，但是是 JS 原生支持的方式，不再需要依賴額外的庫。它的核心概念有 Custom elements（自定義元素），Shadow DOM（影子 DOM），HTML templates（HTML 模板）。
#最佳實踐
在前端開發過程中有一些最佳實踐需要了解，比如 JavaScript 的設計模式、組件設計原則、代碼結構等。
#持續進步
在掌握了上邊所有技能之後~咱們等級就算滿級了，現在就是真正的開始了，要不斷精進自己的技能。前端技術的發展相比其它技術要快的多，咱們要時常關注一些前端新聞還有業界大佬的博客或微博，自己主動去搜索一些新的前端庫或者設計模式，然後應用到工作中去，這樣纔不至於落後。另外，因爲好多技術都是外國人寫的，所以要想得到第一手且最準確的消息，一定要把英語學好，一些包和工具的官方文檔就算是靠着翻譯也要把它們看懂，相信我，過不了幾天，你會發現需要查的詞越來越少，閱讀速度也越來越快。
#個人經歷
我在上學的時候學的是 Java 開發，那時候是前後端整體開發，前端主要就是 HTML，CSS 和 jQuery。我在找到的第一份 Java 開發的工作時就被迫見識到了前後端半分離的開發方式，那時候是 2010 年，前端庫用的是 ExtJS，後端 Java web 開發框架用的是 struts2，來提供 JSON 數據，當時也是摸索了一陣子才徹底弄明白這個開發過程。後來在做自由職業的時候，又用 PHP 做過幾個全棧的網站，前端那時候接觸了 Bootstrap 框架，然後又摸索跨瀏覽器兼容性調整，知道了哪些 CSS 屬性只有在哪個瀏覽器下才能生效。那個時候是 2012 年左右，html5 和 css3 已經開始流行了，然後我就把幾個新出來的、覺得好玩的標籤寫了寫，比如<video /> 和 <audio />。再後來就又在業餘時間接觸了 Node.js，當時也不懂它是個什麼玩意，所以就沒咋去了解。
直到 2016 年，去美國讀研，室友同學學了 web 開發，然後我才體驗到了前端已經發生了天翻地覆的變化，於是趁着暑假，把 Node.js 這個東西搞明白了，無非就是個運行環境。。。然後看了下網上的意見，覺得 vue.js 在國內用的多，所以就看 vue 的官方文檔開始學習，看完基礎之後，就做了一個實戰項目，模仿了一下網易雲音樂的 UI，當時 CSS flexbox 佈局已經定型了，我就用它來對頁面上的元素進行佈局。後來發現 web 端不好選取本地的音樂進行播放，而又當時室友正在學 eletron，就正好一想可以用它練習一下，就把它做成了桌面版的，用了 howler.js 添加了音樂播放、快進、快退功能。再後來又異想天開，把配色改了改，改的也不太好看，接着開學了就作罷了。
回國之後，因爲我在美國主修的還是雲計算和企業軟件開發，所以想找找後端開發的工作，但是後端所用到的庫也都發生了變化，不過還好有學分佈式系統，有豐富的理論，我覺得面試肯定沒問題，，實際情況是到處碰灰，面試的看我沒相關工作經驗，框架也沒用過，都表現出特別不懈一顧的厭惡情緒，好嘛，我也不是沒志氣的人，話不投機半句多，走人~後來一想在學校的時候對前端還是有興趣的，一番搜索調查後，我又把目光描向了 React，看了幾天官方文檔之後就去面試。。。我這裏十分感謝招我進去的兩位經理大佬了，給了我機會去學習，去成長。這是 2018 年 7 月，我轉型成了前端工程師。公司只有我一個前端 web 端，入職當天下午就開始給我分配任務，開發一個影響力榜單申報系統，超多表單，超多驗證規則，要 4 周也就是一個月的時間內完成，壓力也是蠻大的，當時頭兒讓我用 dva.js 來開發，當時聽也沒聽過，就去它的官方網站看了看，基本是基於 model 形式的去管理狀態，不過後來發現這種狀態管理起來也還真是費勁，經過一番折騰，外加週末也加加班，這個項目算是按時搞定了，期間有無數的 bug 和需求變動，經過這些我對 React 組件化開發的方式有了徹底的認識。
後來第二個項目是做一箇中臺項目，因爲有技術大佬實現了 GraphQL 接口，我趁機體驗了一把 React 與 GraphQL 的結合，那真是相當的爽，再也不用手動管理 API 請求和請求的狀態了。我在谷歌上搜索了一下 React 連接 GraphQL 的庫，一個是 Relay，一個是 apollo，對比了一下兩者的官網文檔上的教程，覺得 Apollo 比較好用，就按着文檔學起來，再結合着 GraphQL 的官方文檔看看它的結構定義，然後把這些慢慢的用到了項目裏。另外，當時關注 React 新聞發現 React Alpha 版出了 hooks，我想這個系統既然也是內部用，就用了這個版本，參考 React Hooks 官方文檔，寫了點例子，又發現不少問題谷歌 StackOverlow 等等一通查，終於把它搞明白了，之後在項目裏發現真是解放了。。。再也不用定義 class 了（除了異常捕捉組件），邏輯和表現也可以分離了，效率大大的提高。
2019 年做了鷹眼投研這個老闆的項目，相當大的一個項目，大概有 40-50 個頁面，100 多個組件，由我主領，技術總監和一個合作同事參與共同開發的，耗時大概 3 個月，期間我搜羅、接觸了形形色色的前端庫，項目的樣式是基於一個 css-in-js 庫，styled-components 開發的，它可以把組件連同樣式一起組件化，我還用 Apollo Server 寫了 GraphQL 的 server 方便接口調用，又用了 ECharts 配置大量的圖表，有柱狀圖、線圖、熱力圖、中國地圖...，還用 websocket 實現了聊天的客戶端，唯一沒有用到的就是 redux，這個玩意對於這種多頁的大型應用來說，並不實用，一是模板代碼太多，二是沒有太多需要保存全局狀態的地方。而對於這種大型項目，使用 React Hooks 構建可複用的組件和邏輯非常適合，在這個項目裏好多頁面都用到了篩選表格，我把篩選的邏輯寫到了 hooks 裏邊，然後定義了幾種通用的篩選樣式，讓每個有不同篩選條件的頁面只需要按需組合就好，分頁也是一樣的道理，所有帶分頁的組件都是使用分頁 hooks 實現的，還有其它一些 hooks，比如請求後端數據等。這個項目中用到了幾乎這個路線中所有提到的技術，從中學到了不少的東西。
這些就是我個人的一些成長經歷，我自己擅長的可能就是對一個網站進行組件化分析和拆解這樣，爭取做到一行代碼實現一個頁面這種效果。
#總結
這篇文章儘可能詳細的列舉了前端工程師該掌握的技能，但是根據工作要求的不同，一些細節的框架可能沒有提到，不過相信咱們在經過這麼久的學習、打怪升級之後，那些個小框架都不在話下。有了良好的基礎，以後咱們在工作中都能節節高升~走向人生巔峯！