參加工作三年多了，最近業務不是很忙，心裡反而空落落的。最近參與了一個公司UI庫開發，發現自己不懂的東西實在太多。以此為契機吧：

　　寫到此處驚覺自己這兩三年在技術上還是成長了的，2016年我需要看著前輩們的分享，大家說有用我就學，聽前輩的總沒錯，2019年我可以根據自己的經驗和體會總結出該怎麼去系統的學習了，並且輕重緩急自己心裡都有底。

　　現在返回到標題，前端工程師應該學什麼？我寫了一個大綱，但裡面的學習目標是對自己說的，發出來一是為了跟大家分享一下，共同學習；二是希望你們幫我看看，有沒有遺漏下的。

　　我的自我定位並沒有找準，前端領域太廣，到底哪個點最適合自己，並且值得深入鑽研？我不知道。但先全學一遍，查漏補缺總沒錯的。

　　我覺得自己仍然，仍將，一直都會是一名前端小學生。

　　本文沒有勸退效果，請放心閱讀。如果你是應屆生，找準自己的定位，慢慢來。

前端工程師

一、語言基礎

HTML相關

• HTML標準，跟進了解最新的HTML標準更新。
• HTML標籤語義化，巢狀標準等。
• 可訪問性。

學習目標：重新梳理各標籤關係。面向國際、未來的網頁結構，符合可訪問性規範。

CSS 相關

• CSS標準，跟進了解最新的CSS標準更新。
• CSS屬性，最新屬性等。
• CSS程式設計，Houdini。
• Web Fonts

學習目標：重新梳理css屬性之間的關係，更多的功能嘗試使用css實現。掌握關注最新的css發展。

JavaScript相關

• ECMAScript標準，最新提案等，瀏覽器DOM，BOM。

學習目標：熟悉JavaScript的基礎API，引數搞清楚。掌握最新的JavaScript語言動向。

Node.js相關

• Node.js 全域性API，原生模組等，瞭解最新的Node.js動向。

學習目標：熟悉Node.js基礎原生API的作用和使用。為學習服務端開發打下基礎。

TypeScript(TS)

• TS大火，成未來開發趨勢。
• TypeScript的使用。與JavaScript API的區別

學習目標：熟練使用TypeScript。

AssemblyScript(AS)

• 除了可以將c\c++，Rust，Kotlin，Golang等高階語言轉譯為WebAssembly位元組碼外，一門全新的語言AS也可以。AS是TS的嚴格子集，可以一併學習為WebAssembly開發打下基礎。
• AssemblyScript的語法和使用

學習目標：瞭解基礎語法，可以將AssemblyScript檔案編譯成.wasm格式。有了它，可以不用去複習C/C++了。

Dart

• Flutter持續火熱，Dart作為開發基礎，應該掌握
• Dart的語法，瞭解與JavaScript的區別。

學習目標：熟練使用Dart語言。

Markdown

• 語法，使用。
• 寫文章，寫文件必備

學習目標：熟練使用Markdown寫文章，專案文件等。

Shell指令碼

• 語法，常用函式

學習目標：可以使用shell編寫出比較常見的程式。

SQL語言

• 常用語法，函式

學習目標：可以寫出常見的CARD查詢的sql語句。

二、計算機基礎

資料結構與演算法

• 經典演算法的思路
• 常用的資料結構

學習目標： 熟練掌握經典的算數思想，以便應用到業務程式碼中來，會在合適的場景選擇最優的資料結構。

計算機網路

• HTTP協議，TCP協議，UDP協議
• HTTPS，HTTP2
• DNS
• WebSocket

學習目標：掌握並瞭解這些網路協議的原理，可以用以實踐。

電子計算機組成原理

• 進位制
• Unicode，ASCII，UTF-8等編碼
• 計算機工作原理

學習目標： 瞭解自己的夥伴，為了解“雲”主機、虛擬主機奠定基礎。

作業系統

• 計算機作業系統原理
• Linux作業系統的使用

學習目標：瞭解作業系統是如何工作的，可以自主使用linux作業系統，掌握常用的命令。

三、進階

工程化

• webpack
• rollup
• babel 使用與原理，可以用來與ECMAScript最新語法一一印證。
• eslint,stylelint,prettier等程式碼風格與語法審查工具的使用
• unit test庫或工具的使用
• sass程式設計，語法
• postcss後處理器
• uglify原理與實現
• 多人git協作流程
• gitlab的搭建與使用
• CI/CD
• git hooks, husky,commitlint
• 文件輸出，StoryBook，gitDoc，gitbook等
• npm, lerna
• yarn
• markdown render。markdown寫的示例可線上執行
• 模組化，js模組化在ECMAScript和Node.js已經學習過，這裡主要是指css模組化的幾種方式
• 資料mock

學習目標：可以從無到有快速搭建起一個多人協作的現代化前端工程專案，選擇合適的工具提高開發效率，保持團隊成員程式碼風格統一，並最大限度的利用工具保障程式碼質量。

元件化

• Vue
• React
• WebComponents
• 瀏覽器相容性，canIUse

學習目標：熟練使用Vue，React進行開發，瞭解元件化未來趨勢WebComponents。掌握資料驅動思想，掌握經典的雙向繫結實現原理，閱讀原始碼，深入瞭解。掌握衍生產物如前端路由，資料管理的設計思想和實現。

基於Node.js的Web服務開發

• koa
• express
• pm2
• RESTFul 風格
• 程序管理
• 資料持久 MongoDB，mysql等
• 資料快取 redis等
• 長連結服務
• SSR
• Docker
• Nginx配置, openresty
• 雲主機，共享主機等

學習目標：可以獨立完成Web服務的搭建和部署。

