前端Q知識體系梳理與面試準備直播回顧

時間  2021-01-13
標籤 css html 前端 vue node react webpack css3 nginx git 欄目 快樂工作 简体版
原文   原文鏈接

PS：關注前端Q公衆號，回覆 直播 ，可得到直播全部資料及錄播視頻～css

PS：體系圖中對應的知識點能夠直接連接過去的地址爲：https://github.com/LuckyWinty/blog，點擊閱讀原文可打開～html

PS：公衆號裏放大圖會失真，這裏不放了，想看的公衆號獲取資料看吧～前端


直播數據

vue

image.png

嗯，謝謝你們支持，但願有下次，但願下次還有你～
node


直播內容

react

梳理知識體系工具

  • Xmind
  • Lighten
  • Gitbook
  • markdown

梳理方法

  • 由大到小， 列出本身認爲前端包含的大方向的內容
  • 憑空想象，在本身的認知範圍下拓展知識點
  • 參考他人，搜別人的總結
  • 書籍/課程，留意書籍/課程大綱
個人知識體系梳理

js

基礎

  • 數據類型webpack

    • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures

  • es6css3

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

  • 原型/繼承nginx

    • 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

  • 事件流/事件委託git

    • 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

工程化

  • 模塊化

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/19

  • 構建工具

    • 基本使用

    • babel

    • rollup/gulp/snowpack/...

    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/Webpack%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.md
    • 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

    • 打包機制

    • 插件機制

    • HMR原理

    • tree-shaking

    • 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
    • https://github.com/LuckyWinty/blog/blob/master/markdown/webpack/HMR%E5%8E%9F%E7%90%86.md
    • 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

    • 原理

    • 深刻淺出分享

    • 性能優化

    • https://mp.weixin.qq.com/s/jZ7vgEMIGjB8f8u1SuFoOA
    • https://mp.weixin.qq.com/s/PVy-zJLhsZw4rd-uDLftyw
    • https://mp.weixin.qq.com/s/VfLeXHNxwsOodrywVkXfkg

    • webpack

  • 部署

    • https://mp.weixin.qq.com/s/Cm5IOJ0v704Hs37vTS7Aow
    • https://mp.weixin.qq.com/s/z5w-H9vOQ7ouuDa_VmtuQA

  • 持續集成

    • https://mp.weixin.qq.com/s/EowqAuFQ9-0xOQIxqMvrog
    • https://mp.weixin.qq.com/s/MbeW8UNZ1fPekWcaNqmsCQ

  • 輔助

    • ts/tslint/eslint
    • prettier
    • changelog
    • jsdoc
    • husky

設計模式

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

推薦書籍

  • JavaScript 高級程序設計
  • 重學前端

node

npm

  • https://mp.weixin.qq.com/s/NO815A1UpWrIvIDt22xy3A
  • https://mp.weixin.qq.com/s/lnvFJkp1_ZFgYk1R9zVChg

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

***

  • 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++擴展

框架

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

  • 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

  • diff 算法

angular

  • 自行總結

其餘

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

算法

見另外一個腦圖

性能優化

分析

  • 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
  • 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

效率工具

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

項目

代碼片斷

  • 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

計算機網絡/安全

http/https

  • https://mp.weixin.qq.com/s/OitrWEosrpuXh19o_TDasg
  • https://mp.weixin.qq.com/s/sHtZhRTNOihmxap5sDD6xQ

http 緩存

  • https://mp.weixin.qq.com/s/G5FIrWOtsNROHgEKesJcdg
  • https://mp.weixin.qq.com/s/aMYp6Y5n26r9vdQIom4g0w

安全

  • https://mp.weixin.qq.com/s/rU32rVM6Q-ele01ZB3RFzg

輸入到渲染過程

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

http1/2/3

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

手寫系列

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

其餘能力

腳手架製做

  • 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

面經收集

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

css

高頻考題

  • BFC

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

  • 佈局

    • 浮動

    • 水平垂直居中

    • 絕對/相對定位

    • flex

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/31
    • https://juejin.im/post/6854573220306255880
    • Grid

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/52

  • 盒模型

    • IE 盒模型
    • W3C 標準盒模型

    • https://juejin.im/post/6844903505983963143

  • 動畫

    • transition
    • Keyframes animation

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

  • css3

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

  • 預處理器

    • sass/less/postcss...

基礎

  • 選擇器

    • https://juejin.im/post/6844904115147898894

  • position

    • https://www.ruanyifeng.com/blog/2019/11/css-position.html

  • 文字溢出處理

    • 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

  • 用 css 畫一個扇形？

    • https://github.com/LuckyWinty/fe-weekly-questions/issues/30

  • cacl 使用

    • https://mp.weixin.qq.com/s/1sn_uvBNjg9Zm3SQ9Yi-iQ

書籍推薦

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


最後

  • 歡迎加我微信(winty230)，拉你進技術羣，長期交流學習...

  • 歡迎關注「前端Q」,認真學前端，作個專業的技術人...

image.png

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程