高频面试题 - 本人亲历大厂面试总结

暑期大厂面了十余次，我把八股里面拷打最多的拿出来总结一下，可以随便看看

1. 浏览器渲染流程

浏览器渲染

• 浏览器接收url并开启一个新进程（这一部分可以展开浏览器的进程与线程的关系）
• 浏览器解析输入的 URL，提取出其中的协议、域名和路径等信息。（这部分涉及URL组成部分）
• 浏览器向 DNS 服务器发送请求，DNS服务器通过 多层查询 将该 域名 解析为对应的 IP地址 ，然后将请求发送到该IP地址上，与 服务器 建立连接和交换数据。（这部分涉及DNS查询）. 浏览器缓存 -> 本地DNS -> 根 -> 顶级 -> 权威
• 浏览器与服务器建立 TCP 连接。（这部分涉及TCP三次握手/四次挥手/5层网络协议）
• 浏览器向服务器发送 HTTP 请求，包含请求头和请求体。（4,5,6,7包含http头部、响应码、报文结构、cookie等知识）
• 服务器接收并处理请求，并返回响应数据，包含状态码、响应头和响应体。
• 浏览器接收到响应数据，解析响应头和响应体，并根据状态码判断是否成功。
• 如果响应成功，浏览器接收到http数据包后的解析流程（这部分涉及到html - 词法分析，解析成DOM树，解析CSS生成CSSOM树（样式树），合并生成render渲染树（样式计算）。然后layout布局，分层，调用GPU绘制等，最后将绘制的结果合成最终的页面图像，显示在屏幕上。这个过程会发生回流和重绘）。
• 连接结束 -> 断开TCP连接 四次挥手

2. js异步，promise 事件循环

简单

3. 浏览器缓存策略

强缓存（不会向服务器发送请求，直接用缓存）

机制：

• 浏览器在加载资源时，先查看缓存里有没有符合条件的资源。
• 如果有，直接用本地缓存，不会发请求到服务器。
• 即使断网也能用缓存里的数据。

常见的控制方式：

• Expires （HTTP/1.0）
• Cache-Control （HTTP/1.1）

协商缓存（会向服务器发送请求，但可能不下载资源）

机制：

• 资源过期后，浏览器向服务器发一个请求，询问：我这有个缓存版本，可以用吗？
• 如果服务器说可以（返回 304 Not Modified），浏览器继续用缓存的版本。

常见的控制方式：

• Last-Modified / If-Modified-Since
• ETag / If-None-Match

4. 浏览器的存储

5. 跨域

1. 同源策略：两个 URL 的协议、域名和端口都相同，限制js脚本、传统请求、数据访问三大问题
2. 跨域解决：

6. 浏览器安全

1. XSS攻击：

在网站注入恶意脚本，让其他用户浏览时执行，窃取敏感信息（如cookie）或者进行非法操作

○ 存储型 XSS 攻击：黑客将恶意代码储存到存在漏洞的服务器，浏览器访问含有恶意代码的页面，浏览器上传用户信息到服务器。

○ 反射型XSS攻击：用户将一段含有恶意代码的请求提交给 Web 服务器，Web 服务器接收到请求时，又将恶意代码反射给了浏览器端，这就是反射型 XSS 攻击。

○ 基于 DOM 的 XSS 攻击：不牵涉到页面 Web 服务器，在 Web 资源传输过程或者在用户使用页面的过程中修改 Web 页面的数据。 比如通过网络劫持在页面传输过程中修改 HTML 页面的内容，这种劫持类型很多，有通过 WiFi 路由器劫持的，有通过本地恶意软件来劫持的。

防范措施

○ 输入内容严格 转义/过滤（如HTML、JS、URL编码）

○ 使用 Content-Security-Policy（CSP安全策略）限制脚本来源

○ HttpOnly设置Cookie，避免被JS读取

2. CSRF跨域请求伪造

利用受害者在已登录的情况下身份验证的权限，对受害者进行操作。攻击者通过伪装的请求来执行未经授权的操作，比如修改密码、发送电子邮件或进行资金转账等

防范措施

○ 设置 CSRF Token（每次请求携带验证令牌）

○ 检查 Origin / Referer 来源

○ 对重要操作使用 二次确认

○ Cookie设置 SameSite 属性7. https和http

7. https和http

• HTTP：无连接、无状态，明文传输
• HTTPS：HTTP+SSL/TLS协议

HTTP 与 HTTPS 区别

• 加密： HTTPS 是 HTTP 协议的更加安全的版本，通过使用SSL/TLS进行加密传输的数据；
• 连接方式： HTTP（三次握手）和 HTTPS （三次握手+数字证书）连接方式不一样；
• 端口： HTTP 默认的端口是 80和 HTTPS 默认端口是 443

保证安全性

