frontend-learning-map icon indicating copy to clipboard operation
frontend-learning-map copied to clipboard

前端学习路线(TODOs)

前端学习路线

列出需要学习的东西,后续一个一个突破。

夯实基础

官方文档

  • https://nodejs.org/en/docs/
  • https://webpack.js.org/
  • https://eslint.org/
  • https://www.typescriptlang.org/docs/handbook/intro.html
  • https://babeljs.io/
    • babel release notes: https://babeljs.io/blog/2018/08/27/7.0.0#pure-annotation-support
  • https://vuejs.org/
  • https://reactjs.org/
  • https://lerna.js.org/
  • https://vitejs.dev/
  • https://expressjs.com/
  • https://koajs.com/

熟悉源码

  • Vue 源码解析: https://github.com/ustbhuangyi/vue-analysis
  • 《深入理解Node.js:核心思想与源码分析》: https://github.com/yjhjstz/deep-into-node
  • React 源码解析: https://react.jokcy.me/
  • https://github.com/KieSun/learn-react-essence
  • https://github.com/huyaocode/webKnowledge

勤加练习

  • https://github.com/type-challenges/type-challenges

其他学习路线

  • https://andreasbm.github.io/web-skills/
  • https://github.com/louzhedong/blog

前端面试资料

  • https://github.com/lgwebdream/FE-Interview
  • https://github.com/haizlin/fe-interview
  • https://github.com/youngjuning/react-interview
  • https://github.com/ascoders/weekly
  • https://lxchuan12.gitee.io/
  • https://github.com/yangshun/-end-interview-handbook
  • https://github.com/poetries/FE-Interview-Questions
  • https://github.com/KieSun/fucking-end
  • https://github.com/qianguyihao/Web
  • https://github.com/woai3c/Front-end-basic-knowledge
  • https://github.com/woai3c/introduction-to-front-end-engineering
  • https://github.com/FrankFang/best-chinese-front-end-blogs
  • https://github.com/woai3c/Front-end-articles
  • https://github.com/febobo/web-interview
  • https://github.com/EtherDream/web-frontend-magic
  • https://github.com/Molunerfinn/2019-job-hunting
  • https://github.com/seognil/fe-foundation
  • https://github.com/qiu-deqing/FE-interview
  • https://github.com/paddingme/
  • https://github.com/huruji/FE-Interview
  • Front-end-Web-Development-Interview-Question
  • https://github.com/yifeikong/reverse-interview-zh

大佬 & 博客

主要列举目前在知乎、GitHub 等平台活跃的前端大佬,可以定期看看大佬的更新,学习一些新知识

  1. 贺师俊: https://github.com/hax, https://www.zhihu.com/people/he-shi-jun
    • 推动国内技术公司加入 TC39 第一人
  2. 玉伯: https://www.zhihu.com/people/lifesinger
    • 蚂蚁金服前端 Leader
  3. Harttle: https://github.com/harttle
    • 前百度前端搜索 Leader
  4. 李松峰: https://www.zhihu.com/people/lisf
    • JS 高级程序设计、深入理解 ES 6 等的译者
  5. justjavac: https://github.com/justjavac, https://www.zhihu.com/people/justjavac.com
    • Deno核心贡献者
  6. 顾轶灵: https://github.com/Justineo, https://www.zhihu.com/people/justineo
    • vue 的核心贡献者,在百度工作
  7. 胖茶: https://github.com/sodatea, https://www.zhihu.com/people/sodatea
    • vue 的核心贡献者
  8. antfu: https://github.com/antfu, https://www.zhihu.com/people/antfu
    • vue 的核心贡献者, 著有 slidev, vueuse
  9. 谭光志: https://github.com/woai3c, https://www.zhihu.com/people/tan-guang-zhi-19
  10. 李玉北: https://github.com/leeight, https://www.zhihu.com/people/li-yu-bei
  11. egoist: https://github.com/egoist
    • vue 的核心贡献者
    • 很多基础库的开发者,造轮子效率极高
  12. 黄子毅: https://www.zhihu.com/people/huang-zi-yi-83, https://github.com/ascoders
  13. 杨健: https://www.zhihu.com/people/hardfist, https://github.com/hardfist
  14. HcySunYang: https://github.com/HcySunYang, https://www.zhihu.com/people/hcysunyang
    • vue 的核心贡献者
  15. theanarkh: https://github.com/theanarkh, https://www.zhihu.com/people/theanarkh
  16. 杨扬: https://github.com/dexteryy, https://www.zhihu.com/people/dexteryy
    • 字节跳动基础工程大佬,WenInfra 成员
  17. 若川视野: https://github.com/lxchuan12, https://www.zhihu.com/people/lxchuan12
  18. sshsunlight: https://github.com/sl1673495, https://www.zhihu.com/people/ssh-fe
    • WebInfra 成员,微信公众号「前端从进阶到入院」
  19. 黄轶: https://github.com/ustbhuangyi, https://www.zhihu.com/people/huang-yi-50-6
    • Vue 源码解析讲的很不错: https://github.com/ustbhuangyi/vue-analysis
  20. 尤雨溪: , https://www.zhihu.com/people/evanyou, https://github.com/yyx990803
    • Vue 创始人
  21. 云谦: https://github.com/sorrycc
    • 阿里 umi 维护者
    • 著有 https://github.com/sorrycc/weekly

相关工具

  1. https://www.dute.org/keycodes

权威参考

  1. https://dev.w3.org/html5/html-author/
  2. https://html.spec.whatwg.org/

前端每日一题

督促自己每天完成一个前端打卡题,并在本项目更新~

  • 2021-08-31: 防抖和节流
    • 防抖和节流的区别是,防抖一上来就是先等待执行,而节流是先执行了再等待,从代码上可以看到区别,具体适用场景的话,
      • debounce 常用于窗口 resize 和键盘输入,当稳定之后再执行逻辑能够减少资源消耗
      • 如果用户滑到底部发送 API 请求,显然用 throttle 合适,因为 debounce 会对请求进行延迟
  • 2021-09-01: 任务队列、事件循环、宏任务、微任务
  • 2021-09-04: CSS 居中方案
  • 2021-09-05: 开发中常用的 Content-Type
  • 2021-09-06: HTTP 2、HTTP 3 有哪些新特性
  • 2021-09-07: Vue 的 nextTick 原理
  • 2021-09-08: 手写函数式编程代码
  • 2021-09-09: React Diff 算法
  • 2021-09-10: koa-compose 源码解析
  • 2021-09-11: Redux compose 源码解读
  • 2021-09-12: css sticky 属性
  • 2021-09-13: ES2022: Class static block
  • 2021-09-15: canvas 分形
  • 2021-09-16: 为什么 esbuild 那么快
  • 2021-09-17: update-notifier 源码解析
  • 2021-09-19: VSCode WebView 开发架构
  • 2021-09-26: validate-npm-package-name 源码解析
  • 2021-10-09: create-vue 发布并成为官方推荐
  • 2021-11-24: 为什么 React hooks 不能写在 if 判断中
  • 2021-12-05: Element UI 新建组件脚本
  • 2023-10-19: Node.js PDF Chat 实现
  • 2023-10-20: HTTP 各版本区别