search

songning0605 / blog

整理记录
1 stars 0 forks source link

前端知识体系准备 #31

Open songning0605 opened 4 years ago

songning0605 commented 4 years ago

参考：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         - 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

- 构建工具

        - 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

              - https://github.com/LuckyWinty/blog/issues/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

        - 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

- 布局

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

          - 浮动           - 水平垂直居中

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

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

- 盒模型

        - 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

- 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 标准解决方案