前端知識體系梳理

轉載自微信公眾號 前端Q（luckyWinty），文章發布於：

https://mp.weixin.qq.com/s/YbZx4hGKaAPYuhZgSvMcCw

整理發布！

 

1、CSS部分

高頻考題

• BFC：https://github.com/LuckyWinty/fe-weekly-questions/issues/36

• 布局：

• 浮動（float）

• 水平垂直居中方法：https://github.com/LuckyWinty/fe-weekly-questions/issues/31

• 定位（position）：https://www.ruanyifeng.com/blog/2019/11/css-position.html

• Flex布局：https://juejin.im/post/6854573220306255880

• Grid布局：http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

• 盒模型：https://juejin.im/post/6844903505983963143

• IE 盒模型
• W3C 標准盒模型

• 動畫：https://github.com/LuckyWinty/fe-weekly-questions/issues/60

• transition
• Keyframes animation

• CSS3：https://juejin.im/post/6844903829679390728

• 預處理器：sass/less/postcss...

基礎

• 選擇器：https://juejin.im/post/6844904115147898894

• 文字溢出處理：https://juejin.im/post/6844903988081475591

其他題目

• 2D 3D 轉換

• margin:auto 為什么可以實現垂直居中？ https://github.com/LuckyWinty/fe-weekly-questions/issues/25

• 說說 visibility=hidden, opacity=0，display:none 的區別。https://github.com/LuckyWinty/fe-weekly-questions/issues/64

• 清除浮動：待整理

• cacl 使用：https://mp.weixin.qq.com/s/1sn_uvBNjg9Zm3SQ9Yi-iQ

書籍推薦

• CSS+DIV 從入門到精通
• CSS 權威指南
• 精通 CSS 高級 web 標准解決方案

2、JavaScript部分

基礎

• 數據類型：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

• es6：

• https://es6.ruanyifeng.com/
• https://www.runoob.com/wp-content/uploads/2018/12/es6-tutorial.jpg

• 原型/繼承：

• https://mp.weixin.qq.com/s/St78Y38j3XI2_Zv57bNZ0Q
• https://github.com/LuckyWinty/blog/blob/master/markdown/JavaScript/%E4%B8%80%E6%96%87%E5%AE%8C%E5%85%A8%E5%90%83%E9%80%8F%20JavaScript%20%E7%BB%A7%E6%89%BF.md

• 事件流/事件委托：

• https://zhuanlan.zhihu.com/p/53592256
• https://github.com/LuckyWinty/fe-weekly-questions/issues/72

• 變量/作用域/閉包/this/上下文：

• http://www.alloyteam.com/2019/07/closure/
• https://github.com/LuckyWinty/fe-weekly-questions/issues/71

• 事件循環：https://mp.weixin.qq.com/s/G2L_9kj8ST0_HPG7yxd2lw

• 前端緩存：https://mp.weixin.qq.com/s/5EXT03KeOBtlZtKhlV7pjg

• 正則：https://github.com/LuckyWinty/blog/blob/master/markdown/RegExp/%E6%AD%A3%E5%88%99%E5%85%A5%E9%97%A8%E6%89%8B%E5%86%8C.md

• 跨域：https://mp.weixin.qq.com/s/Nk8YPYQDUJOKgQ9Qa7byag

• setTimeout/setInterval/RequestAnimationFrame：https://mp.weixin.qq.com/s/7qTRSMqaqG8XZ9rpEBhYNQ

• 深拷貝、淺拷貝：

設計模式

• 建議看下 js 設計模式這本書

書籍推薦

• JavaScript 高級程序設計（紅寶書）
• 重學前端

3、前端框架

Vue

• 響應式

• https://mp.weixin.qq.com/s/zDv_IQ36o_rRD25xN9uyuw
• https://mp.weixin.qq.com/s/VyH7wnKxxgmZRKKxHTNBhA

• watch：https://mp.weixin.qq.com/s/hTygoAan4yH3V4XV9iE1Pw

• router：https://mp.weixin.qq.com/s/dPaNbBLXd2ZMCIri1ubyUQ

