前端杂项-个人总结八股文的背诵方案

个人总结八股文的背诵方案

URL到显示网页的过程

1. 浏览器解析URL，获取协议，主机名，端口号，路径等信息，并通过DNS查询将主机名转换为对应的IP地址
2. 浏览器与服务器建立TCP，进行三次握手。
3. 浏览器向服务器发送HTTP请求，包含请求方法 ，请求头，请求体等信息
4. 服务器接收并处理HTTP请求，根据请求的路径和参数返回相应的HTTP响应，包含状态码，响应头，响应体等信息
5. 浏览器接收并解析HTTP响应，根据状态码和响应头判断响应的结果和类型
6. 浏览器根据响应体的内容进行渲染和显示。如果响应体是html文档，浏览器会生成DOM树和CSSOM树，然后生成渲染树，进行布局和绘制。如果响应体是js或css文件，则浏览器会执行js代码或应用css样式。如果响应体是图片或其他资源，浏览器会下载并显示。
7. 浏览器会根据情况选择关闭或保持TCP连接，进行四次挥手。

DNS查询：本地域名服务器->host文件->根域名服务器->顶级域名服务器查询->权限域名服务器查询。（可以是递归查询，也可以是迭代查询）巧记：本地host根顶级权限

三次握手

1. 客户端随机初始化序号seq=x，同时把 SYN 标志位设置为1，表示 SYN 报文。并发送给服务器
2. 服务端收到客户端的 SYN 报文后，随机初始化序号seq=y,确认应答号ack=x+1;并将SYN 和 ACK 标志位都设置为1。发给客户端
3. 客户端收到服务器的报文后，ack=y+1，seq = x+1。并发给服务器
   seq=x，SYN=1；`` seq=y,ack=x+1，SYN=ACK=1; `` ack=y+1，seq = x+1。

为什么不能两次或四次？

1. 如果只有两次握手，那么就无法保证双方都能接收数据。例如，如果客户端发送了连接请求后，由于网络延迟或其他原因，没有收到服务器的连接确认，那么客户端就不知道服务器是否同意连接，也不知道服务器的初始序列号。如果此时客户端开始发送数据，可能会导致服务器无法正确处理或丢弃数据。
2. 如果有四次或更多次握手，那么就会浪费时间和资源。例如，如果在第二次握手后，服务器再向客户端发送一个额外的确认，那么这个确认就是多余的，因为客户端已经在第三次握手中确认了服务器的初始序列号。多余的握手会增加网络负担和延迟，并占用双方的缓存空间。

四次挥手

1. 客户端发送SYN=1给服务器，之后客户端进入 FIN_WAIT_1 状态。
2. 服务器发送ACK给客户端，接着服务端进入 CLOSED_WAIT 状态。客户端收到服务端的 ACK 应答报文后，之后进入 FIN_WAIT_2 状态。
3. 服务端处理完数据后，向客户端发送 FIN 报文，之后服务端进入 LAST_ACK 状态。
4. 客户端收到服务端的 FIN 报文后，回一个 ACK 应答报文，之后进入 TIME_WAIT 状态。
   服务器收到了 ACK 应答报文后，就进入了 CLOSED 状态，至此服务端已经完成连接的关闭。
   客户端在经过 2MSL 一段时间后，自动进入 CLOSED 状态，至此客户端也完成连接的关闭。

计算机网络分层模型

1. 物理层：物理媒介（双绞线、光纤和无线电波）上传输比特流，并定义了物理设备的接口标准、电气特性和编码方式等。IEEE
2. 数据链路层：相邻节点之间传输帧，并提供差错控制和流量控制。PPP、SLIP
3. 网络层：将数据报从源主机发送到目的主机，并提供路由选择和拥塞控制。IP、ICMP、ARP
4. 传输层：传输报文段，进程之间的通信。TCP和UDP
5. 会话层：建立会话、session验证，断点传输。SMTP、DNS
6. 表示层：数据转换、加密、压缩。TELNET、SNMP
7. 应用层：用户界面的交互。FTP，HTTP、NFS、SSL

上述是OSI七层模型，TCP/IP五层模型：应用层，表示层和会话层合并为应用层；TCP/IP四层模型：物理层和数据链路层合并为网络接口层

TCP通信和UDP通信各自的优缺点

1. TCP优点：可靠稳定，TCP通过三次握手建立连接，通过确认、重传、窗口、拥塞机制等保证数据无差别、不丢失、不重复、按序到达。
   缺点：效率低，占用系统资源高，易被攻击。面向连接只能是点到点通信。