• 加密传输：HTTPS使用SSL/TLS协议对HTTP报文进行加密，这种加密过程结合了对称加密和非对称加密，确保数据的保密性和完整性。
• 身份验证：HTTPS通过数字证书进行身份验证，确保通信双方的真实性。在建立HTTPS连接时，服务器会提供数字证书来证明自己的身份。如果验证通过，客户端就可以信任服务器，并继续与其进行安全的数据传输。这有效防止了被恶意伪装的服务器攻击。
• 数据完整性保护：在传输数据之前，HTTPS会对数据进行加密，并使用消息摘要（hash）算法生成一个摘要值。在数据到达接收端后，接收端会使用相同的算法对接收到的数据进行摘要计算，并与发送端的摘要值进行比较。如果两者一致，说明数据在传输过程中没有被篡改。如果不一致，通信双方应重新进行验证或中断连接。

8. https连接过程

（也就是拿非对称加密对称，保证非对称的密钥安全）

HTTPS通过TLS协议来建立安全连接，大致过程是：

➡️ 1. 客户端发起请求

浏览器向服务器发起 HTTPS 请求，并说明支持的加密算法。

➡️ 2. 服务器返回证书

服务器返回包含公钥的数字证书（CA机构签发）。

➡️ 3. 客户端验证证书

检查证书是否有效（未过期、可信颁发机构、未吊销等）。

验证通过后，浏览器生成一个随机对称密钥（Session Key）。

➡️ 4. 客户端加密密钥并发送

客户端用服务器的公钥加密这个对称密钥，发送给服务器。

➡️ 5. 服务器解密密钥

服务器用私钥解密出这个对称密钥。

➡️ 6. 建立安全通道

双方以后使用这个对称密钥进行加密通讯（效率高）。

简图：

浏览器 ——> 服务器证书（含公钥）
浏览器（验证证书）——> 随机对称密钥（用公钥加密）
服务器（用私钥解密）——> 双方用对称密钥加密通讯

9. tcp和udp

10. http状态码

以下是一些常见的HTTP状态码及其代表的意思：

1. 1xx（信息性状态码）：

○ 100 Continue：请求已收到，继续处理。

2. 2xx（成功状态码）：

○ 200 OK：请求成功。

○ 201 Created：请求已经被实现，并因此创建了一个新的资源。

○ 204 No Content：服务器成功处理了请求，但没有返回任何内容。

3. 3xx（重定向状态码）：

○ 301 Moved Permanently：永久重定向，资源位置变了。

○ 302 Found：临时重定向，资源临时移动到其他位置。

○ 304 Not Modified：资源未修改，走缓存（跟协商缓存有关）。

4. 4xx（客户端错误状态码）：

○ 400 Bad Request：服务器无法理解请求。

○ 401 Unauthorized：请求要求进行身份验证。

○ 403 Forbidden：服务器理解请求，但拒绝执行它。

○ 404 Not Found：服务器无法找到请求的资源。

○ 405 Method Not Allowed：请求中指定的方法不被允许。

5. 5xx（服务器错误状态码）：

○ 500 Internal Server Error：服务器内部错误。

○ 502 Bad Gateway：服务器作为网关或代理时收到无效响应（常见于反向代理、Nginx）。

○ 503 Service Unavailable：服务器暂时过载或维护，无法处理请求。

○ 504 Gateway Timeout：网关超时，代理服务器等待上游服务器响应超时。

11. react diff算法

react fiber前，传统的diff算法：

• 把树形结构按照层级分解，只比较同级元素。
• 列表结构的每个单元添加唯一的 key 属性，方便比较。
• React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）
• 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty 到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.
• 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

react fiber后

从 React 16 开始，底层 Diff 算法升级为 Fiber 架构，可以做到：

1. 可中断的渲染：Fiber 允许将大的渲染任务拆分成多个小的工作单元（Unit of Work），使得 React 可以在空闲时间执行这些小任务。当浏览器需要处理更高优先级的任务时（如用户输入、动画），可以暂停渲染，先处理这些任务，然后再恢复未完成的渲染工作。
2. 优先级调度：在 Fiber 架构下，React 可以根据不同任务的优先级决定何时更新哪些部分。React 会优先更新用户可感知的部分（如动画、用户输入），而低优先级的任务（如数据加载后的界面更新）可以延后执行。
3. 双缓存树（Fiber Tree）：Fiber 架构中有两棵 Fiber 树——current fiber tree（当前正在渲染的 Fiber 树）和 work in progress fiber tree（正在处理的 Fiber 树）。React 使用这两棵树来保存更新前后的状态，从而更高效地进行比较和更新。
4. 任务切片：在浏览器的空闲时间内（利用 requestIdleCallback思想），React 可以将渲染任务拆分成多个小片段，逐步完成 Fiber 树的构建，避免一次性完成所有渲染任务导致的阻塞。

👉 Fiber 主要是为了解决大页面卡顿的问题，但核心的 Diff 思想还是类似的！