P7 是如何梳理自己前端知識點的？

前端知識點很多，很細碎。一般同學(xué)都是死記硬背一些知識點。機靈的同學(xué)會背一些案例，更聰明的同學(xué)會背一下原理，理解下大概。奈何時光催人老，再好的記憶也會有忘記的時候，況且人生的不同階段所側(cè)重的點也不一樣。

最簡單輕松的方式就是從崗位特征進行梳理，按照一定等級進行劃分：

• 崗位職責：業(yè)務(wù)理解與實現(xiàn)、技術(shù)沉淀、團隊建設(shè)與發(fā)展

• 通用能力：學(xué)習(xí)思辨、協(xié)作、規(guī)劃與落地

• 專業(yè)能力：專業(yè)知識、技術(shù)實現(xiàn)、業(yè)務(wù)理解

對于以上的三種必須能力進行等級劃分：

• 基礎(chǔ)扎實，高質(zhì)完成

• 獨當一面、輔助團隊

• 領(lǐng)域?qū)＜摇⒂绊憟F隊

• 領(lǐng)域突破、業(yè)務(wù)增值

• 無中生有、引領(lǐng)變革

接著找準自己的所在的能力點，進行反思與相應(yīng)的補足。

這里理解要比死記硬背要重要的多。所以選擇一門課程，從面試考察的知識點入手，梳理前端知識點脈絡(luò)，精講各個點的長問問題和設(shè)計原理，讓你從死記硬背轉(zhuǎn)化為理解，實現(xiàn)前端能力增長就顯得尤為重要。

第一章 HTML - 相識

1. 前端增長，業(yè)界發(fā)展，盤他？
2. 學(xué)習(xí)目標，人生就是起起落落落？
3. HTML 咋解析的呢？DOM 構(gòu)建?
4. CSSOM 如何構(gòu)建？會阻塞嗎?
5. RenderTree 上來秀一波?
6. Layout 布局引擎，新交規(guī)解析
7. 牛逼的 render 進程合成層，拯救世界?
8. HTML 加載阻塞？咋不上天呢?
9. 頁面渲染會堵車嗎？FM93 交通之聲

第二章 CSS - 相知

1. 啥是 Containing Block？有鳥用?
2. 要 BFC？要啥自行車?
3. 到底是怎么定位？挖坑嗎?
4. 咋布局？設(shè)套嗎？flex 兄弟上車?
5. CSS 優(yōu)先級，優(yōu)生優(yōu)育?
6. CSS 預(yù)處理原理?
7. 合成器和非合成器動畫，爆 GPU 菊花?
8. 大哥，你的動畫卡頓了，快逃?
9. 基線和行高的坑

第三章 JavaScript - 相愛

1. 瀏覽器引擎與 webkit
2. JavaScript 虛擬機運行原理流程剖析
3. JavaScript 類型推斷
4. JavaScript 虛擬機對象訪問優(yōu)化
5. 秒懂事件循環(huán)原理
6. 事件循環(huán)之宏任務(wù)與微任務(wù)
7. JavaScript 虛擬機垃圾回收
8. JavaScript 數(shù)據(jù)類型與內(nèi)存模型
9. 數(shù)據(jù)類型檢測與深淺克隆
10. 數(shù)據(jù)監(jiān)聽方法有哪些？
11. 模塊數(shù)據(jù)通信的方法
12. 原型和原型鏈理解不會忘
13. 從執(zhí)行上下文理解閉包

第四章 瀏覽器 - 相生

1. 所謂的單線程
2. 為什么執(zhí)行超過 50ms 是 longtask？
3. UI 線程與 worker 線程
4. 瀏覽器強制緩存與協(xié)商緩存
5. serviceworker 與 pagecache 與 memorycache
6. http 請求冪等性和 2.0 的鏈接復(fù)用
7. 跨域原因風險和通信方法有哪些？
8. hign resolution time api
9. performance.timing 加載性能指標計算
10. xss 漏洞原理和防御
11. CSRF 攻擊原理和防御編輯刪除
12. JSONP 劫持和越權(quán)漏洞

第五章 框架 - 相克

1. 字符串模板原理和比較
2. 實現(xiàn) virtualDOM 三要素
3. virtualNode 構(gòu)建方法和原理
4. virtualDOM 構(gòu)建過程和 render 原理
5. Vue 框架的特點和優(yōu)勢
6. Vue 中用到的設(shè)計模式
7. Vue 中 initState 初始化流程
8. Vue 數(shù)據(jù)響應(yīng)系統(tǒng)實現(xiàn)原理
9. Vue 的缺點有哪些
10. React 的 diffDOM 算法 (tree diff 和 component)
11. React 的 element diff 算法
12. React 新特性 hooks？context？錯誤邊界？
13. SPA 路由實現(xiàn)的幾種方法和原理

第六章 編碼能力 - 相輔

1. 常見排序算法簡介
2. 貪心、分治、動態(tài)規(guī)劃、回溯等算法
3. 編碼能力設(shè)計模式等思考

第七章 Node.js- 相成

1. Node 事件驅(qū)動高并發(fā)的原因
2. Node 事件循環(huán)機制

面向高級的技術(shù)能力，更多是授之以魚，不如授之以漁。講的再多，不如你自己理解。這里主要幫大家理清楚所有的知識點，不要等面試官問你的時候，你連題目都聽不懂。無需死記硬背，該忘記就忘記吧，有事沒事想一想，捋一捋就行。

適宜人群

• 想要提高卻不得門道的前端開發(fā)同學(xué)；
• 為找工作進行面試準備的前端開發(fā)同學(xué)

課程思維導(dǎo)圖

想獲取上方↑清晰思維導(dǎo)讀圖

請在 SegmentFault?公眾號中回復(fù)?P7

課程鏈接