2023前端学习路线终极版（大、全、干）

远海星光

这是饥人谷前端2023年的学习路线
体系知识

模块一 HTML

• 环境搭建 Chrome + VSCode + liveserver
  
• 标签的使用场景
  
• 常见HTML5标签
  
• doctype、meta、常见属性
  
• 各种表单类型
  

模块二 CSS重难点

• CSS选择器种类、权重、优先级计算、匹配顺序、继承
  
• 块、行的特性
  
• 两种盒模模型
  
• 边距折叠
  
• Flex布局做页面，flex-basis、flex-grow、flex-shrink的计算方法
  
• BFC的概念和应用
  
• 定位各种用法
  
• 层叠上下文
  
• Grid布局的使用
  
• 垂直、水平居中的几种实现
  
• 响应式媒体查询
  
• 移动端适配动态rem、动态viewport
  
• 字体图标、svg图标
  
• CSS3常见特效如圆角、阴影、形变、过渡、动画
  

模块三 ECMAScript

• 8种数据类型
  
• var、let、const 区别
  
• 布尔与falsy值
  
• 类型转换
  
• 基础类型和引用类型
  
• 常见运算符（+、+=、==、===、&&、||）
  
• typeof 的值
  
• 运算符结合性和优先级
  
• 流程控制语句
  
• 字符串操作
  
• 0.1 + 0.2 === 0.3与大数相加
  
• 数组操作API
  
• 对象操作
  
• Map、weakMap、Set、Symbol
  
• Math、Date
  
• 函数、箭头函数、递归
  
• 深拷贝
  
• 词法作用域、立即执行函数表达式
  
• 柯里化、回调函数
  
• 正则表达式
  
• ES6常用语法
  

模块四 ECMAScript重难点

• 构造函数、对象、原型，原型链
  
• Class写法
  
• 继承的实现
  
• this、call、apply、bind
  
• 闭包
  
• 回调函数，Promise封装、async、await的使用
  
• 手写Promise.all、Promise.race、Promise.allSettled、Promise.any
  
• 手写Promise并发控制
  
• 任务队列宏任务与微任务，setTimeout、Promise、async、await相关代码输出
  
• v8垃圾回收
  

模块五 DOM

• DOM的获取、创建、删除、修改内容
  
• 属性的操作、JS修改样式、切换class控制样式
  
• onclick与addEventListener，事件模型、冒泡与捕获、事件代理、阻止默认
  

模块六 BOM

• localStorage、Cookie、Session、SessionStorage 区别
  
• navigator判断设备
  
• history、pushState、replaceState，不改变url刷新页面
  

模块七 前后端交互

• 手写node server
  
• Ajax 的使用与Promsie封装
  
• Fetch API的使用
  
• Axios介绍
  
• Mock.js和常见Mock平台
  
• WebSocket
  
• 同源策略、跨域方案、CORS、JSONP
  

模块八 浏览器渲染机制

• DNS解析过程
  
• 浏览器渲染机制
  
• 加载JS、CSS区别和放置位置原因
  
• 重绘、回流概念，和性能优化的关系
  
• script的asnyc和defer
  

模块九 模块化、项目构建

• Node.js之CommonJS规范
  
• Node.js之npm、yarn、package.json、node_modules
  
• ES6 Module
  
• Webpack的日常使用、配置
  
• 常见Loader、Plugin
  
• 手写Webpack Plugin、Loader
  
• Webpack的构建流程
  
• Webpack优化前端的手段
  
• 认识rollup
  

拓展提升

模块十 HTTP与Web安全

• TCP三次握手和四次挥手过程
  
• TCP与UDP区别?TCP 协议怎么保证可靠的，UDP 为什么不可靠？应用场景?
  
• 滑动窗口、拥塞控制
  
• GET和 POST的区别
  
• HTTP状态码有哪些，301和302有什么区别
  
• 浏览器HTTP请求数目限制，怎么解决
  
• 长链接、短链接、如何断开长链接
  
• HTTP 1.0&1.1&2区别
  
• HTTP2特性
  
• HTTP2如何加密
  
• 缓存的处理过程？强缓存/弱缓存？请求头字段和响应头字段，如何设置不用缓存
  
• HTTP和HTTPS有什么区别
  
• HTTPS加密过程、证书是什么
  
• Web安全之HTTPS、XSS、CSRF
  
• 登录鉴权有哪些方式？登录持久化怎么实现的?
  
• JWT，accesstoken、refresh token的作用分别是什么，存放在哪儿，具体流程？
  

模块十一 性能优化

• 性能优化怎么做的（结合资源和代码压缩优化、图片/路由/组件懒加载或者分包、CDN、SSR，HTTP2、浏览器加载和渲染、动画体验等）
  
• CDN原理？CDN优化时如何判断该将哪些包分离
  
• 前端性能衡量指标
  

模块十二 移动端

• px、em、rem、vw、rpx区别
  