2. UDP优点：效率高且安全。面向报文，可以进行一对多和多对多通信。

进程和线程的区别，加一点协程

1. 资源：进程是资源分配的基本单位，而线程是操作系统调度和执行的基本单位。进程有自己独立的地址空间和资源，而线程共享所属进程的资源，但有自己的栈和局部变量。
2. 开销：进程的创建和销毁都需要向操作系统申请或释放资源，涉及到保存和恢复上下文，开销较大。线程的创建和销毁只需要在用户空间内进行，涉及到部分上下文的切换，开销较小。
3. 通信：进程间通信需要借助操作系统提供的 IPC 机制，如管道、信号、消息队列等。而线程间可以直接读写同一进程中的数据，只需要同步控制即可。
4. 稳定性：进程之间是相互隔离的，一个进程崩溃不会影响其他进程的运行；线程之间是相互依赖的，一个线程崩溃可能导致整个进程终止。
5. 协程是一种用户态的轻量级线程，由程序员控制其创建、调度和销毁，不需要操作系统的支持。协程之间是相互独立的，一个协程崩溃不会影响其他协程的运行。

进程切换的过程

1. 保存当前运行进程的上下文，包括程序计数器、栈指针、寄存器、内核数据结构等信息，以便下次恢复执行。
2. 根据调度算法选择一个就绪态的进程作为切换的进程。
3. 恢复第一步保存的上下文，包括程序计数器、栈指针、寄存器、内核数据结构等信息。
4. 转移CPU的控制权给被选中的进程，开始执行。

进程间通信方式，线程多了全局变量

1. 管道：半双工通信方式，数据只能在父子进程间单向流动。
2. 命名管道：有路径名关联，可以在任意进程间通信。
3. 消息队列：存放在内核中的消息链表，支持多个进程间通信
4. 信号量：实现进程间的互斥与同步
5. 共享内存：多个进程直接访问同一块物理内存空间。

陈述http

1. HTTP，全称为 HyperText Transfer Protocol，即为超文本传输协议。是互联网应用最为广泛的一种网络协议
   所有的 www 文件都必须遵守这个标准。
2. http特性：无连接无状态、构建于 TCP/IP 协议之上、默认端口号80、分为请求和响应两个部分。
3. 请求：GET，POST，PUT，DELETE
4. 响应：200 OK、301永久重定向、302临时重定向、304未修改、400客户端语法错误、401未授权、403Forbidden 、404 Not Found、500服务器内部错误、503服务器暂时错误
5. http缺点:通信使用明文，内容可能被窃听。
   通信双方的身份无法得到认证，身份可能遭遇伪装。
   无法验证报文的完整性。
6. https可以简单的理解为：https = http + 加密 + 认证 + 完整性保护。
7. 完整性保护：对数据的散列值（哈希值）进行加密，然后将其附加在传输的数据上。接收方解密之后再验证数据与散列值是否对应。
8. 加密：SSL/TLS 使用公钥加密和私钥解密的方式来保护数据的机密性。
   过程：S发公钥给C，C用公钥加密一个随机生成的对称密钥，然后发给S，S用原有的私钥来解密这个对称秘钥，之后C和S采用这个对称秘钥来加解密数据。

http有哪些版本？每个版本分别加了哪些新特性？

1. HTTP 0.9：是第一个版本的HTTP协议，已过时。组成简单，只有GET请求，且不支持请求头，只支持纯文本。HTTP 0.9具有典型的无状态性，每个事务独立进行处理，事务结束时就释放这个连接。
2. HTTP 1.0：
   引入了请求方法，GET、HEAD、POST，开始支持客户端通过POST方法向Web服务器提交数据
   引入了内容协商，用于让客户端和服务器协商最合适的内容格式，如语言、字符集、编码等。
   引入了状态码、头部字段、短连接和缓存机制。
3. HTTP 1.1：
   引入了请求方法，OPTIONS, PUT, DELETE, TRACE, CONNECT方法
   引入了管道机制，允许客户端在收到上一个响应之前就发送下一个请求，进一步减少了网络延迟。
   引入了分块传输编码，将内容分成多个块发送，每个块包含自己的大小信息。
   完善缓存机制，加入了一些cache的新特性，引入了实体标签，一般被称为e-tags，新增更为强大的Cache-Control头。
   引入了持久连接、引入虚拟主机：在同一个IP地址和端口上提供多个不同域名的服务
