http1.0 http1.1 http2.0

  • http1.0
  1. 最基础的 http 协议
  2. 支持最基础的 get post
  • http 1.1
  1. 缓存策略（cache-control）
  2. 支持长链接（connection: keep-alive）, 一次 tcp 连接多次请求
  3. 断点续传， 状态码 206
  4. 支持新的方法 put update 等， 支持 restful api
  • http 2.0
  1. 可压缩 header， 减少体积
  2. 多路复用，一次 TCP 连接中可以多个 http 并行请求

用户输入 url 到整个页面渲染的过程

  1. URL 解析：浏览器检查 URL 格式是否正确，然后解析 URL 以获取协议、域名、端口和路径。
  2. DNS 解析：浏览器将域名转换为服务器的 IP 地址。这通常涉及到查找浏览器缓存、操作系统缓存、路由器缓存，最后是 ISP 的 DNS 服务器。
  3. 建立 TCP 连接：浏览器与服务器的 IP 地址上的特定端口建立 TCP 连接。这通常涉及到一个称为“三次握手”的过程。
  4. 发送 HTTP 请求：一旦 TCP 连接建立，浏览器就会构建一个 HTTP 请求，并通过 TCP 连接发送给服务器。
  5. 服务器处理请求：服务器接收到 HTTP 请求后，会根据请求的资源类型进行处理，可能涉及到查询数据库或执行后端逻辑。
  6. 服务器响应：服务器处理完请求后，会将响应数据（如 HTML、CSS、JS 文件）发送回浏览器。
  7. 浏览器渲染页面：浏览器接收到文件后，会解析 HTML 构建 DOM 树，解析 CSS 构建 CSSOM 树，然后将两者结合形成渲染树。浏览器还会解析并执行 JavaScript 代码，这可能会修改 DOM 和 CSSOM。
  8. 关闭 TCP 连接：一旦页面加载完成，TCP 连接可以被关闭或保持开放以供未来的请求重用。
  9. 渲染过程：浏览器开始渲染页面
  • 9.1 解析html。浏览器接收到html会解析成dom树
  • 9.2 解析css。解析css文件和内连样式丞丞cssom树
  • 9.3 构建渲染树。浏览器讲dom树和cssom树组合一起来生成渲染树， 这个渲染树包含节点及其样式
  • 9.4 布局。浏览计算每个节点在界面位置和大小，这个过程交回流（重排）
  • 9.5 绘制。浏览器将每个节点绘制到屏幕上， 绘制信息包含文本，颜色，图像等
  • 9.6 合成。对于复杂的页面，浏览器可能将页面内容分成多个图层进行渲染， 最后合成完整的页面

  1. 执行 Javascript：在html解析过程中，遇到script标签，浏览器将会暂停html的解析，先执行js代码，然后在继续解析

  2. 用户交互

强缓存和协商缓存区别 分别什么场景下使用

强缓存（Strong Cache）和协商缓存（Negotiated Cache）是浏览器缓存机制中的两种策略，它们的主要区别在于是否需要与服务器进行通信来验证缓存的有效性。

强缓存:

  • 工作原理: 当资源被强缓存时，浏览器不会向服务器发送请求，而是直接从本地缓存中读取资源。这是通过 HTTP 响应头中的Expires和Cache-Control字段来控制的。
  • 适用场景: 强缓存适用于那些内容变动不频繁的静态资源，如图片、CSS 和 JavaScript 文件。这些资源可以设置较长的缓存时间，以减少网络请求，提高加载速度。

协商缓存:

  • 工作原理: 当强缓存失效或资源已过期时，浏览器会向服务器发送请求，携带如If-None-Match（对应ETag）和If-Modified-Since（对应Last-Modified）的标识，服务器根据这些标识决定是否使用缓存。
  • 适用场景: 协商缓存适用于内容变动频繁的资源，如新闻文章或产品详情页。服务器可以验证资源是否有更新，确保用户能够获取最新的资源内容。

简而言之，强缓存不需要请求服务器就能决定是否使用缓存，而协商缓存需要服务器确认缓存是否仍然有效。开发者应根据资源的更新频率和性质来选择合适的缓存策略.

f5 刷新具体做了哪些操作？使用了强缓存还是协商缓存？ 具体修改了哪些字段，才让你刷新这个缓存

当您在浏览器中按下 F5 进行刷新时，浏览器会执行以下操作：

  1. 跳过强缓存：F5 刷新会设置Cache-Control的max-age为 0，这意味着强缓存（如Expires和Cache-Control中的max-age）将被忽略。
  2. 进行协商缓存：浏览器会检查协商缓存，发送带有If-Modified-Since和/或If-None-Match的 HTTP 请求头到服务器，询问资源是否有更新。

如果资源没有更新，服务器会返回一个 304 状态码，告诉浏览器可以使用本地缓存的资源。如果资源有更新，服务器则会发送新的资源以及 200 状态码。

具体修改的字段包括：

  • 设置Cache-Control的max-age为 0，使得强缓存立即过期。
  • 使用If-Modified-Since和If-None-Match字段与服务器进行协商，以确定资源是否有更新。

http 和 UDP 协议有什么区别？

  1. http 是应用层， UDP 是传输层
  2. http 用于请求 api 接口， UDP 适用于 视频/语音等
  3. http 有连接有断开稳定传输， UDP 无连接无断开 不稳定传输 但是效率高

http的状态码有哪些？

HTTP状态码是服务器对客户端请求的响应状态的标识。它们分为五个类别（1XX、2XX、3XX、4XX、5XX），每个类别都有特定的含义。以下是对每个类别及其常见状态码的解释：

1XX - 信息性状态码

