2024前端面试八股文-面经（最全、最详细、最实用、有这一篇就够了）——计算机网络前端八股文面经篇。
一、计算机网络相关
计算机网络分层：
- OSI七层：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
- TCP/IP四层：网络接口层、网络层(IP/ICMP)、传输层(TCP/UDP)、应用层(HTTP/FTP/WWW/DNS)
NDS工作原理和主要解析过程：
工作原理：
查询递归：当用户在浏览器中输入一个域名时，操作系统首先会向本地DNS解析器发出查询请求。如果本地解析器没有缓存该域名对应的IP地址，则会进行递归查询。
DNS递归解析：本地DNS解析器向根域名服务器发送查询请求，根域名服务器返回顶级域名服务器的地址。
顶级域名解析：本地解析器向顶级域名服务器发送查询请求，顶级域名服务器返回该域名的权威域名服务器的地址。
权威域名解析：本地解析器向权威域名服务器发送查询请求，权威域名服务器返回该域名对应的IP地址。
结果返回：本地解析器将获取到的IP地址返回给操作系统，操作系统将其缓存，并将IP地址返回给浏览器，使浏览器可以与目标服务器建立连接。
解析过程：
dns 解析：访问一个网站时，浏览器获得一个域名，通过 dns 服务将域名解析为 ip 地址。
tcp 连接：向 Web 服务器发起 tcp 连接请求。
发送 http 请求：浏览器向 Web 服务器发起http 请求，http 协议建立在 tcp 协议上的应用层协议，其本质是在建立起的 tcp连接中，按照 http 协议标准发送一个索要网页的请求。
处理请求并返回：服务器获取到客户端的 http 请求后，会根据请求中的内容来决定如何获取相应的文件，并将文件发送给浏览器。
浏览器渲染：浏览器根据响应开始显示页面，首先解析 html 文件构建 DOM 树，然后解析 CSS 文件构建渲染树，等渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
断开连接：客户端和服务器断开连接。
用户输入网址到显示对应页面的全过程：
浏览器缓存 -> DNS 域名解析 -> URL 编码 -> 使用 HTTP 或者使用 HTTPS 协议发送请求
1 浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；
2 服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；
3 浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建立相应的内部数据结构 （如 HTML 的 DOM）；
4 载⼊解析到的资源⽂件，渲染页面，完成。
用户输入阶段
合成 URL：浏览区会判断用户输入是合法 URL，比如用户输入的是搜索的关键词，默认的搜索引擎会合成新的，如果符合url规则会根据url协议，在这段内容加上协议合成合法的url
查找缓存
网络进程获取到 URL，先去本地缓存中查找是否有缓存资源，如果有则拦截请求，直接将缓存资源返回给浏览器进程；否则，进入网络请请求阶段；
DNS 解析：
DNS 查找数据缓存服务中是否缓存过当前域名信息，有则直接返回；否则，会进行 DNS 解析返回域名对应的 IP 和端口号，如果没有指定端口号，http 默认 80 端口，https 默认 443。如果是 https 请求，还需要建立 TLS 连接；
建立 TCP 连接：
TCP 三次握手与服务器建立连接，然后进行数据的传输；（三次握手开喷）发送 HTTP 请求：
浏览器首先会向服务器发送请求行，它包含了请求方法、请求 URI 和 HTTP 协议的版本；另外还会发送请求头，告诉服务器一些浏览器的相关信息，比如浏览器内核，请求域名；服务器处理请求：
服务器首先返回响应行，包括协议版本和状态码，比如状态码 200 表示继续处理该请求；如果是 301，则表示重定向，服务器也会向浏览器发送响应头，包含了一些信息；页面渲染:
查看响应头的信息，做不同的处理，比如重定向，存储cookie 看看content-type的值，根据不同的资源类型来用不同的解析方式
HTTP方法
GET(读取数据具体信息，检索数据、有缓存，不安全，请求长度有限制)
HEAD(获取报头，与GET相同，但没有响应体，仅传输状态行和标题)
POST(向指定资源提交数据，数据被包含在请求体里、无缓存，数据长度无限制) eg.提交表单、上传文件
PUT(替换指定资源，没有就新增)
DELETE(请求服务器删除URL标识的数据)
CONNECT(服务器作为代理，代替用户访问)
OPTIONS(得到指定资源的HTTP请求方法)
PATCH(对已知资源进行局部更新)
TRACE(服务器返回自己收到的数据，用于测试和诊断)
GET与POST区别：
- GET提交的数据放在URL中，POST则不会。这是最显而易见的差别。这点意味着GET更不安全（POST也不安全，因为HTTP是明文传输抓包就能获取数据内容，要想安全还得加密）
- GET回退浏览器无害，POST会再次提交请求（GET方法回退后浏览器再缓存中拿结果，POST每次都会创建新资源）
- GET提交的数据大小有限制（是因为浏览器对URL的长度有限制，GET本身没有限制），POST没有
- GET可以被保存为书签，POST不可以。
- GET能被缓存，POST不能
- GET只允许ASCII字符，POST没有限制
- GET会保存再浏览器历史记录中，POST不会。
HTTP与HTTPS区别：
http 使用过程中存在安全性问题
使用明文通信，内容可能会被窃听
不验证通信方的身份，通信方的身份有可能遭遇伪装
无法证明报文的完整性，报文有可能遭篡改
https通过 ssl安全套接层 或tls安全传输层协议 的方式使 http 变成了安全的 https
https会数据加密，数字证书认证，通过 ssl/tls 报文摘要功能检验报文完整性
加密方式：
对称加密：加密和解密使用同一密钥
非对称加密：公钥加密，私钥解密
四次挥手： 确认双方得知，双方都没有要传输的数据
第一次挥手：客户端向服务端请求关闭连接
第二次挥手：服务端收到客户端的请求，并且告知客户端等我处理完毕数据
第三次挥手：服务端处理完毕数据，告知客户端，服务端数据处理完毕
第四次挥手：客户端得知服务端数据处理完毕，双方数据都处理完毕，可断开连接
三次握手： 确认客户端和服务端都可以正常发送接收数据
第一次握手：确认客户端可以正常发送数据
第二次握手：确认客户端可以正常发送数据，确认服务端可以正常接收数据
第三次握手：确认客户端可以正常发送+接收数据，确认服务端可以正常接收+发送数据
如何解决IPV4地址不够：
- IPv6协议：IPv6（Internet Protocol version 6）采用128位的地址空间，相比IPv4的32位地址空间大大增加了地址数量。
- 子网划分和地址分配策略：通过合理划分子网，并采用有效的地址分配策略，可以更有效地利用现有的IPv4地址。例如，使用CIDR（无类型域间选路）可以实现更精细的地址划分和分配。
Dos攻击和DDOS攻击：
DoS 攻击：通常由单个攻击者发起，通过向目标系统发送大量请求或特制的恶意数据包，使目标系统的资源耗尽，从而导致正常用户无法访问目标系统。常见的 DoS 攻击类型包括 SYN Flood、ICMP Flood、UDP Flood 等。
DoS 攻击的缺点是攻击者的IP 地址容易被识别，从而受到追踪和制裁。
DDoS 攻击：是 DoS 攻击的一种升级形式，它利用多个受控制的计算机（僵尸网络）同时发起攻击，使攻击更难以防御和追踪。DDoS 攻击可以同时从多个方向消耗目标系统的资源，导致目标系统瘫痪。由于涉及的攻击来源众多，DDoS 攻击的防御难度要大于DoS 攻击。
防御 DoS 和 DDoS 攻击的方法包括：
1.限制单个 IP地址的请求速率。
2.使用防火墙、入侵检测系统（IDS）和入侵预防系统（IPS） 等安全设备。
3.采用负载均衡技术分散请求压力。
4.与互联网服务提供商（ISP）合作，进行流量清洗和封锁恶意IP 地址。
跨域的解决办法： 同源策略—域名、协议、端口三个都相同
作用：
无法用js读取非同源的Cookie、LocalStorage 和 IndexDB
这个主要是为了防止恶意网站通过js获取用户其他网站的cookie等用户信息。
无法用js获取非同源的DOM
防止恶意网站通过iframe获取页面dom，从而窃取页面的信息。
jsonp：jsonp能实现跨域是利用了img、script和link标签自身的跨域能力。
常用的请求状态码：
500 内部服务器错误
Internal Server Error 500内部服务器错误，服务器遇到未知无法解决的问题。
404 请求错误——请求不存在的资源
Not Found 404 错误请求，因发送的请求语法错误,服务器无法正常读取。
403 禁止访问
Forbidden 403 禁止访问，客户端没有权利访问所请求内容,服务器拒绝本次请求。
200 请求成功
200 OK 请求成功，表示已经请求成功，默认情况下的状态码为200的响应就可以被缓存了。
301 永久重定向
Moved Permanently 301 永久移动，该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的Location:头字段里找到。
302 临时重定向
Found 302临时移动，该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的Location:头字段里找到。
二、浏览器相关
XSS攻击原理：
**
XSS(Cross-Site Scripting，跨站脚本攻击)**是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取**cookie，**session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。XSS避免方式：
url参数使用encodeURIComponent方法转义- 尽量不是有
InnerHtml插入HTML内容 - 使用特殊符号、标签转义符。
CSRF攻击（跨站请求伪造）：
CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。CSRF避免方式：添加验证码
使用token
- 服务端给用户生成一个token，加密后传递给用户
- 用户在提交请求时，需要携带这个token
- 服务端验证token是否正确
SQL注入攻击：
就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。
解决：表单输入时通过正则表达式将一些特殊字符进行转换
DDoS攻击：
DDoS又叫分布式拒绝服务，全称Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。解决：
- 限制单IP请求频率。
- 防火墙等防护设置禁止
ICMP包等 - 检查特权端口的开放
Token相关内容：
- 使用时的流程：
客户端使用用户名跟密码请求登录
服务端收到请求，去验证用户名与密码
验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端
客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据
- Token 是访问接口（API）时所需要的资源凭证。用来唯一识别一个客户端。
Cookie相关内容：
- Cookie：存在客户端，用来解决客户端如何保存信息的问题
- 使用流程
- 在首次访问网站时，浏览器发送请求中并未携带Cookie。
- 浏览器看到请求中未携带Cookie，在HTTP的响应头中加入
Set-Cookie。 - 浏览器收到
Set-Cookie后，会将Cookie保存下来 - 下次再访问该网站时，HTTP请求头就会携带Cookie。
Cookie作用：
会话管理：登陆、购物车、游戏得分或者服务器应该记住的其他内容
个性化：用户偏好、主题或者其他设置
追踪：记录和分析用户行为
Session相关内容：
session 是另一种记录服务器和客户端会话状态的机制
session 是基于 cookie 实现的，session 存储在服务器端，sessionId 会被存储到客户端的cookie 中
session 认证流程：
- 用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建对应的 Session
- 请求返回时将此 Session 的唯一标识 SessionID 返回给浏览器
- 浏览器接收到服务器返回的 SessionID 后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名
- 当用户第二次访问服务器的时候，请求会自动把此域名下的 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。
Cookie和Session的区别：
- 安全性： Session 比 Cookie 安全，Session 是存储在服务器端的，Cookie 是存储在客户端的。
- 存取值的类型不同：Cookie 只支持存字符串数据，Session 可以存任意数据类型。
- 有效期不同： Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭（默认情况下）或者 Session 超时都会失效。
- 存储大小不同： 单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie，但是当访问量过多，会占用过多的服务器资源。
Token和Session的区别：
- Session 是一种记录服务器和客户端会话状态的机制，使服务端有状态化，可以记录会话信息。而 Token 是令牌，访问资源接口（API）时所需要的资源凭证。Token 使服务端无状态化，不会存储会话信息。
- Session 和 Token 并不矛盾，作为身份认证 Token 安全性比 Session 好，因为每一个请求都有签名还能防止监听以及重复攻击，而 Session 就必须依赖链路层来保障通讯安全了。如果你需要实现有状态的会话，仍然可以增加 Session 来在服务器端保存一些状态。
- 如果你的用户数据可能需要和第三方共享，或者允许第三方调用 API 接口，用 Token 。如果永远只是自己的网站，自己的 App，用什么就无所谓了。
TCP UDP 区别：
浏览器缓存的作用：
浏览器缓存的作用：减少冗余的数据传输，节省网络带宽，更快加载页面，缓存降低了服务器的要求，有更快的响应
缓存的资源去哪里了：
memory cache 将资源文件缓存到内存中，下次请求读取的是内存中的
disk cache 将资源存到硬盘中，下次请求从硬盘中读取
浏览器的本地存储以及各自优劣：
浏览器的本地存储主要分为
Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。共同点: 都是保存在浏览器端、且同源的
不同点：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。- 存储大小限制也不同，
cookie数据不能超过4K，sessionStorage和localStorage可以达到5MsessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
- 作用域不同
sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在
一次完整的HTTP事务是怎样的过程？
过程： 建立连接 — 发送请求 —服务器处理请求 — 发送响应— 传输数据— 接收响应 — 关闭连接
建立连接（Connection Establishment）：- 客户端（例如浏览器）向服务器发起连接请求。
- 如果是 HTTP/1.1，可以使用持久连接来减少连接建立的开销。
发送请求（Request）：
- 客户端向服务器发送 HTTP 请求，包括请求方法（GET、POST 等）、URL、HTTP 版本、请求头部等信息。
- 对于 POST 请求，可能还包括请求体，即要传输的数据。
服务器处理请求（Server Handles Request）：
- 服务器接收到请求后，根据请求的内容进行处理。
- 服务器可能需要查询数据库、读取文件或执行其他操作来生成响应。
发送响应（Response）：
- 服务器生成 HTTP 响应，包括状态码、响应头部和响应体。
- 响应头部包含了服务器类型、内容类型、内容长度等信息。
- 响应体包含了实际的数据内容，比如 HTML 页面、JSON 数据等。
传输数据（Data Transfer）：
- 服务器将响应数据分割成数据包，并通过网络传输给客户端。
- 数据包在传输过程中可能经过多个网络节点，最终到达客户端。
接收响应（Response Reception）：
- 客户端接收到服务器发送的响应数据。
- 客户端解析响应，处理其中的状态码和内容。
关闭连接（Connection Closure）：
- 在 HTTP/1.0 中，连接通常在请求-响应之后关闭。
- 在 HTTP/1.1 中，可以选择保持持久连接，以便在同一连接上发送多个请求和响应。
