2023前端学习路线终极版(大、全、干)

2

主题

7

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2023-3-30 19:52:34 | 显示全部楼层
这是饥人谷前端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,前端如此之卷,祝你好运。
回复

举报 使用道具

1

主题

7

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2023-3-30 19:52:52 | 显示全部楼层
适合做提纲,查漏补缺[看看你]
回复

举报 使用道具

0

主题

6

帖子

0

积分

新手上路

Rank: 1

积分
0
发表于 2023-3-30 19:53:37 | 显示全部楼层
查漏补缺
回复

举报 使用道具

0

主题

2

帖子

3

积分

新手上路

Rank: 1

积分
3
发表于 2023-3-30 19:54:36 | 显示全部楼层
[捂脸][大笑]
回复

举报 使用道具

2

主题

9

帖子

14

积分

新手上路

Rank: 1

积分
14
发表于 2023-3-30 19:55:30 | 显示全部楼层
很全呀
回复

举报 使用道具

2

主题

5

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2023-3-30 19:56:10 | 显示全部楼层
NB[爱]
回复

举报 使用道具

1

主题

4

帖子

7

积分

新手上路

Rank: 1

积分
7
发表于 7 天前 | 显示全部楼层
围观 围观 沙发在哪里!!!
回复

举报 使用道具

您需要登录后才可以回帖 登录 | 立即注册
快速回复 返回顶部 返回列表