【2024前端复盘复习计划】Vue篇

【2024前端复盘复习计划】打包优化篇

【2024前端复盘复习计划】Js篇

一、请求状态码

成功2xx：

• 201:请求成功,服务器已经创建了新的资源
• 204:请求成功,响应中没有要发送给客户端的实体内容

重定向3xx:

• 301：资源已经被永久转移，需要重新定位到新的资源
• 302 ：资源临时被移动到了另一个位置，需要使用 GET 请求，重新定位到新的资源。
• 304 ：资源没有发生变化，客户端可以使用缓存的资源
• 307 ：资源临时被移动到了另一个位置，需要保持原有请求类型，重新定位到新的资源

客户端错误状态码4xx:

• 400 ：请求无效或不可理解，服务器无法处理该请求
• 401：请求需要身份验证，但客户端没有提供有效的身份验证凭据。
• 403 ：服务器拒绝了客户端的请求
• 404 ：请求的资源不存在

二、websocket状态码

状态	解释
CONNECTING	连接未建立
OPEN	连接已建立可以进行通信
CLOSING	连接正在管理
CLOSED	连接已关闭或无法建立连接

错误码

1000	正常关闭
1002	协议错误关闭
1008	收到数据违反策略，服务器关闭连接

三、预检测请求

OPTIONS 请求是一个跨域请求，用来校验当前跨域请求能否被理解

触发条件三个满足一个：

1. 请求方式不为:HEAD、GET、POST
2. Content-Type 不为：application/x-www-form-urlencoded、multipart/form-data、text/plain
3. 不能自定义 header 字段

不是每一次都会生成预检测

因为浏览器会对预检请求进行缓存，同时通过服务器端设置 Access-Control-Max-Age 字段来设置缓存时间，那么当第一次请求该 URL 时会发出 OPTIONS 请求，浏览器会根据返回的 Access-Control-Max-Age 字段缓存该请求的 OPTIONS 预检请求的响应结果，在缓存有效期内，该资源的请求（URL 和 header 字段都相同的情况下）不会再触发预检。

四、TCP 和 UDP 的应用场景

• TCP 适用于对数据可靠性要求较高、顺序要求严格、需要建立连接和双向通信的场景，如网页浏览、文件传输、电子邮件等。
• UDP 适用于实时性要求较高、对数据可靠性要求较低、数据量小、无需建立连接的场景，如音视频流媒体传输、实时游戏、DNS 查询等

五、http 为什么不安全

1. 无加密传输：HTTP数据传输是明文的，导致数据容易被窃取和篡改。攻击者可以截获HTTP请求和响应，获取敏感信息。
2. 无身份验证：HTTP本身没有内置的身份验证机制，因此无法验证客户端和服务器之间的身份。这使得恶意用户可以伪装成合法用户，进行欺骗、数据篡改和其他攻击。
3. 会话劫持：HTTP是无状态的协议，每次请求之间没有上下文关联。攻击者可以通过劫持用户的会话标识（如Cookie），冒充用户身份进行恶意操作。

六、XSS

跨站脚本攻击（XSS）是一种常见的安全漏洞，攻击者通过在网页中注入恶意脚本代码，使其在用户浏览器上执行，从而窃取用户信息、篡改网页内容或进行其他恶意操作。

预防

1. 输入验证和过滤：对用户输入的数据进行验证。同时，过滤特殊字符和敏感标签，如
2. 输出转义：在将用户输入的数据输出到网页上时，确保对特殊字符进行转义，使其失去恶意脚本的执行能力。可以使用编码函数或安全的模板引擎来处理输出的数据。
3. Content Security Policy（CSP）：通过设置 CSP 响应头，限制页面能够加载和执行的内容，包括脚本、样式、字体等。可以限制只允许从特定域名加载资源，防止恶意脚本的注入。
4. HTTP Only Cookie：将敏感信息存储在 HTTP Only Cookie 中，防止被 JavaScript 获取到。这样即使存在 XSS 攻击，攻击者无法窃取到用户的敏感信息。
5. 防止内联脚本：尽量避免使用内联脚本，将 JavaScript 代码从 HTML 中分离出来，使用外部脚本文件。
6. 安全的开发实践：采用安全的编码实践，如避免使用 eval() 函数，避免拼接用户输入到动态代码中，使用安全的框架和库等。

七、CSRF

CSRF (Cross-site request forgery) 即跨站请求伪造，是一种常见的网络攻击方式之一。攻击者通过构造恶意请求，让用户在不知情的情况下，执行某些意想不到的操作，如转账、修改密码等。

攻击者往往通过发送伪造请求，模拟用户的行为，诱导用户点击恶意链接或进入恶意网站，从而触发攻击。常见的攻击方式包括通过 HTML 中的 img 标签或 script 标签，或者发送 GET 请求等方式，来伪造请求并达到攻击的目的。

防范：

1. 操作确认：设计敏感操作需要额外的确认
2. 验证码：通过验证码等人机验证手段，防止恶意程序自动化构造请求。
3. 使用CSRF令牌：提交数据时加一个唯一的、难以猜测的令牌，来确保该请求是由合法的用户发起的，而不是恶意攻击者伪造的
4. 使用HTTP-only Cookie：TTP-only Cookie 只允许通过HTTP协议传输，防止通过JavaScript等其他脚本语言进行访问
5. 减少使用get请求

八、HTTP 请求头

