2024前端面试八股文-面经（最全、最详细、最实用、有这一篇就够了）——计算机网络前端八股文面经篇。

一、计算机网络相关

1. 计算机网络分层：1. OSI七层：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层2. TCP/IP四层：网络接口层、网络层(IP/ICMP)、传输层(TCP/UDP)、应用层(HTTP/FTP/WWW/DNS)
2. NDS工作原理和主要解析过程：1. 工作原理：查询递归：当用户在浏览器中输入一个域名时，操作系统首先会向本地DNS解析器发出查询请求。如果本地解析器没有缓存该域名对应的IP地址，则会进行递归查询。DNS递归解析：本地DNS解析器向根域名服务器发送查询请求，根域名服务器返回顶级域名服务器的地址。顶级域名解析：本地解析器向顶级域名服务器发送查询请求，顶级域名服务器返回该域名的权威域名服务器的地址。权威域名解析：本地解析器向权威域名服务器发送查询请求，权威域名服务器返回该域名对应的IP地址。结果返回：本地解析器将获取到的IP地址返回给操作系统，操作系统将其缓存，并将IP地址返回给浏览器，使浏览器可以与目标服务器建立连接。2. 解析过程：dns 解析：访问一个网站时，浏览器获得一个域名，通过 dns 服务将域名解析为 ip 地址。tcp 连接：向 Web 服务器发起 tcp 连接请求。发送 http 请求：浏览器向 Web 服务器发起http 请求，http 协议建立在 tcp 协议上的应用层协议，其本质是在建立起的 tcp连接中，按照 http 协议标准发送一个索要网页的请求。处理请求并返回：服务器获取到客户端的 http 请求后，会根据请求中的内容来决定如何获取相应的文件，并将文件发送给浏览器。浏览器渲染：浏览器根据响应开始显示页面，首先解析 html 文件构建 DOM 树，然后解析 CSS 文件构建渲染树，等渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。断开连接：客户端和服务器断开连接。
3. 用户输入网址到显示对应页面的全过程：浏览器缓存 -> 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的值，根据不同的资源类型来用不同的解析方式
4. HTTP方法1. GET(读取数据具体信息，检索数据、有缓存，不安全，请求长度有限制)HEAD(获取报头，与GET相同，但没有响应体，仅传输状态行和标题)POST(向指定资源提交数据，数据被包含在请求体里、无缓存，数据长度无限制) eg.提交表单、上传文件PUT(替换指定资源，没有就新增)DELETE(请求服务器删除URL标识的数据)CONNECT(服务器作为代理，代替用户访问)OPTIONS(得到指定资源的HTTP请求方法)PATCH(对已知资源进行局部更新)TRACE(服务器返回自己收到的数据，用于测试和诊断)2. GET与POST区别：1. GET提交的数据放在URL中，POST则不会。这是最显而易见的差别。这点意味着GET更不安全（POST也不安全，因为HTTP是明文传输抓包就能获取数据内容，要想安全还得加密）2. GET回退浏览器无害，POST会再次提交请求（GET方法回退后浏览器再缓存中拿结果，POST每次都会创建新资源）3. GET提交的数据大小有限制（是因为浏览器对URL的长度有限制，GET本身没有限制），POST没有4. GET可以被保存为书签，POST不可以。5. GET能被缓存，POST不能6. GET只允许ASCII字符，POST没有限制7. GET会保存再浏览器历史记录中，POST不会。
5. HTTP与HTTPS区别：****http 使用过程中存在安全性问题使用明文通信，内容可能会被窃听不验证通信方的身份，通信方的身份有可能遭遇伪装无法证明报文的完整性，报文有可能遭篡改https通过 ssl安全套接层 或tls安全传输层协议 的方式使 http 变成了安全的 httpshttps会数据加密，数字证书认证，通过 ssl/tls 报文摘要功能检验报文完整性加密方式：对称加密：加密和解密使用同一密钥非对称加密：公钥加密，私钥解密
6. 四次挥手： 确认双方得知，双方都没有要传输的数据第一次挥手：客户端向服务端请求关闭连接第二次挥手：服务端收到客户端的请求，并且告知客户端等我处理完毕数据第三次挥手：服务端处理完毕数据，告知客户端，服务端数据处理完毕第四次挥手：客户端得知服务端数据处理完毕，双方数据都处理完毕，可断开连接
7. 三次握手： 确认客户端和服务端都可以正常发送接收数据第一次握手：确认客户端可以正常发送数据第二次握手：确认客户端可以正常发送数据，确认服务端可以正常接收数据第三次握手：确认客户端可以正常发送+接收数据，确认服务端可以正常接收+发送数据
8. 如何解决IPV4地址不够：1. IPv6协议：IPv6（Internet Protocol version 6）采用128位的地址空间，相比IPv4的32位地址空间大大增加了地址数量。2. 子网划分和地址分配策略：通过合理划分子网，并采用有效的地址分配策略，可以更有效地利用现有的IPv4地址。例如，使用CIDR（无类型域间选路）可以实现更精细的地址划分和分配。
9. Dos攻击和DDOS攻击：1. DoS 攻击：通常由单个攻击者发起，通过向目标系统发送大量请求或特制的恶意数据包，使目标系统的资源耗尽，从而导致正常用户无法访问目标系统。常见的 DoS 攻击类型包括 SYN Flood、ICMP Flood、UDP Flood 等。DoS 攻击的缺点是攻击者的IP 地址容易被识别，从而受到追踪和制裁。2. DDoS 攻击：是 DoS 攻击的一种升级形式，它利用多个受控制的计算机（僵尸网络）同时发起攻击，使攻击更难以防御和追踪。DDoS 攻击可以同时从多个方向消耗目标系统的资源，导致目标系统瘫痪。由于涉及的攻击来源众多，DDoS 攻击的防御难度要大于DoS 攻击。防御 DoS 和 DDoS 攻击的方法包括：1.限制单个 IP地址的请求速率。2.使用防火墙、入侵检测系统（IDS）和入侵预防系统（IPS） 等安全设备。3.采用负载均衡技术分散请求压力。4.与互联网服务提供商（ISP）合作，进行流量清洗和封锁恶意IP 地址。
10. 跨域的解决办法： 同源策略—域名、协议、端口三个都相同作用：1. 无法用js读取非同源的Cookie、LocalStorage 和 IndexDB这个主要是为了防止恶意网站通过js获取用户其他网站的cookie等用户信息。2. 无法用js获取非同源的DOM防止恶意网站通过iframe获取页面dom，从而窃取页面的信息。3. jsonp：jsonp能实现跨域是利用了img、script和link标签自身的跨域能力。
11. 常用的请求状态码：1. 500 内部服务器错误Internal Server Error 500内部服务器错误，服务器遇到未知无法解决的问题。2. 404 请求错误——请求不存在的资源Not Found 404 错误请求，因发送的请求语法错误,服务器无法正常读取。3. 403 禁止访问Forbidden 403 禁止访问，客户端没有权利访问所请求内容,服务器拒绝本次请求。4. 200 请求成功200 OK 请求成功，表示已经请求成功，默认情况下的状态码为200的响应就可以被缓存了。5. 301 永久重定向Moved Permanently 301 永久移动，该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的Location:头字段里找到。6. 302 临时重定向Found 302临时移动，该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的Location:头字段里找到。

