2024中高级前端面试题合集，阿里外包前端面试题

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

修改节点

• appendChild

• insertBefore

• removeChild

• replaceChild

06 前端框架

---

---

vue的双向数据绑定原理

• 监听器 Observer ，用来劫持并监听所有属性（转变成setter/getter形式），如果属性发生变化，就通知订阅者

• 订阅器 Dep，用来收集订阅者，对监听器 Observer 和 订阅者 Watcher 进行统一管理

• 订阅者 Watcher，可以收到属性的变化通知并执行相应的方法，从而更新视图

• 解析器 Compile，可以解析每个节点的相关指令，对模板数据和订阅器进行初始化

vue不能检测哪些属性变化

数组

• 使用下标更新数组元素

• 使用赋值方式改变数组长度

• 使用下标增删数组元素

官方应对方法：

• Vue.set( target, key, value )

• vm.items.splice(indexOfItem, 1, newValue)

对象

• 增删元素

官方应对方法：

• Vue.set(target, propertyName, value);

• Vue.delete( target, propertyName/index )

虚拟DOM

查看详情

• 用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象

• diff 算法 — 比较两棵虚拟 DOM 树的差异

• pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树

vue模板解析

查看详情

• 模板变成AST（解析器）

• AST遍历静态节点（优化器）

• 生成渲染函数（代码生成器）

diff算法

• diff算法是比对组件中的节点异同的情况

vue的生命周期

• beforeCreate

• created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

• activated

• deactivated

• erroeCaptured

vuex

查看详情

• state：用于数据的存储，是store中的唯一数据源

• getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算

• mutation：类似函数，改变state数据的唯一途径，且不能用于处理异步事件

• action：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作

• modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护

vue组件通信方式

• props / $emit 适用 父子组件通信

• ref 与 $parent / $children 适用 父子组件通信

• EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

• a t t r s / attrs/ attrs/listeners 适用于 隔代组件通信

• provide / inject 适用于 隔代组件通信

• Vuex 适用于 父子、隔代、兄弟组件通信

watch/computed的区别

• computed是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值

• watch是观察监听的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作

• 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed

• 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch

v-if与v-show的区别

• v-if 是真正的条件渲染，直到条件第一次变为真时，才会开始渲染

• v-show是由display样式决定，不管初始条件是什么都会渲染

• v-if 适用于不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景

vue中的路由模式

history模式

• • HTML5中的两个API：pushState和replaceState，改变url之后页面不会重新刷新，也不会带有#号，页面地址美观，url的改变会触发popState事件，监听该事件也可以实现根据不同的url渲染对应的页面内容

• 但是因为没有#会导致用户在刷新页面的时候，还会发送请求到服务端，为避免这种情况，需要每次url改变的时候，都将所有的路由重新定位到跟路由下

hash模式

• • url hash: http 😕/foo.com/#help

• #后面hash值的改变，并不会重新加载页面，同时hash值的变化会触发hashchange事件，该事件可以监听，可根据不同的哈希值渲染不同的页面内容

vue 3.0中proxy数据双向绑定

• Proxy 可以直接监听对象而非属性；

• Proxy 可以直接监听数组的变化；

• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

• Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

07 浏览器渲染

---

---

输入网址到现实的过程

1. 重定向

2. 查看缓存

3. DNS解析，获取IP地址

4. TCP连接建立

5. 发送报文请求

6. 响应报文数据

7. 浏览器解析数据

8. 渲染

补充：这里值得注意的是，很多同学都会忽略重定向这个过程，其实重定向是一个很重要的部分。我们尝试使用webpagetest工具测试一下百度的网址。

第一次是输入 https://baidu.com后测试的效果

第二次是输入https://www.baidu.com后测试的效果，可见两次请求相差1.8s左右，这是一个很慢的过程。

节流与防抖

节流

比如公交车站等车，每经过30分钟就会发车，不管后面还有没有人都会发车。这就是节流的过程。

防抖

以最后一个乘客为准，再等30分钟，如果30分钟内都没有人上车，就会发车。如果在期间有人上车，那么重新等30分钟。这就是防抖的过程。