• nextTick：https://mp.weixin.qq.com/s/HzttRWoAWeaA4wfwnvPR4w

• composition：https://mp.weixin.qq.com/s/jQ6k2LCTcnaBzWLz8LFGkQ

• 虛擬DOM-diff 算法

• keep-alive：https://github.com/LuckyWinty/fe-weekly-questions/issues/33

React

• hooks：https://mp.weixin.qq.com/s/UoHiN_dFpduJjh0E5kcy5w

• Redux/react-redux/redux 實現原理：

• https://mp.weixin.qq.com/s/-gox1xwjjpn3ADfVWUxJDA
• https://github.com/LuckyWinty/fe-weekly-questions/issues/58

• setState：https://mp.weixin.qq.com/s/8aidhuwOGyLJV2zz0sjh2A

• React小書：http://huziketang.mangojuice.top/books/react/
• 虛擬DOM-diff 算法

Angular

• 自行總結

4、前端工程化

• 模塊化：https://github.com/LuckyWinty/fe-weekly-questions/issues/19

• 構建工具

• Webpack性能優化：https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.md

• Webpack 深入淺出之公司級分享總結：

  https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack%20%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BA%E4%B9%8B%E5%85%AC%E5%8F%B8%E7%BA%A7%E5%88%86%E4%BA%AB%E6%80%BB%E7%BB%93(%E5%86%85%E9%99%84%E5%AE%8C%E6%95%B4ppt).md

• 打包機制：https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack4%E6%89%93%E5%8C%85%E6%9C%BA%E5%88%B6%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90.md

• 插件機制：https://github.com/LuckyWinty/blog/blob/master/markdown/webpack%E6%8F%92%E4%BB%B6%E6%9C%BA%E5%88%B6.md

• HMR原理：https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/HMR%E5%8E%9F%E7%90%86.md

• tree-shaking：https://github.com/LuckyWinty/blog/issues/1

• 項目常用配置：https://github.com/LuckyWinty/blog/blob/master/markdown/%E9%A1%B9%E7%9B%AE%E5%B8%B8%E7%94%A8%E9%85%8D%E7%BD%AE.md

• 初學Babel工作原理：https://mp.weixin.qq.com/s/jZ7vgEMIGjB8f8u1SuFoOA
• 前端工程師的自我修養-關於 Babel 那些事兒：https://mp.weixin.qq.com/s/PVy-zJLhsZw4rd-uDLftyw
• 如何用 Babel 為代碼自動引入依賴：https://mp.weixin.qq.com/s/VfLeXHNxwsOodrywVkXfkg

• 部署

• 前端部署的發展歷程：https://mp.weixin.qq.com/s/Cm5IOJ0v704Hs37vTS7Aow
• Vue部署最佳實踐：https://mp.weixin.qq.com/s/z5w-H9vOQ7ouuDa_VmtuQA

• 持續集成

• Docker 的 SSR 持續開發集成環境實踐：https://mp.weixin.qq.com/s/EowqAuFQ9-0xOQIxqMvrog
• 花椒前端基於 GitLab CI/CD 的自動化構建、發布實踐：https://mp.weixin.qq.com/s/MbeW8UNZ1fPekWcaNqmsCQ

• 輔助

• ts/tslint/eslint
• prettier
• changelog
• jsdoc
• husky
• 其他
  •  前端網紅框架的插件機制全梳理（axios、koa、redux、vuex）：https://mp.weixin.qq.com/s/GBL0WiWey5hQwQTmEY2kww

5、node相關

npm

• 你應該知道的 NPM 知識都在這！https://mp.weixin.qq.com/s/bm7rtXoAYsluDpevPs69Fw

• NPM命令實用使用技巧總結。https://mp.weixin.qq.com/s/NO815A1UpWrIvIDt22xy3A

cluster

• https://mp.weixin.qq.com/s/3YFZJpNkTqulyL5PJXkpmg

pm2

• https://mp.weixin.qq.com/s/LdLYb61MY585ZevQSF7Dpw

消息隊列