基於Node.js的CLI開發

• 常用的CLI開發庫和原理
• 比較流行的CLI庫的設計思想，實現思路

學習目標：可以獨立開發CLI，當有需求時，可以快速定位到此方案。

桌面應用開發

• Electron
• NW.JS

學習目標：瞭解一種基於JavaScript的桌面應用的開發，當有需要時，可以迅速定位到此技術方案。

移動應用開發

• Flutter 及相關衍生技術
• React Native及相關衍生技術
• PWA
• WEEX

學習目標： 瞭解和掌握。可以使用Flutter或RN開發一個移動APP。瞭解PWA。

第三方平臺開發

• 微信小程式
• 支付寶小程式
• 百度小程式
• 快應用
• wepy
• mpvue
• taro
• …

學習目標：可以快速上手任何一種開發小程式。瞭解小程式的實現方案。瞭解業內流行的小程式開發庫的實現思路。

外掛開發

• chrome外掛API
• DevTool擴充套件
• VSCode等IDE外掛開發

學習目標：瞭解外掛可以做到什麼，當有需要時，可以迅速定位到此方案來。

瀏覽器工作原理

• 排版引擎，瀏覽器渲染原理
• 指令碼解釋引擎，指令碼執行原理，v8
• headless無頭瀏覽器，puppeteer

學習目標：掌握瀏覽器工作原理，可以應用在效能優化和自動化測試上。

效能優化

• RAIL 模型
• 硬體基礎：幀、幀率、顯示器繪圖原理
• 漸進式網頁指標（Progressive Web Metrics，簡稱 PWM’s）
• 常用的效能優化手段

學習目標：瞭解效能優化手段，寫出效能優異的Web應用。

Web瀏覽器安全

• 瀏覽器安全策略：同源策略，內容安全策略，沙箱
• 常見的攻擊方式：XSS，CSRF
• 其它：CRLF攻擊， DNS劫持和DNS汙染，點選劫持，瀏覽器外掛漏洞攻擊等
• 瞭解常見對稱加密和非對稱加密演算法

學習目標：瞭解常見的Web瀏覽器攻擊手段，避免寫出有安全隱患的網站。

Web伺服器安全

• 常見攻擊手段：目錄遍歷，DDOS，重放，密碼破解，SQL注入
• 其它攻擊手段：CC攻擊，埠滲透

學習目標：瞭解常見伺服器攻擊手段和原理，避免寫出有明顯漏洞的Web服務。

監控統計

• 前端指令碼錯誤監控：錯誤堆疊形式，實時監控實現方式
• 前端效能監控：效能指標，實現方案
• 服務端監控：硬體監控，系統監控，應用監控，網路監控，流量分析，日誌監控，安全監控，API監控（可用性、正確性、響應時間），效能監控，業務監控

學習目標：掌握如何自主建設或搭建開源監控平臺。瞭解一些常見的監控指標的含義。如效能相關的指標TTLB、QPS是什麼意思，業務相關的指標PV，UV，CTR等等代表什麼。

視覺化

• canvas進階
• svg進階
• WebGL基礎
• 計算機圖形學
• 常用庫：ECharts, D3等

學習目標： 這是面向未來的前端技術。瞭解常見的視覺化技術方案，當有需求時可以迅速定位方案。關注並可使用最新的技術開發酷炫的應用，實現資料視覺化。

SEO

• 搜尋引擎爬蟲原理
• 搜尋引擎權重演算法
• 與SEO相關的網頁標籤

學習目標：瞭解搜尋引擎的實現原理以及搜尋結果的排序演算法。如果是對外的網站，可以自主完成簡單的SEO，使網站在搜尋引擎中的排名儘可能高些（不是花錢競價排名喲）。

開發與除錯

• 瀏覽器指令碼除錯
• Node.js 除錯
• Chrome Dev Tools進階使用（環境模擬，渲染效能，記憶體使用，端點除錯，抓包，控制檯內建函式等等）
• IDE
• 使用幫助開發的外掛，如拼寫檢查等。

學習目標： 熟練掌握Chrome除錯工具的使用，對於指令碼開發、效能優化都大有裨益。掌握Node.js服務的除錯方法。

UI庫

• UX基礎
• 色彩原理，色光三原色，網頁色彩表示方法
• 網頁色彩搭配原則，色彩心理學
• 常用UI元件的實現
• 常見UI元件的使用和原始碼

學習目標： 具備一定的美感和使用者體驗關注度，當沒有設計師參與時，可以自主設計一些互動方案，瞭解常見UI元件代表的含義，可以在合適的需求上使用合適的元件。瞭解常用UI元件的設計與實現思路，可獨立開發UI元件庫。

WebAssembly

• 原理
• 優勢
• 簡單應用開發

學習目標： 瞭解WebAssembly位元組碼的開發流程，瞭解其在瀏覽器中的執行方式，當需要時，可以快速定位到此方案。

WebRTC

• 實時通訊方案
• 瞭解並進行可簡單開發

學習目標： 瞭解並關注WebRTC技術，瞭解其標準，實現原理，當需要時，可以快速定位到此方案。

WebXR

• 使用JavaScript開發VR和AR
• 瞭解WebXR API，跟進草案程序

學習目標： 瞭解並關注WebXR技術，瞭解其標準，實現原理，當需要時，可以快速定位到此方案。

WebAuthn

• 使用瀏覽器進行生物鑑權
• 瞭解WebAuthn API，並進行簡單使用

學習目標： 瞭解並關注WebAuthn技術，瞭解其標準，實現原理，當需要時，可以快速定位到此方案。

　　本文釋出於《一個小學生的部落格》，轉載請註明出處。

　　全文完。