浏览器缓存

查看详情

缓存位置

• Service Worker

• Menory Cache

• Disk Cache

• Push Cache

缓存策略

• 强缓存

Expires:Wed, 22 Oct 2018 08:41:00 GMT

Cache-control:Cache-control: max-age=30

• 协商缓存

Last-Modified

If-Modified-Since

ETag

If-None-Match

BOM对象模型

• screen

• window

• navigator

• location

• document

• history

Location对象属性

• hash 设置或返回从#开始的URL

• host 设置或返回主机名和当前URL的端口号

• hostname 设置或返回当前URL的主机名

• href 设置或返回完整的URL

• pathname 设置或返回当前URL的路径部分

• port 设置或返回当前URL的端口号

• search 设置或返回从?开始的URL(查询部分)

跨域相关问题

查看详情

• JSONP

• CORS

• document.domain

• postMessage

• nginx

• window.name

cookie与session

• cookie保存在客户端（浏览器）；session保存在服务端（redis）

• Session是由应用服务器维持的一个服务器端的存储空间，用户在连接服务器时，会由服务器生成一个唯一的SessionID,用该SessionID 为标识符来存取服务器端的Session存储空间

例子：

当客户端第一次请求登录服务器的时候，服务器随机下发一个字符串sessionId给浏览器，以cookie的形式保存在客户端。当下次登录的时候会带上这个cookie，从而识别你是谁。

cookie的优点：

1.极高的扩展性和可用性

2.通过良好的编程，控制保存在cookie中的session对象的大小。

3.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

4.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

5.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

cookie的缺点：

1.cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

浏览器存储

| 特性 | cookie | localStorage | sessionStorage | indexDB |

| :-: | :-: | :-: | :-: | :-: |

| 数据生命周期 | 一般由服务器生成，可以设置过期时间 | 除非被清理，否则一直存在 | 页面关闭就清理 | 除非被清理，否则一直存在 |

| 数据存储大小 | 4K | 5M | 5M | 无限 |

| 与服务端通信 | 每次都会携带在 header 中，对于请求性能影响 | 不参与 | 不参与 | 不参与 |

08 计算机网络

---

---

TCP/UDP协议

查看详情

TCP是一种面向来连接的、可靠的、基于字节流的传输层通信协议。在计算机网络的OSI模型中，它完成第四层传输层所指定的功能。

• 面向连接

• 仅支持单播传输

• 面向字节流

• 可靠传输

• 提供全双工通信

UDP是一种简单的面向数据报、面向无连接、不可靠的通信协议，位于OSI模型的传输层。在网络中它与TCP协议一样用于处理数据包，是一种无连接的协议。

• 面向无连接

• 不可靠传输

• 提供单播、多播和广播

• 面向报文

TCP如何保证数据传输

查看详情

• 检验和

• 序列号/确认应答

• 超时重传

• 最大消息长度

• 滑动窗口控制

• 拥塞控制

GET/POST的本质区别

查看详情

GET/POST的最大区别是GET请求有幂等性，但是POST请求没有。什么是幂等性呢？我们知道使用GET方法请求同样的接口，返回来的数据是不会改变的，但是对于POST请求，实现一些增删改查的操作的时候可能会发生重复提交的问题。

也就是说我们如果使用GET请求做增删改查的时候，遇到网络不好可能会多次操作，造成数据库的混乱，这是一个很严重的问题，但是使用POST就不会有这种情况。

http与https的区别

查看详情

https握手

• 首先客户端发起请求到服务端，服务端处理后发送一个公钥给客户端

• 客户端进行验证公钥，看公钥是否有效和是否过期

• 客户端验证通过会产生随机值key，然后用公钥进行加密回传给服务端

• 服务端用私钥解密后获得客户端的随机值key

• 利用随机值key加密数据后传输给客户端

• 客户端利用key值进行解密数据

• 客户端获取真正的数据

CDN的优化原理

CDN的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。