• https://mp.weixin.qq.com/s/BYakyELOrtxFNlh5G91TtQ

rpc

• https://mp.weixin.qq.com/s/oPSb6z_aiQ0lKbiMChDa1A

ssr

• https://mp.weixin.qq.com/s/phZ8jFVrAwcCfuNlZDFG1w

cpu

• https://mp.weixin.qq.com/s/kfcwaKRwP3SY2wa3bWA_mw

實踐

• https://mp.weixin.qq.com/s/agCyEHf4m2uah0nQnMbdpQ
• https://mp.weixin.qq.com/s/yE4patSpBA6PpKpc8B8hEQ

推薦書籍

• 深入淺出 nodejs
• 來一打 C++擴展

6、算法

見另一個腦圖

7、計算機網絡/安全

http/https

• HTTP2/HTTP3總結：https://mp.weixin.qq.com/s/OitrWEosrpuXh19o_TDasg

• 你連 HTTPS 原理都不懂，還講“中間人攻擊”？https://mp.weixin.qq.com/s/sHtZhRTNOihmxap5sDD6xQ

• HTTP3原理實現：https://mp.weixin.qq.com/s/wrOXO5MH4wtbuvrCPCQNQA

http 緩存

• 徹底理解瀏覽器的Http緩存機制：https://mp.weixin.qq.com/s/G5FIrWOtsNROHgEKesJcdg

• 知識拾遺」你應該知道的 https：https://mp.weixin.qq.com/s/aMYp6Y5n26r9vdQIom4g0w

web安全

• Web 安全總結(面試必備良葯)：https://mp.weixin.qq.com/s/rU32rVM6Q-ele01ZB3RFzg

輸入到渲染過程

• https://mp.weixin.qq.com/s/DLq_GIkdnuOayThfi3jI0A

8、性能優化

分析

• 利用 Chrome Dev Tools 進行頁面性能分析：https://mp.weixin.qq.com/s/azeUIx0EA86EFQrtIRUKwQ

指標/監控

• 自定義性能指標及上報方法詳解：https://mp.weixin.qq.com/s/DJ8Fdq1_cIoW0_NYekZwFw

• 前端性能優化之通用性能指標定義及上報策略詳解：https://github.com/LuckyWinty/blog/blob/master/markdown/perf/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B9%8B%E9%80%9A%E7%94%A8%E6%80%A7%E8%83%BD%E6%8C%87%E6%A0%87%E5%AE%9A%E4%B9%89%E5%8F%8A%E4%B8%8A%E6%8A%A5%E7%AD%96%E7%95%A5%E8%AF%A6%E8%A7%A3.md
• 騰訊前端團隊是如何做web性能監控的？https://mp.weixin.qq.com/s/bFNlxTHV9b-3ULARjHT7dg

• 如何精確統計頁面停留時長：https://mp.weixin.qq.com/s/FckgB34YPMDNxyLJLELW7A

實踐

• 前端性能優化，這些你都需要知道：https://mp.weixin.qq.com/s/QMn651mxQAKbIZVOPF5jlA

• 阿里大佬關於移動端體驗優化經驗總結：https://mp.weixin.qq.com/s/CFY6kh0dxijKTKIjmBa0Qw

• 項目不知道如何做性能優化？不妨試一下代碼分割：https://mp.weixin.qq.com/s/eTBNiZsh0R_2OG2gIIpUQQ

• 淘寶是如何縮短首屏時間、降低服務器壓力的？邊緣計算告訴你答案！https://mp.weixin.qq.com/s/miLq_Q8YJWb-WzINo9t0Vw

9、效率工具

chrome 插件

• https://mp.weixin.qq.com/s/1_YjTCXAGTRSdvmDi46Nxw

vscode 插件

• https://mp.weixin.qq.com/s/eHjh4WKyo4g009VVpenzyQ

前端工具

• https://mp.weixin.qq.com/s/y1yoMpbdgK024-tQnkP3TQ

玩轉 github

• https://mp.weixin.qq.com/s/q-XGx7zV--STGpm1ikoI6A

react 開發提效

