前端Q知识体系梳理与面试准备直播回顾

PS：关注前端Q公众号，回复 直播 ，可得到直播全部资料及录播视频～

PS：体系图中对应的知识点能够直接连接过去的地址为：https://github.com/LuckyWinty/blog，点击阅读原文可打开～

PS：公众号里放大图会失真，这里不放了，想看的公众号获取资料看吧～

直播数据

嗯，谢谢你们支持，但愿有下次，但愿下次还有你～

直播内容

梳理知识体系工具

• Xmind
• Lighten
• Gitbook
• markdown

梳理方法

• 由大到小， 列出本身认为前端包含的大方向的内容
• 凭空想象，在本身的认知范围下拓展知识点
• 参考他人，搜别人的总结
• 书籍/课程，留意书籍/课程大纲

个人知识体系梳理

js

基础

• 数据类型

  • 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

工程化

• 模块化

  • 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」,认真学前端，作个专业的技术人...