CDN的工作原理就是将您源站的资源缓存到位于全球各地的CDN节点上，用户请求资源时，就近返回节点上缓存的资源，而不需要每个用户的请求都回您的源站获取，避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验

HTTP 2.0 的新特性

查看详情

• 二进制分帧

• 多路复用

• 首部压缩

• 流量控制

• 请求优先级

• 服务器推送

常见HTTP首部

通用首部

• Cache-Control: 控制缓存的行为

• Connection：逐跳首部，连接的管理

• Date：创建报文的日期时间

• Pragma：报文指令

• Trailer：报文末端的首部一览

• Transfer-Encoding：指定报文主体的传输编码方式

• Upgrade：升级为其他协议

请求首部

• Accept: 用户代理可处理的媒体类型

• Accept-Charset: 优先的字符集

• Accept-Encoding: 优先的内容编码

• Accept-Language: 优先的语言

• Authorization: web 认证信息

• From: 用户的电子邮箱地址

• Host: 请求资源所在服务器

• if-Match: 比较实体标记

• if-Modified-Since: 比较资源的更新时间

• if-None-Match: 比较实体标记（与if-Match相反）

• if-Range: 资源为更新时发送实体Byte的范围请求

• if-Unmodified-Since: 比较资源的更新时间

• Referer: 对请求中的 Url 的原始获取方法

• User-Agent: HTTP 客户端程序的信息

响应首部

• Accept-Ranges: 是否接受字节范围请求

• Age: 推算资源创建经过时间

• ETag: 资源的匹配信息

• Location: 令客户端重定向至指定的URL

• Proxy-Authenticate: 代理服务器对客户端的认证信息

• Rety-After: 对再次发起请求的时机要求

• Server: HTTP服务器的安装信息

• Vary: 代理服务器缓存的管理信息

• WWW-Authenticate: 服务器对客户端的认证信息

Web安全

查看详情

• 浏览器安全

• 跨站脚本攻击(XSS)

• 跨站请求伪造(CSRF)

• 点击劫持(ClickJacking)

扫码登录实现原理

查看详情

二维码与网页服务器

当我们打开微信的网页版的时候，查看控制台发现发送了一个请求登录的请求，然后网页服务器就随机产生了一个uuid返回给浏览器，而且这个uuid是和二维码绑定在一起的。服务器会把uuid作为key存进redis缓存服务器里面，类似 uuid：xxxx 的形式。

二维码与手机服务器

手机进行扫描二维码，然后手机携带uuid和用户信息向手机的服务器发送请求，手机服务器收到之后携带uuid去redis服务器查询用户，并把uuid与用户信息绑定在一起。查询用户成功之后返回一个Token给网页服务器，通过解析这个Token可以拿出用户的信息，然后浏览器就成功登录微信了。

前后端鉴权

查看详情

前后之间进行数据交互，当然后端要判断你是否是真正的操作者，只有符合条件的用户才可以操作。也就是说必须要有一个身份证明你是一个好人。通常会有四种方式：

• HTTP Basic Authentication

• session-cookie机制

• Token验证

• OAuth开放授权

单点登录的实现

查看详情

• 实现一个认证中心，登录并保存用户信息

• 访问A系统先定向到认证中心

• 访问B系统先定向到认证中心

• 则A/B系统就可以间接打通

HTTP请求方法

• head（获取报文首部）

• put（传输文件）

• delete（删除文件）

• options（询问支持方法）

• trace（追踪路径）

• connect（要求用隧道协议连接代理）

ajax/axios/fetch区别

ajax

• 不符合现在前端MVVM的浪潮

• 基于原生的XHR开发，XHR本身的架构不清晰

• jQuery整个项目太大，单纯使用ajax却要引入整个jQuery

axios

• 从 node.js 创建 http 请求

• 支持 Promise API

• 客户端支持防止CSRF

• 提供了一些并发请求的接口

fetch

• 更加底层，提供的API丰富（request, response）

• 脱离了XHR，是ES规范里新的实现方式

• fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

• fetch默认不会带cookie，需要添加配置项

• fetch没有办法原生监测请求的进度，而XHR可以