• Accept：指定客户端可接受的响应内容类型。
• Accept-Encoding：指定客户端可接受的内容编码方式，常见的有gzip、deflate等。
• Accept-Language：指定客户端可接受的响应内容语言。
• Cache-Control：指定请求/响应是否应该被缓存，如no-cache、max-age等。
• Connection：指定连接的选项，如keep-alive、close等。
• Content-Type：指定请求体中的内容类型，如application/json、text/html等。
• Cookie：包含服务器发送的cookie信息，用于标识客户端。
• Host：指定服务器的域名和端口号。
• If-Modified-Since：用于条件请求，指定客户端上次接收到资源的时间。
• Referer：指定当前页面的来源页面地址。
• User-Agent：指定客户端的类型，如浏览器名称、版本号等。

九、GET 和 POST 的区别

1. 参数传递方式：GET 请求通过 URL 参数传递数据，而 POST 请求则是通过请求体传递数据。
2. 安全性：GET 请求的参数会被包含在 URL 中，因此相对不太安全，容易被恶意攻击者截取、篡改或缓存。而 POST 请求的参数在请求体中，相对更加安全，不容易被截取。
3. 数据传输大小：由于 GET 请求的参数包含在 URL 中，因此对参数的大小和个数有限制，一般不能超过 2KB，而 POST 请求没有这个限制。
4. 缓存机制：由于 GET 请求的参数会被浏览器缓存，因此可以提高数据的访问速度。而 POST 请求则不会被缓存，因此每次请求都需要重新传输数据，访问速度相对较慢。

十.浏览器缓存机制

整体流程：

当浏览器请求资源时候,先会判断本地是否有缓存，没有缓存直接发起新的请求获取资源，有缓存则会判断缓存是否过期，没过期直接使用本地缓存，过期则会进行协商缓存由服务器决定是否使用缓存，若失效就直接请求资源，生效则返回304继续使用缓存

强缓存

不会向服务器发送请求,直接从缓存中读取资源。

响应头的两个字段：

Expires：资源到期具体时间点,需结合Last-modified使用,受限于本地时间。

Cache-Control：

max-age: 缓存的最大有效时间。

no-cache: 强制要求浏览器向服务器发送请求，不使用缓存。

no-store: 禁止只用缓存

public : 客户端和代理服务器都可缓存

private: 只有客户端可以缓存

同时存在的话，Cache-Control优先级高于Expires。

协商缓存

强缓存失效后，浏览器发请求到服务器，服务器根据缓存表示决定是否使用缓存

Last-Modified(资源最后修改时间)：浏览器第一次访问资源的情况下，服务器在响应头添加改字段，值为资源在服务器最后修改时间，当再次请求资源时，请求头会包含If-Modify-Since，值为之前返回的last-Modified，服务器会根据这个值与服务器的资源最新最后修改时间对比，无变化返回304，反之小于最后修改时间，说明文件有更新

缺点：1.只能以秒为单位计时，毫秒单位的操作无法感知。2.本地打开缓存文件，即使没有修改文件还是会造成Last-Modified被修改，服务端无法命中缓存从而发送相同的资源

ETag：浏览器第一次访问资源的情况下,服务端响应头会返回ETag，值为类似hash的唯一标识符，当再次请求时，请求头会包含If-None-Match，值为之前响应头ETag，服务端可根据标识符判断该资源是否为最新,如果一致则内容无变化，反之则返还最新的资源和新的ETag标识符

Etag 优先级高于 Last-Modified

十一.http1.0 和 http2.0 的区别

1. 多路复用：HTTP/1.0 中，浏览器每次只能向服务器发起一个请求。也就是说，在一个连接上只能有一个请求和响应。如果想并行获取多个资源，就必须建立多个连接。而在 HTTP/2.0 中，浏览器可以在同一个连接上并行发起多个请求和响应。这个机制叫做多路复用。
2. 首部压缩：HTTP/1.0 中，每次请求和响应都需要携带一些相同的首部信息，例如 User-Agent 等。这些信息会占用很多带宽，因此 HTTP/2.0 中引入了一种称为“首部压缩”的机制。该机制使用一个首部表来记录已经发送的首部，避免了每次发送相同的首部信息。
3. 服务器推送：HTTP/2.0 支持服务器推送。服务器可以在收到一个客户端请求后，主动推送与该请求相关的资源。这种机制可以有效减少网络延迟，提高性能。
4. 数据格式：HTTP/2.0 使用二进制协议传输数据，而 HTTP/1.0 使用纯文本协议。二进制协议可以更快地解析和处理，因此 HTTP/2.0 更加高效。
5. TLS：HTTP/2.0 要求使用加密协议（TLS）传输数据，而 HTTP/1.0 没有这个要求。这意味着 HTTP/2.0 更加安全，能够防止数据被篡改。

十二.浏览器和 nodejs 事件循环的区别

• 浏览器：当某个宏任务执行完后,会查看是否有微任务队列。如果有，先执行微任务队列中的所有任务，如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。栈空后，再次读取微任务队列里的任务，依次类推
• nodejs：六个阶段,按照顺序反复运行,当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。外部输入数据-->轮询阶段(poll)-->检查阶段(check)-->关闭事件回调阶段(close callback)-->定时器检测阶段(timer)-->I/O事件回调阶段(I/O callbacks)-->闲置阶段(idle, prepare)-->轮询阶段

timer里面存在的是setTimeout与setInterval的回调函数

pending callback是执行操作系统的回调，例如tcp,udp。

idle 和 prepare只在系统内部进行使用。一般开发者用不到

poll执行与IO相关的回调操作

check中存放setImmediate中的回调。

close callbacks执行close事件的回调。