4. HTTP2.0
   引入了二进制分帧，信息分割为更小的帧，并采用二进制编码，从而降低了报文解析的复杂度和开销。
   引入了多路复用，在同一个TCP连接上同时发送和接收多个请求和响应
   引入了首部压缩，通过HPACK算法对请求和响应的头部字段进行压缩。
   引入了服务器推送，服务器可以在客户端请求之前主动发送数据，预加载一些客户端可能需要的资源。
   引入了优先级和流量控制，即客户端和服务器可以为不同的请求设置优先级，让重要的请求优先处理，同时可以控制数据流的速度，避免拥塞和浪费。
5. HTTP 3.0
   使用QPACK算法对HTTP头部进行压缩，提高了编码效率和压缩率。
   使用QUIC协议代替TCP协议，实现了无序、并发的字节流传输，解决了队头阻塞问题。
   0-RTT握手：允许客户端在第一次请求时就发送数据。

WebSocket

1. 实时性：WebSocket允许服务器主动向客户端推送数据，实现实时通信，无需客户端发起请求。
2. 全双工通信：WebSocket允许客户端和服务器同时发送和接收数据，实现真正的双向通信。
3. 较低的延迟：由于WebSocket在建立连接后保持长连接，减少了连接和关闭的开销，因此具有较低的延迟。
4. 较低的延迟：由于WebSocket在建立连接后保持长连接，减少了连接和关闭的开销，因此具有较低的延迟。
5. 跨域支持：WebSocket支持跨域通信，不受同源策略限制。

强缓存和协商缓存

1. 强缓存：当缓存未过期时，直接从本地缓存中加载资源。字段包括 Expires（HTTP/1.0）和 Cache-Control（HTTP/1.1）
2. 协商缓存：本地缓存已过期，则发请求询问服务器资源是否有更新；服务器根据 Last-Modified 或 ETag 来判断，若未更新则返回304 Not Modified 状态码继续使用本地资源，否则返回200状态码和新的资源。

ARQ协议

1. 自动重传请求协议，是一种用于实现可靠数据传输的协议。它通过使用确认和超时这两个机制，在不可靠服务的基础上实现可靠的信息传输。如果发送方在发送后一段时间之内没有收到确认帧，它通常会重新发送。
2. 停止等待ARQ协议：是指发送方每发送一个分组就停止发送，等待接收方的确认。如果发送方在超时时间内没有收到确认，就重发该分组。这种协议简单易实现，但信道利用率较低。
3. 连续ARQ协议：是指发送方可以连续发送多个分组，不必每发完一个分组就停顿下来等待对方的确认。这样可以提高信道利用率，但也增加了复杂性和开销。连续ARQ协议又分为回退N帧ARQ协议和选择重传ARQ协议。
4. 回退N帧ARQ协议：某个分组出错或丢失，就丢弃该分组及其后续的分组。选择重传ARQ协议：某个分组出错或丢失，就缓存该分组之后正确接收的分组，并对每个正确接收的分组单独发送选择性确认。

常见的攻击类型CSRF，XSS，DDoS，点击劫持，中间人攻击，DNS 劫持

1. CSRF：用户未退出网站A，同一个浏览器中访问网站B，网站B携带cookie向网站A发送请求获取用户信息，网站A根据cookie会响应该请求。解决方法：服务器进行同源检测、设置http-only：true，验证Token。
2. XSS：存储型、反射型、DOM。存储型：将恶意代码提交到服务器；反射型：恶意代码放在URL；DOM：通过恶意脚本修改页面的 DOM 结构。解决方法：对用户输入进行编码、校验过滤特殊字段、保护cookie
3. ddos：多个设备向目标服务器发送大量请求，导致目标服务器无法正常提供服务或者奔溃。解决方法：限制ip访问频率、使用负载均衡和缓存、使用CDN、云防火墙等第三方防御服务。
4. 点击劫持：通过透明的iframe或其他可点击元素覆盖在目标网站上，欺骗用户点击来窃取用户信息。解决方法：设置 X-Frame-Options 响应头（DENY、SAMEORIGIN、SAMEORIGIN）是否允许其他网页的iframe显示、js检测是否嵌套其他网页，选择跳出或提示用户。
5. 中间人攻击：在用户和目标网站之间截取通信信息，获取用户敏感信息或篡改数据。解决方法：HTTPS协议、避免使用公共wifi。
6. DNS劫持：篡改DNS服务器或本地hosts文件，使得用户访问的域名解析到别的ip地址，从而访问到假冒的网站。解决方法：时刻手动维护本地hosts文件，使用可靠的 DNS 服务器。