webSocket通信原理

• 客户端会先发送一个HTTP请求，包含一个Upgrade请求头来告诉服务端要升级为WebSocket协议

• 服务器就会返回101状态码并切换为WebSocket协议建立全双工连接，后续信息将会通过这个协议进行传输

有几个头信息需要注意一下：

Sec-WebSocket-Key：客户端随机生成的一个base64编码

Sec-WebSocket-Accept：服务端经过算法处理后回传给客户端

Connection和Upgrade字段告诉服务器，客户端发起的是WebSocket协议请求

09 手写代码

---

---

由于手写代码部分需要的篇幅比较多，我就简单列举出来需要熟悉哪一些手写的知识点，大家可以自行谷歌。

• bind/call/apply

• class与原形链实现继承

• promise的简单版

• 深拷贝实现

• 节流与防抖函数

• 函数柯里化

• new的原理实现

• 常用算法排序（快排）

• 常见设计模式

• 实现水平垂直居中

重要的是多刷题，可以看剑指offer，leetcode！

10 Webpack

---

---

webpack参考深入浅出webpack的书本内容，里面介绍非常到位，大家可以一看。

webpack作用

• 代码转换

• 文件优化

• 代码分割

• 模块合并

• 自动刷新

• 代码校验

• 自动发布

打包原理

（1）初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

（2）开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，通过执行对象的 run 方法开始执行编译；

（3）确定入口：根据配置中的 entry 找出所有入口文件；

（4）编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

（5）完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容及它们之间的依赖关系；

（6）输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再将每个 Chunk 转换成一个单独的文件加入输出列表中，这是可以修改输出内容的最后机会；

（7）输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，将文件的内容写入文件系统中；

loader与plugin的区别

loader，它是一个转换器，文件内容进行翻译，，比如将es6转换为es5，单纯的文件转换过程

plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后。webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，并且执行相对应的任务

HappyPack的原理

webpack中最耗时的就是loader的转换过程，转换的流程很长。happypack的原理就是把这部分的任务拆解成多个子进程去并行处理，减少构建时间。

通过new HappyPack()实例化，然后把任务交由实例统一调度分配。核心调度器会将一个个任务分配给空闲的子进程。处理完毕后发送给核心调度器。

如何优化webpack配置

缩小文件查找范围

• 优化loader

• 优化resolve.modules

• 优化resolve.mainFields

• 优化resolve.alias

• 优化resolve.extensions

• 优化module.noPaese

使用DllPlugin

• 基础模块抽离，打包到动态链接库

• 需要使用模块，直接去动态链接库查找

使用HappyPack

• 单线程变多进程

使用ParallelUglifyPlugin

• 开启多进程压缩代码，并行执行

使用CDN加速

• 静态资源放到CDN服务器上面

Tree Shaking

• 剔除无用的代码

提取公共代码

• 防止相同资源重复加载

• 减少网络流量及服务器成本

使用prepack

• 编译代码时提前计算结果放到编译后的结果中，而不是在代码运行才求值

11 Node

---

---

Node的特点

查看详情

• 异步IO

• 事件驱动

• 单线程

• 跨平台

V8垃圾回收机制

查看详情

• 新生代：Scavenge算法

• 老生代：Mark-Sweep算法、Mark-Compact算法、Incremental Marking算法

PM2进程守候

• 内建负载均衡（使用 Node cluster 集群模块）

• 后台运行

• 0 秒停机重载，我理解大概意思是维护升级的时候不需要停机.

• 具有 Ubuntu 和 CentOS 的启动脚本

• 停止不稳定的进程（避免无限循环）

• 控制台检测

• 提供 HTTP API

• 远程控制和实时的接口 API ( Nodejs 模块,允许和 PM2 进程管理器交互 )

Buffer对象

查看详情

• Buffer是一个像Array的对象，它的元素都是16进制的两位数。是一个典型的JavaScript与C++结合的模块，设计性能的相关部分采用了C++实现，而非性能部分采用了JavaScript实现。Buffer对象可以用来操作二进制数据流。

