前端知识体系梳理

前端iceman
3,557 阅读4分钟

前端开发从最开始的html，js，css三件套，到如今的大前端，泛前端，整体开发模式已经从几个人的小作坊模式逐步演变为多团队多角色协同开发的大团队模式，相关的知识，框架，工具更是数不胜数，最近准备梳理下前端开发知识体系，帮助小白或者刚入门前端的同学对需要掌握的知识有一个全局的了解，并附带自己这几年收集的一些好文章。

我整理的前端知识体系主要分为两个大部分，左侧为基础部分，主要包括JS基础，CSS基础，Vue，React，网络协议与安全这5个部分，它们是面试以及日常开发工作肯定会用到的基础知识。右侧则为进阶部分，包括Node，前端工程化，微前端 & 架构设计，数据结构与算法，跨平台，泛前端领域 等,这些部分决定你是否可以成为一名高级前端开发工程师。

前端知识体系.png

针对每个子主题，我列举了面试最常会问到以及日常开发需要掌握的一些知识点，每个知识点我都会附带自己收集到的比较不错的文章，大家也可以在这个基础上继续帮我补充，我们一起不断完善它，后续会动态滚动这篇文章，会不断剔除一些已经过时的工具，知识，补充一些新的进来，帮助大家梳理清楚前端知识体系。

JS基础

  1. ES6：es6.ruanyifeng.com/
  2. 浏览器垃圾回收：mp.weixin.qq.com/s/3RcC0cMPR…
  3. javascript异常类型：mp.weixin.qq.com/s/tsGca5jUc…
  4. Event loop：juejin.cn/post/684490…
  5. 严格模式：zhuanlan.zhihu.com/p/98782951
  6. New关键词详解：juejin.cn/post/684490…
  7. async/await、Promise、setTimeout：juejin.cn/post/684490…
  8. JS中的箭头函数与this：juejin.cn/post/684490…
  9. ES6 Proxy：mp.weixin.qq.com/s/UCgFeW9jH…
  10. this指向问题：juejin.cn/post/701947…
  11. ES5中的继承：mp.weixin.qq.com/s/tZZ3_EG7Q…
  12. 深浅拷贝：juejin.cn/post/700351…
  13. JS中的沙箱：juejin.cn/post/684490…
  14. script 标签中的 async 和 defer 属性：juejin.cn/post/689462…
  15. Array.forEach 中正确使用 Async：juejin.cn/post/684490…

CSS基础

  1. Icon和文本对齐方式的探索：juejin.cn/post/684490…
  2. sass快速上手：juejin.cn/post/684490…
  3. CSS布局技巧：juejin.cn/post/693276…
  4. CSS伪类&伪元素：juejin.cn/post/694544…
  5. Flex 布局教程：www.ruanyifeng.com/blog/2015/0…
  6. CSS 基础：mp.weixin.qq.com/s/KsfOL_WEf…

Vue

  1. vue-cli3 从搭建到优化：juejin.cn/post/684490…
  2. vue-property-decorator：juejin.cn/post/684490…
  3. 批量异步更新策略及 nextTick 原理：www.kancloud.cn/sllyli/vuej…
  4. vue3 Proxy API：juejin.cn/post/700277…
  5. vue中组件name的作用：zhuanlan.zhihu.com/p/225164488
  6. render watcher：juejin.cn/post/684490…
  7. Vue 项目国际化：mp.weixin.qq.com/s/mRAeIj8tK…
  8. vue-router 源码分析：liyucang-git.github.io/2019/08/15/…
  9. Vue.js 内部运行机制：s.juejin.cn/ds/SXAQBB4/

React

  1. React Hook的实现原理：zhuanlan.zhihu.com/p/75146261
  2. React Hooks原理探究：juejin.cn/post/689157…
  3. React diff原理探究：juejin.cn/post/684490…
  4. setState异步、同步与进阶：juejin.cn/post/684490…
  5. 走进React Fiber的世界：juejin.cn/post/694389…
  6. 对React children 的深入理解：segmentfault.com/a/119000001…
  7. React Context API 和 Hooks 实现全局状态管理：sanonz.github.io/2020/state-…
  8. 组件状态管理：juejin.cn/post/684490…
  9. useReducer 使用：juejin.cn/post/684490…

网络协议与安全

  1. http知识点：juejin.cn/post/684490…
  2. POST 提交数据方式：juejin.cn/post/699690…
  3. 前端文件下载和浏览器自动嗅探：juejin.cn/post/684490…
  4. 登录Cookie问题：zhuanlan.zhihu.com/p/359641832
  5. 跨域与跨站：juejin.cn/post/692673…
  6. Cookie 新增的 SameParty 属性：mp.weixin.qq.com/s/c7cgTLuHc…
  7. HTTPS 工作原理详解 | TLS握手过程：juejin.cn/post/688481…
  8. Whistle，web 抓包与 debug 利器：juejin.cn/post/684490…
  9. HTTP2：juejin.cn/post/684490…
  10. CSRF，XSS：juejin.cn/post/715530…