JavaScript 的事件循环机制

1. js是单线程的，如果遇到异步任务，如 setTimeout、Promise、Ajax 等，就会将它们放入一个任务队列中，等待当前的同步任务执行完毕后，再按照一定的规则从任务队列中取出异步任务执行。这个过程就是事件循环。
2. 同步代码执行完毕时，事件循环会检查微任务队列并依次执行完，然后会检查宏任务队列并依次执行完。
3. 宏任务包括 setTimeout、setInterval、Dom事件、setImmediate、requestAnimationFrame、I/O、UI rendering 等，微任务包括 Promise、async/await、MutationObserver、process.nextTick 等。

JavaScript new的过程

1. 创建一个空的简单 JavaScript 对象（即 {} ）；
2. 将这个空对象的原型指向构造函数的原型，即设置 proto 属性；
3. 将这个空对象作为 this 的上下文传递给构造函数，并执行构造函数中的代码；
4. 如果构造函数没有显式返回一个对象（返回的是基本类型也不行），则返回这个空对象，否则返回构造函数返回的对象。

说一下Chrome的进程架构

1. 浏览器进程：负责界面显示、用户交互、子进程管理，同时提供存储等功能。

性能优化

1. 访问网站前：
   (1) 推送资源：预先将页面资源如JS,图片，多媒体文件推送到客户端/浏览器
   (2) 预加载： prefetch（可能使用的资源）、preload（必要资源）、prerender
   (3) 预先请求AJAX：提前获取下个跳转页面需要的ajax数据,缓存到localstorage
2. 加载过程中：
   (1) 查询强缓存：service worker、强缓存
   (2) 解析dns：
   (3) 建立tcp链接：http1.1持久链接、http2多路复用
   (4) 发送请求: 精灵图、disk cache协商缓存、小图片base64免去请求
   (5) 解析html：css在上，js在下避免阻塞
   (6) 构建渲染树：减少DOM的数量和嵌套层级、减少重绘重排、懒加载
   (7) 运行JS：精简代码、代码分割、tree shaking
3. 页面运行时：
   (1) 虚拟滚动条应对无限加载
   (2) 节流防抖
   (3) 内存：避免全局变量、避免使用闭包、手动回收（obj=null）

同源策略与跨域 https://www.nowcoder.com/discuss/514959073205370880

1. 域名、协议、端口号任意一个不同则为跨域。
2. 解决跨域：JSONP（script标签可以跨域加载资源）、CORS（Cross-Origin Resource Sharing、服务端响应头"Access-Control-Allow-Origin"）、代理服务器、WebSocket协议不受同源策略限制、postMessage

XMLHttpRequest 和 fetch 区别 https://blog.csdn.net/weixin_43073401/article/details/132001688

1. 用法：xhr用法比较复杂，依次创建对象、设置请求属性、监听状态变化、发送请求；fetch 比较简单，只需要调用fetch函数并传入参数即可
2. 返回值：xhr返回的是xhr对象，通过responseText 或 responseXML获取数据；fetch返回一个Promise 对象，通过response.json() 或 response.text()获取数据
3. 跨域请求：xhr跨域时需要设置withCredentials为 true，同时服务器端需要设置允许跨域请求的头信息。fetch默认不会发送cookie，可设置 credentials: ‘include’ 来携带Cookie。'omit’不会携带cookie，'same-origin’同源时携带cookie
4. 错误处理：xhr可以通过onerror 和 onreadystatechange 等事件来处理错误；fetch需要手动检查响应的 ok 属性来处理错误
5. 兼容性：xhr支持广泛，包括老旧浏览器；fetch 是ES6的新特性，不支持IE浏览器（除了Edge）和一些旧版本浏览器，但可以通过polyfill来实现兼容。

异步加载js https://www.jb51.net/article/107680.htm

