2021你應該了解的前端知識體系

沒有經過系統的學習、歸納和總結，任何知識都是掌握不牢固的。愛掏網 - it200.com

對于始終要保持學習的程序員來說，學習的新技術不僅要進行實踐，還要經常進行反思和復盤，然后通過筆記或者博客將自己的思考記錄下來，只有這樣做才能真正掌握新技術。愛掏網 - it200.com

前端開發是非常特殊的一個職業，在大學沒有前端開發專業，大部分做前端開發的同學都是學計算機或者其他專業通過自學而入行的，這樣半路出家就會造成一個問題，前端的基礎不牢固，掌握的知識也沒有形成體系，無法將所有前端相關的知識串起來，而且工作之后大部分時間可能都在寫業務代碼，如果工作之外又沒有進行思考或者總結的話，那么將來被淘汰、被別人取代是必然的。愛掏網 - it200.com

本文就從前端開發基礎知識到高級應用、再到前端項目管理各個方面來聊聊如何構建自己的前端知識體系。愛掏網 - it200.com本文既適合準備轉行前端的同學閱讀，也適合剛入行前端的同學閱讀，更適合做前端開發1~3年的同學。愛掏網 - it200.com

基礎知識

萬丈高樓平地起，沒有扎實的基礎，前端開發這條路走不遠。愛掏網 - it200.com那么需要扎實掌握的基礎知識有哪些呢？

編程基礎

• HTML(HTML5)
  掌握常用標簽、標簽語義化的意義、meta屬性、DOM、Canvas、前端存儲

• CSS(CSS3)
  掌握CSS選擇器、布局、浮動與定位、BFC（塊格式上下文）、CSS3動畫

• Javascript

  1. 數據類型
  2. 原型與原型鏈
  3. 作用域與作用域鏈
  4. 閉包
  5. this
  6. 執行上下文
  7. call、apply、bind 方法
  8. 事件冒泡、事件委托
  9. 防抖與節流
  10. ajax 異步請求
  11. 跨域
  12. 瀏覽器事件循環機制，宏任務與微任務
  13. 瀏覽器渲染原理、回流與重繪
  14. 瀏覽器緩存策略、CDN
  15. HTTP 狀態碼

• ES6

  1. let、const
  2. 箭頭函數
  3. 解構賦值
  4. 模板字符串
  5. Symbol與Symbol屬性
  6. Set和Map數據結構
  7. Iterator 和for...of 循環
  8. 異步編程，Generator函數、Promise對象、async函數
  9. Class類，Class類、對象創建、繼承、靜態方法與屬性
  10. Module模塊化

• 微信小程序

開發與調試工具

• VS Code 常用快捷鍵
• Chrome 開發者工具
• Postman
• Fiddler 、Charles 抓包工具

類庫與框架、組件庫

• jQuery
• Bootstrap
• underscore
• Lodash
• Vue
  1. vue
  2. vuex
  3. vue-router
  4. element-ui
• React
  1. react
  2. redux
  3. mobx
  4. react-router
  5. antd-design
• Angular
• 小程序框架：taro、mp-vue、uni-app

高級進階

僅僅掌握基礎知識是遠遠還不夠的，這些基礎知識只能保證你能順利完成日常開發工作。愛掏網 - it200.com而想要進大廠，想要更好的工作，那就還得深入學習。愛掏網 - it200.com

閱讀框架源碼

• jQuery/underscore 等 JS 庫的源碼
• element-ui/Ant Design 等 UI 組件庫的框架源碼
• Vue 源碼
• React 源碼
• Webpack 源碼

網絡相關

• OSI七層/四層模型
• HTTP協議
• HTTPS

前端安全

• CSRF 攻擊與防御
• XSS 攻擊與防御

性能優化

• 性能指標

  1. 首次繪制（FP）
  2. 首次內容繪制（FCP）
  3. 首次有效繪制（FMP）
  4. 每秒傳輸幀數（FPS）
  5. 用戶可交互時間
  6. DNS解析時間
  7. TCP連接時間
  8. HTTP請求響應時間

• 評估工具

  1. Lighthouse
  2. Chrome 開發者工具

前端工程化

• webpack
• gulp
• 模塊化
• 組件化
• 規范化
• 自動化

設計模式

• 創建型：
  抽象工廠模式、工廠模式、單例模式、建造者模式、原型模式

• 結構型：
  橋接模式、代理模式、裝飾器模式、適配器模式、享元模式、組合模式、門面（外觀）模式

• 行為型：
  觀察者模式、模板模式、迭代模式、狀態模式、命令模式、中介者模式、解釋器模式、職責鏈模式、訪問者模式、策略模式、備忘錄模式

V8引擎機制

• JS 執行機制
• V8垃圾回收
• V8優化

大前端

• Flutter
• React Native

軟技能

• 學習能力

1. 知識儲備
2. 知識分享

• 技術能力

1. 解決問題
2. 帶領新人

• 團隊協作

  溝通技巧

• 項目管理

1. 業務理解
2. 需求分析
3. 項目評估
4. 風險評估

• 架構設計能力

1. 交互設計
2. 可用性
3. 擴展性
4. 安全性
5. 性能
6. 微前端
7. 前端基礎建設
8. 前端性能監控
9. 前端埋點

水平有限，文中難免有不足之處，歡迎大家關注我的微信公眾號。愛掏網 - it200.com（前端民工）