【KT】構建本身的前端知識體系

時間 2020-06-29

標籤構建本身前端知識體系简体版

原文原文鏈接

知識體系

廢話很少說，花了2小時，終於寫完了，如下是阿寬的知識體系，感興趣的小夥伴能夠參考一下，👏 歡迎你們查缺補漏，互相奧力給～前端

總感受要學的遠遠不夠，但願各位老鐵你們給個建議，進行補充，又或者我哪一個地方寫錯了，請指出 🤝vue

這是我目前所能涉及到的知識點了，有些沒寫進去，感受夠吃一壺了，我丟，歡迎你們補充👏 知識點繼續壓過來吧，債多不壓身～react

須要源文件 Xmind 的去個人Github下載，我沒得本身服務器，百度網盤又懶得搞，就這樣了，下載地址傳送門: 👉 阿寬的知識體系 PNG、阿寬的知識體系Xmindwebpack

感受會有公衆號把 xmind 下載下來，而後改個名變成本身的，接着又搞關注公衆號、進羣領取詳細的前端知識體系，我想說，你想改能夠，評論區說一些: 「老哥，我借用你的xmind了哈」，畢竟我也是很辛苦整理的好吧，打聲招呼哈～nginx

編程基礎

HTML

SEO
行內元素/塊級元素
語義化理解

CSS

CSS3新特性
清除浮動的幾種方式
盒模型
Flex佈局
BFC原理
position定位
水平垂直居中的幾種方式
CSS優先級權重
transition/animation區別
border: none/border: 0區別
display:none/visibility: hidden/opacity: 0區別

Javascript

內置對象git
typeofgithub
instanceofweb
類型轉換算法
newshell
this
閉包
原型與原型鏈
執行上下文
執行環境與做用域
深淺拷貝
- 深拷貝
- 淺拷貝
防抖與節流
- 原理掌握
- 動手實踐
模塊化
- CommonJS
- AMD
繼承
- 原型鏈繼承
- 借用構造函數繼承
- 組合繼承
- 原型式繼承
- 寄生式繼承
- 寄生組合式繼承
- ES6 的 Class 繼承
call、bind
- 原理掌握
- 如何動手實現一個bind、call函數
let 、const、var
Promise原理與實現
Generator原理與實現
Async/Await
Map、Set、FlatMap、Reduce
Proxy
0.1 + 0.2 !== 0.3

瀏覽器基礎

事件機制

事件觸發三個階段
註冊事件
事件委託/事件代理

跨域

JSONP
- 動手實現一個JSONP
CORS
- GET/POST有區別嗎
Nginx
- 擴展負載均衡等知識點
PostMessage
document.domain + iframe

存儲

cookie、localStorage、seesionStorage、indexDB
service worker

Event Loop

Node中的Event Loop
瀏覽器中的Event Loop

瀏覽器渲染原理

Load與DOMContentLoaded的區別
HTML Tree / CSS Tree
迴流、重繪
如何減小回流重繪
- 哪些CSS屬性會致使迴流重繪

setTimeout、setInterval

網絡基礎

五層協議

應用層
運輸層
網絡層
數據鏈路層
物理層

PPP協議

CSMA/CD 協議

ARP 地址解析協議

ICMP 網際控制報文協議

UDP 用戶數據報協議

不可靠
面向報文
高效
傳輸方式

TCP 傳輸控制協議

首部格式
- 序號
- 確認號
- 數據偏移
- 確認ACK
- 同步 SYN
- 終止 FIN
- 窗口
狀態機
- 創建連接三次握手
- 斷開連接四次揮手
ARQ協議
- 中止等待ARQ
- 連續ARQ
- 累計確認
滑動窗口
- Zero窗口
擁塞處理
- 慢開始算法
- 擁塞避免算法
- 快速重傳
- 快恢復

UDP和TCP的區別

HTTP

常見狀態碼
- 2xx
- 3xx
- 4xx
- 5xx
HTTP首部字段
POST和GET區別

HTTPS

TLS
與hTTP區別

HTTP2.0

二進制傳輸
多路複用
Header壓縮
服務端Push
QUIC
與HTTP1.0、HTTP1.1的區別

DNS

DNS能否使用TCP發送？
- 知足條件: 返回的響應超過 512 字節
- 知足條件: 區域傳送
區域傳送
- 徹底區域傳送
- 增量區域傳送
DNS解析流程
- 本地host存在映射，解析結束
- 本地host不存在映射
  - 本地DNS服務器查詢
    - 本地DNS服務器有緩存，解析結束
    - 本地DNS服務器無緩存
      - 迭代查詢
      - 遞歸查詢
DNS解析器原理
- Socket庫解析器
DDNS、NAT技術、內網穿透
CDN
DNS負載均衡
DNS劫持，如何防止

從輸入URL到頁面加載

DHCP 配置主機信息
ARP 解析 MAC 地址
DNS 解析域名
HTTP Request，TCP 三次握手四次揮手
拿到HTML文檔，進入瀏覽器渲染原理流程

軟件開發

Git

remote
push、pull
stash、rebase
merge、cherry
reflog、reset

xshell

Linux命令

Nginx配置

host修改配置

類庫框架

Vue

路由原理
狀態管理
- Vuex原理及源碼核心思想
框架核心
- VDOM
  - 爲何須要虛擬DOM
  - 虛擬DOM算法簡述及實踐
- MVVM
  - 髒數據檢測
  - 數據劫持
  - Proxy與Object.defineProperty對比
- 生命週期
  - new Vue()實例化
  - init() 函數初始化
  - beforeCreatecreated 數據觀測
  - created 和 beforeMounted ，編譯
    - parse
      - 正則方式解析 templae 模板中的指令，生成一顆 AST 語法抽象樹
    - optimise
      - 標記 static 靜態節點，pacth 過程，diff 跳過靜態節點，優化 patch 的性能
    - generate
      - AST 語法抽象樹轉化成 render function()字符串的過程
  - beforeMount 和 Mounted 之間，給 vue 實例對象添加$el 成員，而且替換掉掛載的 DOM 元素
  - beforeUpdated 和 updated ，數據改變時，經過 setter -> watcher -> update 流程修改視圖，經過 patch 機制，通過 diff 算法算出差別
  - beforeDestory 鉤子函數在實例銷燬以前調用。
- nextTick原理
  - macrotasks
    - setImmediate
    - MessageChannel
    - setTimeout
  - microtasks
    - Promise
- diff算法原理
- watch原理
- computed與methods區別

React

狀態管理
- Redux
  - 源碼解讀及編程藝術
  - 爲何要返回一個新的store
- Hox (擴展瞭解)
  - 源碼解讀與設計思想
  - 搭配hooks，下一代react狀態管理
- react-redux
  - Provider原理
  - Connect原理
相關了解
- 什麼是中間件
- redux-thunk
- redux-saga
- redux-logger
生命週期
- 初次渲染
- 更新階段
- 卸載階段
setState
合成事件
hooks 部分API原理
- useEffect
- useState、useMemo
- useCallback、useRef
類組件和無狀態組件區別
shouldComponentUpdate內部原理