1. 给 script 标签添加 async 属性：异步加载脚本，加载完成后立即执行，加载顺序并不是固定的。
2. 给 script 标签添加 defer 属性：异步加载脚本，文档解析完成后执行，按照在页面中出现的顺序执行。
3. JavaScript动态创建

   Session、Cookie和Token https://www.nowcoder.com/discuss/515115466998734848

   1. Session是服务器端的会话状态管理机制，首次访问服务器时会创建一个唯一的session id通过Set-Cookie返回给客户端，存储在服务器内存或数据库占用服务器资源。
   2. Token是身份验证和授权的令牌，由服务器生成发给客户端，不依赖于服务器的会话存储。
   3. Cookie是存储在浏览器中的文本文件，后续的请求会携带相应的cookie信息，由于存在客户端，所以存在被篡改和劫持的风险。
   4. cookie属性：name、value、domain、path、expires或max-age、secure（HTTPS）、HttpOnly、SameSite：（“Strict”、“Lax"或"None”）。

   ES6及以上新特性

   1. ES6：let，const、箭头函数、模板字符串、解构赋值、扩展运算符、默认参数值、类和继承、Promise、Set 和 Map 、Symbol
   2. ES7：数组includes、指数操作符（**）
   3. ES8：async/await、values/entries、padStart/padEnd、函数参数列表结尾允许逗号、Object.getOwnPropertyDescriptors()
   4. ES9：异步迭代器、Promise.finally()、Rest/Spread 属性、正则表达式命名捕获组/反向断言/dotAll模式
   5. ES10：flat扁平化、flatMap映射数组、trimStart/trimEnd、String.prototype.matchAll、Symbol.prototype.description、Object.fromEntries()、JSON Superset 超集、JSON.stringify() 加强格式转化、Array.prototype.sort() 更加稳定、Function.prototype.toString() 重新修订
   6. ES11：可选链操作符（?.）、空位合并操作符（??）、动态 import ()、BigInt、globalThis、Promise.allSettled、for in 结构
   7. ES12：replaceAll、Promise.any、逻辑赋值操作符 ??=、&&=、 ||=、WeakRef（ref.deref()）、数字下划线分隔符、Intl.ListFormat、Intl.DateTimeFormat
   8. ES13：类私有方法和字段（#前缀）、可索引数据上新增.at()方法、Object.hasOwn(object, property)

   require和import区别：

   1. import是ES6语法，require是commonJS语法。
   2. 导入文件类型：import只能导入ES6模块或者使用Babel等工具转化为ES6模块的代码，而require可以导入CommonJS模块、AMD模块、UMD模块以及Node.js内置模块等多种类型的模块。
   3. 变量提升：import语句是静态执行的（import()是运行时执行，动态导入），并在模块内部创建一个局部作用域，不会变量提升，因此需要将语句放在文件顶部；require函数是动态执行的，这意味着它在运行时执行，可以变量提升。
   4. 导出方式：import对应的导出为export xxx 或export default {}；而require对应的导出为module.exports = {};
   5. 导入内容：require 请求整个包对象，import 只请求模块中需要的部分；

   浏览器的前端存储方案

   1. cookies：Cookies 可以用于存储少量数据，并且有一定的过期时间，但由于每次请求都会携带 Cookies，所以不适合存储大量数据。
   2. Web Storage（localStorage 和 sessionStorage）
   3. IndexedDB：是一种客户端数据库，可以在浏览器中存储大量结构化数据。它提供了类似于 SQL 的查询功能，并且数据可以持久化保存在客户端。
   4. Cache Storage：是 Service Worker 的一部分，用于缓存网络请求的数据，可以实现离线访问和提高应用性能
   5. WebSQL（已废弃）：是一种在客户端使用 SQL 数据库的方案，但已被废弃，不推荐使用。

   js设计模式

   1. 单例模式：确保一个类只有一个实例，并提供一个全局访问点。用来管理全局状态、配置等。
   2. 观察者模式：定义了一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会收到通知并自动更新。
   3. 发布订阅模式：在观察者模式基础上解耦了发布者（Publisher）和订阅者（Subscriber），通过一个消息中心作为媒介。
   4. 策略模式：一个功能有多种方案可以选择，封装各个方案，并且使他们能互相替换。（抽取公共逻辑）
   5. 代理模式：为其他对象提供一种代理以控制对这个对象的访问。保护代理、虚拟代理、缓存代理
   6. 迭代器模式：提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。如js的forEach、map、some等（Iterator和 Generator）
   7. 适配器模式：解决两个接口/方法间的接口不兼容的问题。
   8. 享元模式：大量相似对象，抽出共同部分属性作为内部状态，其他属性作为外部状态。（抽取公共属性）
   9. 装饰器模式：在不改变原有对象结构的基础上，动态地给对象增加新的功能或者增强原有功能。（高阶组件）