參加工作三年多了，最近業務不是很忙，心里反而空落落的。最近參與了一個公司UI庫開發，發現自己不懂的東西實在太多。以此為契機吧：
寫到此處驚覺自己這兩三年在技術上還是成長了的，2016年我需要看着前輩們的分享，大家說有用我就學，聽前輩的總沒錯，2019年我可以根據自己的經驗和體會總結出該怎么去系統的學習了，並且輕重緩急自己心里都有底。
現在返回到標題，前端工程師應該學什么？我寫了一個大綱，但里面的學習目標是對自己說的，發出來一是為了跟大家分享一下，共同學習；二是希望你們幫我看看，有沒有遺漏下的。
我的自我定位並沒有找准，前端領域太廣，到底哪個點最適合自己，並且值得深入鑽研？我不知道。但先全學一遍，查漏補缺總沒錯的。
我覺得自己仍然，仍將，一直都會是一名前端小學生。
本文沒有勸退效果，請放心閱讀。如果你是應屆生，找准自己的定位，慢慢來。
前端工程師
一、語言基礎
1. HTML相關
- HTML標准，跟進了解最新的HTML標准更新。
- HTML標簽語義化，嵌套標准等。
- 可訪問性。
學習目標：重新梳理各標簽關系。面向國際、未來的網頁結構，符合可訪問性規范。
2. CSS 相關
- CSS標准，跟進了解最新的CSS標准更新。
- CSS屬性，最新屬性等。
- CSS編程，Houdini。
- Web Fonts
學習目標：重新梳理css屬性之間的關系，更多的功能嘗試使用css實現。掌握關注最新的css發展。
3. JavaScript相關
- ECMAScript標准，最新提案等，瀏覽器DOM，BOM。
學習目標：熟悉JavaScript的基礎API，參數搞清楚。掌握最新的JavaScript語言動向。
4. Node.js相關
- Node.js 全局API，原生模塊等，了解最新的Node.js動向。
學習目標：熟悉Node.js基礎原生API的作用和使用。為學習服務端開發打下基礎。
5. TypeScript(TS)
- TS大火，成未來開發趨勢。
- TypeScript的使用。與JavaScript的區別
學習目標：熟練使用TypeScript。
6. AssemblyScript(AS)
- 除了可以將c\c++，Rust，Kotlin，Golang等高級語言轉譯為WebAssembly字節碼外，一門全新的語言AS也可以。AS是TS的嚴格子集，可以一並學習為WebAssembly開發打下基礎。
- AssemblyScript的語法和使用
學習目標：了解基礎語法，可以將AssemblyScript文件編譯成.wasm格式。有了它，可以不用去復習C/C++了。
7. Dart
- Flutter持續火熱，Dart作為開發基礎，應該掌握
- Dart的語法，了解與JavaScript的區別。
學習目標：熟練使用Dart語言。
8. Markdown
- 語法，使用。
- 寫文章，寫文檔必備
學習目標：熟練使用Markdown寫文章，項目文檔等。
9. Shell腳本
- 語法，常用函數
學習目標：可以使用shell編寫出比較常見的程序。
10. SQL語言
- 常用語法，函數
學習目標：可以寫出常見的CARD查詢的sql語句。
二、計算機基礎
1. 數據結構與算法
- 經典算法的思路
- 常用的數據結構
學習目標： 熟練掌握經典的算數思想，以便應用到業務代碼中來，會在合適的場景選擇最優的數據結構。
2. 計算機網絡
- HTTP協議，TCP協議，UDP協議
- HTTPS，HTTP2
- DNS
- WebSocket
學習目標：掌握並了解這些網絡協議的原理，可以用以實踐。
3. 電子計算機組成原理
- 進制
- Unicode，ASCII，UTF-8等編碼
- 計算機工作原理
學習目標： 了解自己的伙伴，為了解“雲”主機、虛擬主機奠定基礎。
4. 操作系統
- 計算機操作系統原理
- Linux操作系統的使用
學習目標：了解操作系統是如何工作的，可以自主使用linux操作系統，掌握常用的命令。
三、進階
1. 工程化
- 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
學習目標：可以從無到有快速搭建起一個多人協作的現代化前端工程項目，選擇合適的工具提高開發效率，保持團隊成員代碼風格統一，並最大限度的利用工具保障代碼質量。
2. 組件化
- Vue
- React
- WebComponents
- 瀏覽器兼容性，canIUse
學習目標：熟練使用Vue，React進行開發，了解組件化未來趨勢WebComponents。掌握數據驅動思想，掌握經典的雙向綁定實現原理，閱讀源碼，深入了解。掌握衍生產物如前端路由，數據管理的設計思想和實現。
3. 基於Node.js的Web服務開發
- koa
- express
- pm2
- RESTFul 風格
- 進程管理
- 數據持久 MongoDB，mysql等
- 數據緩存 redis等
- 長鏈接服務
- SSR
- Docker
- Nginx配置, openresty
- 雲主機，共享主機等
學習目標：可以獨立完成Web服務的搭建和部署。
4. 基於Node.js的CLI開發
- 常用的CLI開發庫和原理
- 比較流行的CLI庫的設計思想，實現思路
學習目標：可以獨立開發CLI，當有需求時，可以快速定位到此方案。
5. 桌面應用開發
- Electron
- NW.JS
學習目標：了解一種基於JavaScript的桌面應用的開發，當有需要時，可以迅速定位到此技術方案。
6. 移動應用開發
- Flutter 及相關衍生技術
- React Native及相關衍生技術
- PWA
- WEEX
學習目標： 了解和掌握。可以使用Flutter或RN開發一個移動APP。了解PWA。
7. 第三方平台開發
- 微信小程序
- 支付寶小程序
- 百度小程序
- 快應用
- wepy
- mpvue
- taro
- …
學習目標：可以快速上手任何一種開發小程序。了解小程序的實現方案。了解業內流行的小程序開發庫的實現思路。
8. 插件開發
- chrome插件API
- DevTool擴展
- VSCode等IDE插件開發
學習目標：了解插件可以做到什么，當有需要時，可以迅速定位到此方案來。
9. 瀏覽器工作原理
- 排版引擎，瀏覽器渲染原理
- 腳本解釋引擎，腳本運行原理，v8
- headless無頭瀏覽器，puppeteer
學習目標：掌握瀏覽器工作原理，可以應用在性能優化和自動化測試上。
10. 性能優化
- RAIL 模型
- 硬件基礎：幀、幀率、顯示器繪圖原理
- 漸進式網頁指標（Progressive Web Metrics，簡稱 PWM’s）
- 常用的性能優化手段
學習目標：了解性能優化手段，寫出性能優異的Web應用。
11. Web瀏覽器安全
- 瀏覽器安全策略：同源策略，內容安全策略，沙箱
- 常見的攻擊方式：XSS，CSRF
- 其它：CRLF攻擊， DNS劫持和DNS污染，點擊劫持，瀏覽器插件漏洞攻擊等
- 了解常見對稱加密和非對稱加密算法
學習目標：了解常見的Web瀏覽器攻擊手段，避免寫出有安全隱患的網站。
12. Web服務器安全
- 常見攻擊手段：目錄遍歷，DDOS，重放，密碼破解，SQL注入
- 其它攻擊手段：CC攻擊，端口滲透
學習目標：了解常見服務器攻擊手段和原理，避免寫出有明顯漏洞的Web服務。
13. 監控統計
- 前端腳本錯誤監控：錯誤堆棧形式，實時監控實現方式
- 前端性能監控：性能指標，實現方案
- 服務端監控：硬件監控，系統監控，應用監控，網絡監控，流量分析，日志監控，安全監控，API監控（可用性、正確性、響應時間），性能監控，業務監控
學習目標：掌握如何自主建設或搭建開源監控平台。了解一些常見的監控指標的含義。如性能相關的指標TTLB、QPS是什么意思，業務相關的指標PV，UV，CTR等等代表什么。
14. 可視化
- canvas進階
- svg進階
- WebGL基礎
- 計算機圖形學
- 常用庫：ECharts, D3等
學習目標： 這是面向未來的前端技術。了解常見的可視化技術方案，當有需求時可以迅速定位方案。關注並可使用最新的技術開發酷炫的應用，實現數據可視化。
15. SEO
- 搜索引擎爬蟲原理
- 搜索引擎權重算法
- 與SEO相關的網頁標簽
學習目標：了解搜索引擎的實現原理以及搜索結果的排序算法。如果是對外的網站，可以自主完成簡單的SEO，使網站在搜索引擎中的排名盡可能高些。
16. 開發與調試
- 瀏覽器腳本調試
- Node.js 調試
- Chrome Dev Tools進階使用（環境模擬，渲染性能，內存使用，端點調試，抓包，控制台內置函數等等）
- IDE
- 使用幫助開發的插件，如拼寫檢查等。
學習目標： 熟練掌握Chrome調試工具的使用，對於腳本開發、性能優化都大有裨益。掌握Node.js服務的調試方法。
17. UI庫
- UX基礎
- 色彩原理，色光三原色，網頁色彩表示方法
- 網頁色彩搭配原則，色彩心理學
- 常用UI組件的實現
- 常見UI組件的使用和源碼
學習目標： 具備一定的美感和用戶體驗關注度，當沒有設計師參與時，可以自主設計一些交互方案，了解常見UI組件代表的含義，可以在合適的需求上使用合適的組件。了解常用UI組件的設計與實現思路，可獨立開發UI組件庫。
18. WebAssembly
- 原理
- 優勢
- 簡單應用開發
學習目標： 了解WebAssembly字節碼的開發流程，了解其在瀏覽器中的運行方式，當需要時，可以快速定位到此方案。
19. WebRTC
- 實時通訊方案
- 了解並進行可簡單開發
學習目標： 了解並關注WebRTC技術，了解其標准，實現原理，當需要時，可以快速定位到此方案。
20. WebXR
- 使用JavaScript開發VR和AR
- 了解WebXR API，跟進草案進程
學習目標： 了解並關注WebXR技術，了解其標准，實現原理，當需要時，可以快速定位到此方案。
21. WebAuthn
- 使用瀏覽器進行生物鑒權
- 了解WebAuthn API，並進行簡單使用
學習目標： 了解並關注WebAuthn技術，了解其標准，實現原理，當需要時，可以快速定位到此方案。
下面是一些補充思考：
已經確定的事情：未來幾年，5G全面商用，網絡延時和傳輸速率將不再限制人類的想象力，萬物互聯時代隨時隨地無限觸達。
不確定的事情：可控核聚變技術的掌握。
試想一下，即便未來做到了萬物互聯，我們可以進行實時的AR, VR交互，但是如果手機電池技術得不到發展，這些設想無疑於空中樓閣，無法落地。大家都清楚現在瀏覽器中使用WebGL等技術的耗電程度。假設人類掌握了可控核聚變技術，電量和網絡都變得和空氣一樣無處不在，那才是真正可以放飛想象力的時代。
大膽預測一下未來前端技術的發展趨勢：基於WebAuthn生物鑒權，我們擺脫了密碼鑒權的桎梏；基於5G的傳輸速率，應用安裝在本地打開或使用Web打開訪問毫無區別；基於WebAssembly，傳統客戶端可以遷移至Web端，並且擁有超高性能。假設手機電量技術取得了長足的進步，那么WebRTC，WebXR，WebGL必將得到廣泛的應用。網站會發生質的變化，傳統的DOM結構類的網頁將稱為歷史，AR、VR、實時通訊等沉浸式交互會取代文字和圖片，手機上只需要裝一個瀏覽器，就可以做你想做的任何事。
但未來何時到來尚且不知，立足當下，放眼未來，努力學習吧。
本文發布於《一個小學生的博客》，轉載請注明出處。
全文完。