二、浏览器相关

1. XSS攻击原理：**XSS(Cross-Site Scripting，跨站脚本攻击)*是一种代码注入攻击。攻击者在目标网站上注入恶意代码，当被攻击者登陆网站时就会执行这些恶意代码，这些脚本可以读取**cookie，**session tokens，或者其它敏感的网站信息，对用户进行钓鱼欺诈，甚至发起蠕虫攻击等。*XSS避免方式：**1. url参数使用encodeURIComponent方法转义2. 尽量不是有InnerHtml插入HTML内容3. 使用特殊符号、标签转义符。
2. CSRF攻击（跨站请求伪造）：CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。CSRF避免方式：1. 添加验证码2. 使用token- 服务端给用户生成一个token，加密后传递给用户- 用户在提交请求时，需要携带这个token- 服务端验证token是否正确3. SQL注入攻击：就是通过吧SQL命令插入到Web表单递交或输入域名，最终达到欺骗服务器执行恶意的SQL命令。解决：表单输入时通过正则表达式将一些特殊字符进行转换4. DDoS攻击：DDoS又叫分布式拒绝服务，全称 Distributed Denial of Service，其原理就是利用大量的请求造成资源过载，导致服务不可用。****解决：1. 限制单IP请求频率。2. 防火墙等防护设置禁止ICMP包等3. 检查特权端口的开放
3. Token相关内容：- 使用时的流程：1. 客户端使用用户名跟密码请求登录2. 服务端收到请求，去验证用户名与密码3. 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端4. 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里5. 客户端每次向服务端请求资源的时候需要带着服务端签发的 Token6. 服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据- Token 是访问接口（API）时所需要的资源凭证。用来唯一识别一个客户端。
4. Cookie相关内容：- Cookie：存在客户端，用来解决客户端如何保存信息的问题1. 使用流程 1. 在首次访问网站时，浏览器发送请求中并未携带Cookie。2. 浏览器看到请求中未携带Cookie，在HTTP的响应头中加入Set-Cookie。3. 浏览器收到Set-Cookie后，会将Cookie保存下来4. 下次再访问该网站时，HTTP请求头就会携带Cookie。- Cookie作用：会话管理：登陆、购物车、游戏得分或者服务器应该记住的其他内容个性化：用户偏好、主题或者其他设置追踪：记录和分析用户行为
5. Session相关内容：session 是另一种记录服务器和客户端会话状态的机制session 是基于 cookie 实现的，session 存储在服务器端，sessionId 会被存储到客户端的cookie 中****session 认证流程：- 用户第一次请求服务器的时候，服务器根据用户提交的相关信息，创建对应的 Session- 请求返回时将此 Session 的唯一标识 SessionID 返回给浏览器- 浏览器接收到服务器返回的 SessionID 后，会将此信息存入到 Cookie 中，同时 Cookie 记录此 SessionID 属于哪个域名- 当用户第二次访问服务器的时候，请求会自动把此域名下的 Cookie 信息也发送给服务端，服务端会从 Cookie 中获取 SessionID，再根据 SessionID 查找对应的 Session 信息，如果没有找到说明用户没有登录或者登录失效，如果找到 Session 证明用户已经登录可执行后面操作。
6. Cookie和Session的区别：- 安全性： Session 比 Cookie 安全，Session 是存储在服务器端的，Cookie 是存储在客户端的。- 存取值的类型不同：Cookie 只支持存字符串数据，Session 可以存任意数据类型。- 有效期不同： Cookie 可设置为长时间保持，比如我们经常使用的默认登录功能，Session 一般失效时间较短，客户端关闭（默认情况下）或者 Session 超时都会失效。- 存储大小不同： 单个 Cookie 保存的数据不能超过 4K，Session 可存储数据远高于 Cookie，但是当访问量过多，会占用过多的服务器资源。
7. Token和Session的区别：- Session 是一种记录服务器和客户端会话状态的机制，使服务端有状态化，可以记录会话信息。而 Token 是令牌，访问资源接口（API）时所需要的资源凭证。Token 使服务端无状态化，不会存储会话信息。- Session 和 Token 并不矛盾，作为身份认证 Token 安全性比 Session 好，因为每一个请求都有签名还能防止监听以及重复攻击，而 Session 就必须依赖链路层来保障通讯安全了。如果你需要实现有状态的会话，仍然可以增加 Session 来在服务器端保存一些状态。- 如果你的用户数据可能需要和第三方共享，或者允许第三方调用 API 接口，用 Token 。如果永远只是自己的网站，自己的 App，用什么就无所谓了。
8. TCP UDP 区别：
9. 浏览器缓存的作用：浏览器缓存的作用：减少冗余的数据传输，节省网络带宽，更快加载页面，缓存降低了服务器的要求，有更快的响应
10. 缓存的资源去哪里了：

  memory cache 将资源文件缓存到内存中，下次请求读取的是内存中的
  disk cache 将资源存到硬盘中，下次请求从硬盘中读取

1. 浏览器的本地存储以及各自优劣：浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。共同点: 都是保存在浏览器端、且同源的****不同点：1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。2. 存储大小限制也不同，- cookie数据不能超过4K，sessionStorage和localStorage可以达到5M- sessionStorage：仅在当前浏览器窗口关闭之前有效；- localStorage：始终有效，窗口或浏览器关闭也一直保存，本地存储，因此用作持久数据；- cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭1. 作用域不同- sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；- localstorage：在所有同源窗口中都是共享的；也就是说只要浏览器不关闭，数据仍然存在- cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭，数据仍然存在
2. 一次完整的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 中，可以选择保持持久连接，以便在同一连接上发送多个请求和响应。

持续更新ing。。。