前端學習路線
- 基礎（CSS、HTML、JavaScript）
- JS庫
- 前端框架（MVVM）
- 瀏覽器&計算機基礎
- 前端工程化
- 性能優化
- Nodejs
- 數據結構和算法
學習重點
一、三大件
CSS
- 盒模型（標準&IE）
- flex,float
- CSS常用選擇器
- CSS選擇器優先極&權重
- BFC與IFC的理解
- transform,transition,animation等
- 響應式而已的理解
H5
- 語義化標籤
- Canvas
- 本地存儲（localStorage,sessionStorage,cookie的區別）
- video與audio的用法
- 應用緩存（cache manifest)
JavaScript
- JS的數據類型：基礎類型&引用類型
- this
- 作用域（作用域鏈）
- 原型&原型鏈&繼承
- 閉包
- 動態作用域和詞法作用域
- JavaScript的執行機制
- promise & async
二、庫工具
- jQuery: 集合多種操作DOM的API，對於靜態HTML開發很有用
- Zepto：移動端的jQuery（簡化版）
- Moment: 日期和時間操作庫
- lodash: js操作庫
三、前端框架
前端框架：React，Vue， 數據驅動視圖，Vue的雙向綁定，單向數據流等等
- 響應式的基本原理： Vue的響應式原理、Vue與React對比響應式
- 發佈訂閱模式：理解JS的發佈訂閱模式
- Virtual DOM的理解：你不知道的VirtualDOM
- 前端路由的實現原理： Web前端路由原理解析和實現、網易雲課堂-vue-router源碼
- nextTicek的實現原理：$nextTick原理
- setState的實現原理
- diff算法：React的Diff算法理解
- 單頁應用（SPA）的原理和優缺點：參考
四、瀏覽器 & 計算機基礎
- 瀏覽器緩存機制：強緩存，協商緩存 ， 瀏覽器緩存機制
- 瀏覽器中的JS執行機制： 參考
- 頁面渲染原理： 從輸入URL到頁面加載發生了什麼、
- 瀏覽器安全問題：8大前端安全問題，8大前端安全問題（下）
- 瀏覽器爲什麼會跨域: 爲什麼瀏覽器要限制跨域訪問
- 優化頁面的思路
- HTTP與HTTPS的區別
- TCP/IP協議
- 三次握手和四次揮手
- CDN的作用和原理
- 正向代理和反向代理的特點
五、前端工程化
模塊化
- JS模塊化
- CSS模塊化
- 資源模塊化
組件化
- 組件化：從 UI 拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之爲組件。
規範化
- 編碼規範
- 接口規範
- git使用規範
- CodeReview
- UI元素規範
知識點
- 理解 Babel、ESLint、webpack 等工具在項目中的作用
- Babel 的核心原理
- Webpack 的編譯原理、構建流程、熱更新原理
- nginx 的基本理解
- 理解 Git 的工作流程
- Mock 的意義及優點
性能優化
- 前端性能衡量指標、性能監控（performance,LightHouse）
- 常見的性能優化方案有哪些
- SSR 方案的性能優化
- Webpack 的性能優化方案
- React、Vue 等框架使用性能優化方案
- 網絡層面的優化方案
- 頁面渲染層面的優化方案
- 白屏的優化方案
Nodejs
- Nodejs 在應用程序中的作用
- Express 和 Koa 的區別
- Nodejs 的底層運行原理、和瀏覽器的異同
- Nodejs 非阻塞機制的實現原理