Node

  1. 中间件和洋葱模型：mp.weixin.qq.com/s/sqbiK5CyM…
  2. Node.js koa 源码架构设计：mp.weixin.qq.com/s/1pt-UnGou…
  3. Node.js 进程与线程：mp.weixin.qq.com/s/N6Omr5HwS…
  4. Node.js 脚本遭遇异常时如何安全退出：mp.weixin.qq.com/s/K74xCqRSs…
  5. Egg 入门：eggjs.github.io/zh/quicksta…
  6. Node.js系列六 - Buffer的使用：juejin.cn/post/697585…
  7. fs模块、path模块：juejin.cn/post/708865…

前端工程化

  1. 前端团队的自动化部署指南：juejin.cn/post/686074…
  2. Gitlab-CI使用教程：juejin.cn/post/684490…
  3. Docker 入门教程：www.ruanyifeng.com/blog/2018/0…
  4. 前端工程化配置指南：mp.weixin.qq.com/s?__biz=MzI…
  5. import 被 webpack 编译成了什么：juejin.cn/post/685956…
  6. webpack5优化实战：juejin.cn/post/691012…
  7. webpack基础配置-css样式相关loader：zhuanlan.zhihu.com/p/120145378
  8. webpack devtool：juejin.cn/post/684490…
  9. VueLoader : .vue 文件是如何被打包：mp.weixin.qq.com/s/FJzDRLchG…
  10. 深入浅出Webpack：webpack.wuhaolin.cn/
  11. CSS Modules 用法教程：www.ruanyifeng.com/blog/2016/0…
  12. 前端工程基础知识点--Browserslist：juejin.cn/post/684490…
  13. mono-repo：segmentfault.com/a/119000003…
  14. 如何配置项目中的 Babel：juejin.cn/post/686438…
  15. AST 从入门到上手指南：juejin.cn/post/695396…
  16. AST 抽象语法树：juejin.cn/post/684490…
  17. 深入理解 TypeScript：ttps://jkchao.github.io/typescript-book-chinese/
  18. 深入理解 ESlint：juejin.cn/post/684490…
  19. 前端综合能力系列之EditorConfig：juejin.cn/post/684490…
  20. 规范你的 commit message：juejin.cn/post/684490…
  21. 3分钟入门 StyleLint：juejin.cn/post/687636…
  22. 用 Rollup 构建一款开源库：juejin.cn/post/685457…
  23. Jest 入门指南：iceiceice.top/2018/12/29/…
  24. TypeScript：juejin.cn/post/700317…

微前端 & 架构设计

  1. 微前端入门：juejin.cn/post/684490…
  2. 微前端框架 qiankun：mp.weixin.qq.com/s/juf_PPpSU…
  3. 字节是如何落地微前端：mp.weixin.qq.com/s/y2J5OxJLi…
  4. qiankun的js沙箱原理：juejin.cn/post/692011…
  5. H5的pushState与replaceState：juejin.cn/post/684490…
  6. 深入浅出浏览器的history对象：juejin.cn/post/694874…
  7. 前端领域的插件式设计：mp.weixin.qq.com/s/_Qy8wScgq…
  8. JavaScript设计模式es6：juejin.cn/post/684490…

数据结构与算法

  1. 前端算法与数据结构：s.juejin.cn/ds/SXfdC1r/
  2. JS算法题之leetcode：segmentfault.com/a/119000002…
  3. 手撕代码之Promise：mp.weixin.qq.com/s/XlHwDb3dL…
  4. 5大排序算法&2大搜索&4大算法：juejin.cn/post/708872…

跨平台

  1. 微信小程序架构原理：juejin.cn/post/684490…
  2. Flutter 与 React Native：juejin.cn/post/703077…

泛前端领域

  1. 多媒体前端技术入门指南：juejin.cn/post/698125…
  2. YUV渲染篇：juejin.cn/post/696199…
  3. 视频解码篇：juejin.cn/post/694602…
  4. Web Audio 简易教程：mp.weixin.qq.com/s/8DCFok78l…
  5. 动画技术架构：juejin.cn/post/701854…
  6. 视频绿幕抠图：juejin.cn/post/684490…
  7. webgl 实现透明视频动画：juejin.cn/post/688567…
  8. Solidity 中文文档：learnblockchain.cn/docs/solidi…
  9. 以太坊：ethereum.org/zh/develope…
  10. wb3开发者学习路线指南：juejin.cn/post/711430…

前端知识体系旨在帮助前端小白了解前端需要掌握的知识，大家可以在评论区继续补充，不断完善。

avatar
文章
阅读
粉丝