这类状态码表示请求已被接收，但需要进一步处理。它们是临时性的，通常不会在实际应用中遇到。

  • 100 Continue: 服务器已收到请求的初始部分，客户端可以继续发送剩余部分。
  • 101 Switching Protocols: 服务器将根据客户端的请求切换协议。

2XX - 成功状态码

这类状态码表示请求已被服务器成功接收、理解和处理。

  • 200 OK: 请求成功，服务器返回客户端请求的内容。
  • 201 Created: 请求成功并且服务器创建了新的资源。
  • 202 Accepted: 请求已被接受，但处理尚未完成。
  • 204 No Content: 服务器成功处理请求，但没有返回任何内容。

3XX - 重定向状态码

这类状态码表示客户端需要采取进一步的行动来完成请求。通常用于URL重定向。

  • 300 Multiple Choices: 请求的资源有多个选择，客户端可以选择其中一个进行操作。
  • 301 Moved Permanently: 请求的资源已永久移动到新位置。
  • 302 Found (Moved Temporarily): 请求的资源暂时移动到新位置。
  • 304 Not Modified: 客户端的缓存副本是最新的，服务器未返回资源内容。

4XX - 客户端错误状态码

这类状态码表示客户端发送的请求有错误，服务器无法或不会处理它。

  • 400 Bad Request: 请求语法错误，服务器无法理解。
  • 401 Unauthorized: 请求需要用户认证。
  • 403 Forbidden: 服务器理解请求，但拒绝执行。
  • 404 Not Found: 服务器找不到请求的资源。
  • 405 Method Not Allowed: 请求方法（如GET、POST）不被允许用于请求的资源。

5XX - 服务器错误状态码

这类状态码表示服务器在处理请求时发生了错误，尽管客户端的请求可能是正确的。

  • 500 Internal Server Error: 服务器遇到意外情况，无法完成请求。
  • 502 Bad Gateway: 服务器作为网关或代理时，从上游服务器接收到无效响应。
  • 503 Service Unavailable: 服务器暂时无法处理请求（通常是由于超载或维护）。
  • 504 Gateway Timeout: 服务器作为网关或代理时，未能及时从上游服务器接收到响应。

这些状态码帮助客户端和服务器之间进行有效的通信，确保请求和响应的处理过程更加透明和可预测。

请简述 XSS 和 CSRF 的概念，并列举几种安全防范策略

XSS（跨站脚本攻击，Cross-Site Scripting）和 CSRF（跨站请求伪造，Cross-Site Request Forgery）是两种常见的Web安全威胁。以下是对这两种攻击的简要解释，以及相应的安全防范策略。

XSS（跨站脚本攻击）

概念： XSS 是指攻击者在网页中注入恶意脚本，当其他用户访问该网页时，这些恶意脚本会在用户的浏览器中执行。攻击者可以利用这些脚本窃取用户的敏感信息（如会话cookie、密码等）或执行其他恶意操作。

分类：

  • 反射型XSS：恶意脚本通过URL参数或表单提交等方式传递，服务器将这些脚本反射回页面中。
  • 存储型XSS：恶意脚本被永久存储在服务器端（如数据库），每当用户访问受感染的页面时，脚本都会被执行。
  • DOM型XSS：恶意脚本通过修改页面的DOM结构来执行，不涉及服务器端。

防范策略：

  1. 输入验证与过滤：对用户输入的数据进行严格的验证和过滤，防止恶意脚本被插入。
  2. 输出编码：在将用户输入的数据输出到页面之前，进行适当的HTML编码，防止脚本被执行。
  3. Content Security Policy (CSP)：通过设置CSP头，限制页面中可以执行的脚本源，减少XSS攻击的风险。
  4. 使用安全的API：尽量使用安全的JavaScript API来操作DOM，避免使用容易被攻击的API（如innerHTML）。
  5. Cookie安全：设置Cookie的HttpOnly属性，防止JavaScript访问Cookie，从而保护会话信息。

CSRF（跨站请求伪造）

概念： CSRF 是指攻击者诱导用户访问恶意网站或点击恶意链接，利用用户的身份（如已登录状态）向目标网站发送恶意请求，从而执行未经用户授权的操作。

防范策略：

  1. 使用CSRF Token：在每次提交表单时，生成一个唯一的CSRF Token，并将其包含在表单中。服务器在处理请求时验证该Token的有效性。
  2. 验证Referer头：在服务器端验证请求的Referer头，确保请求来自合法的源。
  3. SameSite Cookie属性：设置Cookie的SameSite属性为Strict或Lax，限制跨站请求中Cookie的发送。
  4. 双重提交Cookie：在请求中同时提交一个隐藏的表单字段和Cookie中的Token，并在服务器端验证两者的匹配性。
  5. 操作确认：对于敏感操作（如转账、修改密码等），要求用户进行二次确认（如输入验证码）。

总结

XSS 和 CSRF 是两种不同的安全威胁，但它们都涉及到利用用户对网站的信任进行攻击。通过实施上述防范策略，可以显著降低这些攻击的成功率，提高Web应用的安全性。

TCP 三次握手 和 四次挥手

  • 三次握手 1

  • 四次挥手 11

  • 例子： 通过发送短信的方式交流 2

    三次握手 图解

    1. 第一次握手：是建立连接，客户端发送连接请求， 并传送规定的报文
    2. 第二次握手：服务端表示收到请求消息，并回传规定的报文
    3. 第三次握手：客户端收到服务器回传的报文信息，给服务器端再次发送数据包

    四次挥手 图解： 断开需要由我发起， 因为连接也是我发起的

    1. 第一次握手：客户端对服务器发送断开请求
    2. 第二次握手：服务器表示收到这次断开请求
    3. 第三次握手：服务器表示已经断开了
    4. 第四次握手：客户端断开连接

  • 真实图： 2

Last Updated:
Contributors: zhanghusheng