• Buffer对象的内存分配不是在V8的堆内存中的，而是由Node的C++层面实现的内存申请的

分配机制

小对象

slab 内存分配机制**。它是一种动态内存管理机制，采用的是预先申请，事后分配的方式，简单来说它就是一块申请好的固定大小的内存区域。有如下3种状态：

• full：完全分配

• partial：部分分配

• empty：没有被分配

大对象

如果这个对象是超过了 slab 的大小，那么就不会占用slab块，直接使用C++层面分配你所需要的大小，这块空间就会被你一直占有

12 ES6

---

---

promise

查看详情

在阮一峰老师的ES6入门标准中说到，所谓promise就是一个容器，里面保存着某个未来才会结束的事件（通常是是一个异步事件）。它有两个特点：

• 状态不受外界影响：拥有三种状态（Pending、Fullfilled、Rejected）。状态只取决于异步执行结果，其他过程无法改变这个状态。

• 状态改变不会再变：初始状态为Pending状态，它只可以变成Fullfill或者变成Rejected，但是一旦发生改变就不会再变。

promise可以使得异步操作的写法像同步写法一样优雅，代码可读性更高。但是缺点就是中途无法取消promise，一旦新建就会执行，假如没有设置回调函数，Promise内部如果出现错误不会反应到外部。

实例方法

• then()/catch()

• all()/race()

• resolve()/reject()

• done()/finally()

proxy

查看详情

Proxy可以理解为，当你试图访问一个对象的时候必须先经过一个拦截或者代理，你才可以进行对对象的操作。这种机制的好处就是可以对外界的访问进行过滤和改写。

• get(target, propKey, receiver) 拦截对象属性读取

• set(target, propKey, value, receiver) 拦截对象的属性设置

• has(target, propKey) 拦截propkey in proxy

• deleteProperty(target, propKey) 拦截delete proxy[propKey]

• ownKeys(target)

• getOwnPropertyDescriptor(target, propKey) 返回对象属性的描述对象拦截

• defineProperty(target, propKey, propDesc)

• proventExtensions(target)

• getPrototypeOf(target)

• isExtensible(target)

• setPrototypeOf(target, proto)

• apply(target, object, args)

• construct(target, args) 拦截 proxy 实例作为构造函数调用的操作

• revocable(target, handler) 方法返回 一个可取消 Proxy实例

ES6的新特性

查看详情

ES6新增了很多新特性，这里不可能每一个都详细讲述，面试中我遇到的有以下几个，你把它们都讲述清楚就可以过关了。

• let、var、const区别

• 箭头函数

• 解构赋值

• 模板字符串

• Set、Map数据结构

• Promise对象

• Proxy

class继承

class Parent {

constructor(value) {

this.val = value

}

getValue() {

console.log(this.val)

}

}

class Child extends Parent {

constructor(value) {

super(value)

this.val = value

}

}

let child = new Child(1)

child.getValue() // 1

child instanceof Parent // true

13 推荐书籍

---

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

tensions(target)

• getPrototypeOf(target)

• isExtensible(target)

• setPrototypeOf(target, proto)

• apply(target, object, args)

• construct(target, args) 拦截 proxy 实例作为构造函数调用的操作

• revocable(target, handler) 方法返回 一个可取消 Proxy实例

ES6的新特性

查看详情

ES6新增了很多新特性，这里不可能每一个都详细讲述，面试中我遇到的有以下几个，你把它们都讲述清楚就可以过关了。

• let、var、const区别

• 箭头函数

• 解构赋值

• 模板字符串

• Set、Map数据结构

• Promise对象

• Proxy

class继承

class Parent {

constructor(value) {

this.val = value

}

getValue() {

console.log(this.val)

}

}

class Child extends Parent {

constructor(value) {

super(value)

this.val = value

}

}

let child = new Child(1)

child.getValue() // 1

child instanceof Parent // true

13 推荐书籍

---

最后：

总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。

面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。

[外链图片转存中…(img-ripxFfBC-1713628457070)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-mMY4h8t9-1713628457071)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！