前端知识体系准备

[songning0605]

参考：wintyQ

# 前端知识体系准备

## 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
        - LuckyWinty/fe-weekly-questions#72

- 变量/作用域/闭包/this/上下文

        - http://www.alloyteam.com/2019/07/closure/
        - LuckyWinty/fe-weekly-questions#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

### 工程化

- 模块化

        - LuckyWinty/fe-weekly-questions#19

- 构建工具

        - webpack

          - 基本使用

            - 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://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

              - LuckyWinty/blog#1

          - 深入浅出分享

            - 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/Webpack%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96.md

        - babel

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

        - rollup/gulp/snowpack/...

- 部署

        - 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

### 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++扩展

## 框架

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

        - LuckyWinty/fe-weekly-questions#33

### react

- hooks

        - https://mp.weixin.qq.com/s/UoHiN_dFpduJjh0E5kcy5w

- Redux/react-redux/redux 实现原理

        - https://mp.weixin.qq.com/s/-gox1xwjjpn3ADfVWUxJDA
        - LuckyWinty/fe-weekly-questions#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

- LuckyWinty/blog#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

        - LuckyWinty/fe-weekly-questions#36

- 布局

        - LuckyWinty/fe-weekly-questions#52

          - 浮动
          - 水平垂直居中

            - LuckyWinty/fe-weekly-questions#31

          - 绝对/相对定位
          - flex
            - Grid
                - https://juejin.im/post/6854573220306255880

- 盒模型

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

          - IE 盒模型
          - W3C 标准盒模型

- 动画

        - LuckyWinty/fe-weekly-questions#60

          - transition
          - Keyframes animation

- 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 为什么可以实现垂直居中

        - LuckyWinty/fe-weekly-questions#25

- 说说 visibility=hidden, opacity=0，display:none 的区别

        - LuckyWinty/fe-weekly-questions#64

- 用 css 画一个扇形？

        - LuckyWinty/fe-weekly-questions#30

- cacl 使用

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

### 书籍推荐

- CSS+DIV 从入门到精通
- CSS 权威指南
- 精通 CSS 高级 web 标准解决方案