• 物理像素、逻辑像素、PPI、设备像素比是什么
  
• 布局视口、视觉视口是什么？meta viewport的设置逻辑
  
• viewport缩放适配与动态rem适配原理
  
• 在项目中使用postcss-pxtorem
  
• 实现0.5px细线
  
• 移动端响应式高清图片解决方案
  

模块十三 设计模式

• 面向对象与组件
  
• 模块模式
  
• 单例模式
  
• 工厂模式
  
• 桥接模式
  
• 观察者模式
  
• 以轮播为例讲解设计模式的优势
  

模块十四 TypeScript学习

• 体验TypeScript
  
• 类型v.s.类
  
• 类型的两个好处
  
• TS支持的JS类型
  
• TS中的any、unknown、void、never、enum、tuple
  
• 如何给不同数据加type
  
• 联合类型与区分联合类型
  
• 交叉类型
  
• 怎么声明div的类型
  
• 泛型是什么
  
• 泛型的实际使用
  
• 重载
  
• 如何用泛型封装网络请求库
  

模块十五 Node.js 重难点

• Node.js 技术架构总结
  
• Node.js 命令行翻译项目
  
• 在Node.js项目中使用TypeScript
  
• 发布NPM
  
• Node.js API 与学习方案
  
• WebStorm&VSCode&Chrome 调试 Node.js
  
• libuv & v8 的功能
  
• EventLoop 介绍
  
• Docker 和 MySQL
  
• Node.js 连接数据库
  
• ORM 之 Sequalize
  
• 一对一、一对多、多对多表设计
  
• 缓存字段、事务、存储引擎 InnoDB
  
• 三个例子了解 Stream
  
• 创建自己的流
  
• 进程、阻塞进程、线程
  
• 创建进程和操作线程
  
• Node.js 的 execFile、spawn 和 fork
  

模块十六 手写代码

• 用Set去重、不用Set如何去重、在原数组上去重
  
• 如何对数组里有相同内容的对象去重
  
• 如何按数组里包含的对象属性字段去重
  
• 数组里的对象包含数组摘录字段构成新数组
  
• 手写深拷贝、处理循环引用的深拷贝
  
• 手写一个trim函数
  
• 手写一个curry函数
  
• 写一个观察者EventBus含emit、on、once、off
  
• 手写一个 instanceof
  
• 手写一个new
  
• 手写一个call和apply
  
• 用call/apply实现bind
  
• 不用call或者apply实现bind
  
• 手写bind考虑new一个bind函数的情况
  
• 手写防抖debounce
  
• 手写节流throttle
  
• 手写forEach、map、filter、reduce
  
• 手写数组拍平flat
  
• 手写原型继承
  
• 手写class继承
  
• 实现字符串大数相加
  
• 手写lazyman函数
  

模块十七 手写代码

• Promise封装一个Ajax函数
  
• Promise封装一个delay函数
  
• 手写Promise.all
  
• 手写Promise.race
  
• 手写Promise.allSettled
  
• 手写Promise.any
  
• 手写并发控制
  
• 宏任务、微任务原理和执行输出顺序
  
• async、await微任务代码执行输出顺序
  
• Promise链式调用与错误处理代码输出
  
• 闭包代码输出分析
  
• this代码输出分析
  
• 手写reactive函数 实现track 和 trigger，分别使用Object.defineProperty 和 Proxy
  

项目练习



模块十八 学习：Vue3 、Vue Cli4、Vite、组合式API、Vuex、VueRouter

模块十九 完成多个Vue2、Vue3、Typescript、Vite、Tsx、小程序、Uniapp相关项目


模块二十 完成多个React全家桶项目



如何学习

大厂校招和中小厂社招是两个不同的学习模式。 大厂校招极其重视前端基本功。比如CSS核心难点、HTTP、Promise手写、Webpack原理、框架原理和细节、性能优化等。笔试和面试时也会涉及大量手写代码和代码输出的考察。对待项目，大厂反而不需要求职者需要各种所谓的“企业级项目”比如商城、管理系统、Uniapp、小程序等。简而言之，大厂重深度、难度、原理、手写。当然大厂校招一般对学历学校也往往有一定要求。

如果是0基础转行，只想顺利拿到前端offer，学习的重心放在核心知识快速上手，丰富的实战项目上。在原理、性能、封装复用、手写代码上可暂时放下（该部分本身非常难且晦涩学习耗时很长，学完也并无可展示的东西，初级岗位考察的几率也不高，可用待以后工作后慢慢学习）。项目这块相比大厂校招需要投入更多做的更“好看”，技术栈要全面、项目表面上看起来要“商业”。比如可以做Vue商城、Uniapp、小程序、云笔记、原生造轮子等。
2023，前端如此之卷，祝你好运。

一土翁

适合做提纲，查漏补缺[看看你]

丨怕瓦落地丨

查漏补缺

两亩半分地

[捂脸][大笑]

红葡萄绿芭蕉

很全呀

空虚

NB[爱]