• https://mp.weixin.qq.com/s/0-HlaOQm6iB_MXWtcyQezA

webpack 插件

• https://mp.weixin.qq.com/s/FPENfKo7mObEYcVP0wofRA

10、項目

代碼片段

• https://mp.weixin.qq.com/s/YA0327_rTE8tyZjlXUknjg

容錯/容災

• https://mp.weixin.qq.com/s/prf-mXexBh1Ie-ctq9FnzA
• https://mp.weixin.qq.com/s/A4Q14uXr2f2vifbULpZu1Q

開發技巧

• https://mp.weixin.qq.com/s/m-5D2261jTQ_TJccvObxSQ

單元測試/自動化測試

• https://mp.weixin.qq.com/s/FpuN008a24D1yS33QVbscA
• https://mp.weixin.qq.com/s/GfI5C-YkKjoQm5PNbDFlDw

11、手寫代碼系列

Promise

• https://github.com/LuckyWinty/blog/issues/3
• https://mp.weixin.qq.com/s/phML-prTBnNqck20PJjufw

其他

• https://juejin.im/post/6844903911686406158
• https://mp.weixin.qq.com/s/abbjBhMqEupU1AVHiR-qHw

12、其他能力

腳手架制作

• https://mp.weixin.qq.com/s/6ZCvAj1fMbbtDp6gWXp6JQ

代理工具

• https://mp.weixin.qq.com/s/ABjf8hJ8OYZy0LZL99E45Q

聚合&npm 發布

• https://mp.weixin.qq.com/s/qXFd3f7CkEzz4u_1zl-TSw

serverless

• https://mp.weixin.qq.com/s/itUDdPvA_Sy-usvyvaa2lQ

微前端

• https://mp.weixin.qq.com/s/zw6sNtNEvqnnGgRsPJsW4w
• https://mp.weixin.qq.com/s/O5NcRVsgNS0foaJUETZg4g
• https://mp.weixin.qq.com/s/NdAzMnl7N-ZlaZSiGbLZDA

nginx

• https://mp.weixin.qq.com/s/9MED07NUUkJPH5GVlpmOUA
• https://mp.weixin.qq.com/s/o2Us4Zj6DO2NHGQVaHIa1A
• https://mp.weixin.qq.com/s/HWA9b3Mg6ShVaYCuNIsWAA

chrome 插件開發

• https://mp.weixin.qq.com/s/1YsRk3lIBA-KObAIJXYrjw

13、面經收集

BAT

• https://mp.weixin.qq.com/s/7NjxEAo7nPNsBCV7UwTz1A
• https://mp.weixin.qq.com/s/pP-qvi6XK14zoGxtc2dqfA
• https://mp.weixin.qq.com/s/bTewcTE3yCN6FGRn9MzHAw
• https://mp.weixin.qq.com/s/-YE6HrNx_QLU-lnrDzVK6g
• https://mp.weixin.qq.com/s/N77kis0fF-C-NsZldr-vAg
• https://mp.weixin.qq.com/s/_qI0R15lrMwKildQ-6vY1w
• https://mp.weixin.qq.com/s/o5M4imVQxgRefzijS6qk9w
• https://mp.weixin.qq.com/s/0NzfGDvJMAlE2zpT-KSkzA
• https://mp.weixin.qq.com/s/UXRMy3VhT8SVkjkDtaoTrg
• https://mp.weixin.qq.com/s/Zb2WzRLXhHTB2A_5oH4QUg
• https://mp.weixin.qq.com/s/3R8BxWk6JjUxF4OIdWBc_g
• https://mp.weixin.qq.com/s/zA0nk_z_CM2Y0ftCTSQdtA
• https://mp.weixin.qq.com/s/YrKGMORhB_POmfWZVWRkHg
• https://mp.weixin.qq.com/s/_P0-uCz11hvFIwdLQ1mL-Q
• https://mp.weixin.qq.com/s/-4oLchD8FztnxhpbYs2p-g
• https://mp.weixin.qq.com/s/Y9N8exEqs0Gz-Qvbg-0RgQ