知識體系

前端須要不停得學習新知識，不停得研究更加深刻的js原理，可是這些都是比較零散的，或者說想到看到而後研究，漸漸的就會產生一種感受，前端的東西學不完，記不清，感受有不少東西能夠學，可是不知道還有那些東西須要學。

前端時間看到一篇博客，關於知識體系的。忽然明白本身缺失的那塊在哪裏，須要用一個核心體系，將本身所學習所研究的內容串聯起來。那麼對於前端來講，一個網頁從請求到渲染完成，所須要運用的知識就是一個前端完整的體系。

1.打開一個空白網頁

a.對於建立一個網頁，瀏覽器作了什麼（瀏覽器進程）
複製代碼

2.輸入網頁，進行請求

a.網絡五層結構
b.三次握手創建鏈接
c.http1.0 1.1 2.0 https
d.tcp udp
e.請求頭 requestHeader
f.前端請求框架,ajax，axios，fetch發送
g.是否發送到服務器，強緩存，協商緩存
複製代碼

3.服務器接收請求

a. 是否由服務器中間層處理, node 中間層
b. proxy代理，node http-proxy
c. 單線程js，node如何利用多核cpu cluster集羣
d. 同源策略
f. xss注入攻擊 csrf跨站請求僞造(token等防護)
e. express koa koa2 框架了解
g. eventloop node事件循環瞭解  瀏覽器事件循環瞭解
h. 回調地獄  generator  async/await promise
i. 宏任務 微任務  gui渲染
j. 調用棧->做用域鏈
k. 詞法環境，變量對象，活動對象，this
l. settimeout setinterval區別，如何保證計時準確，防抖與節流的建立
複製代碼

4.返回數據，瀏覽器渲染 a. 狀態碼 b. 瀏覽器渲染過程，css樹，html樹，合併 ，layout，paint， 複合層處理 c. 防止重繪與重排 d. 存儲storage cookie e. cookie session f. react 全家桶， react新特性 fiddler， 靜態生命週期getDerivedStateFromPops，getSnapshotBeforUpdate h. vue 全家桶 proxy

5.服務器鏈接處理

a.四次揮手，斷開鏈接
b.websocket長鏈接
複製代碼

對於前端，還有一些而外的東西，首先是es5，es6，es7內須要熟記以及使用的新特性，經常使用的有

a. 反引號，書寫模板`${}`
b. class 類對象，extend進行繼承，原來是原型繼承加上構造繼承的組合繼承
c. 解構賦值... ，也可用交換值 [a,b] = [b, a]
複製代碼

webpack優化：

a.commonsChunkPlugin，抽取公共代碼，加載進瀏覽器後緩存，後續不須要再次請求資源
b.建立cdn加速，將js，css，img靜態資源等分別存儲在不一樣的服務器上
c.按需加載，使用import(*)，利用pormise，在回調中加載須要引入的js，或者利用require進行按需加載
d.採用模塊化hash命名，更新版本點對點更新
複製代碼

js新的特性

a.開啓webworker計算
複製代碼