Web相关问题

  • 强制刷新页面：Ctrl + F5（清除缓存刷新）。

Web相关问题

客户端发送HTTP请求到服务器后发生了什么？

  • 当客户端（浏览器）发送一个请求到服务器时，服务器会创建一个 request 和 response 对象
  • 这些对象包含了请求的所有信息（headers, parameters等）和响应的所有信息

Forward的工作原理？

  • 当执行 forward 时，服务器不会向客户端发送任何响应
  • 相反，服务器会在内部将请求转发给另一个资源（JSP、Servlet 等）
  • 这个转发过程完全在服务器内部进行，客户端完全不知道这个过程
  • 只有最终处理完请求后，服务器才会将响应发送给客户端
客户端请求 -> Servlet A
                |
                v
            forward 到 Servlet B
                |
                v
            Servlet B 处理请求
                |
                v
            返回响应给客户端

与 Redirect 的区别？

  • Redirect 是告诉客户端"请去访问另一个 URL"
  • Forward 是服务器自己处理完请求后，再决定用哪个资源来生成响应

这种服务器端的转发机制有几个好处：

  1. 更安全，因为客户端不知道内部的处理过程
  2. 更高效，因为不需要额外的网络请求
  3. 可以保持 request 和 response 对象的状态
  4. 可以隐藏实际的资源位置

这就是为什么 forward 是在服务器端进行的，而不是在客户端进行的原因。

访问一个页面的过程？

访问一个页面的过程涉及多个步骤，从用户输入 URL 到页面最终渲染完成，背后经历了复杂的网络通信和浏览器处理。以下是详细的过程：

1. 用户输入 URL

• 用户在浏览器地址栏中输入 URL（例如 https://www.example.com）。
• 浏览器会检查输入的内容是否是有效的 URL，如果不是，可能会将其作为搜索关键字处理。

2. DNS 解析

• 浏览器需要将域名（如 www.example.com）解析为对应的 IP 地址。
• 过程：

  1. 浏览器检查本地缓存（如浏览器的 DNS 缓存）是否有该域名的 IP 地址。
  2. 如果没有，检查操作系统的 DNS 缓存（如 /etc/hosts 文件）。
  3. 如果仍未找到，向本地 DNS 服务器（通常由 ISP 提供）发送请求。
  4. 如果本地 DNS 服务器没有缓存，它会向根 DNS 服务器、顶级域（TLD）服务器和权威 DNS 服务器逐级查询，最终获取 IP 地址。
    • 解析完成后，浏览器会缓存该 IP 地址，以便后续访问。

3. 建立 TCP 连接

• 浏览器获取到服务器的 IP 地址后，会通过 TCP 协议与服务器建立连接。
• 过程：

  1. 三次握手：
    ◦ 客户端发送 SYN 报文到服务器。
    ◦ 服务器回复 SYN-ACK 报文。
    ◦ 客户端发送 ACK 报文，连接建立。
  2. 如果使用的是 HTTPS 协议，还会进行 TLS/SSL 握手，建立加密连接。

4. 发送 HTTP 请求

• 浏览器向服务器发送 HTTP 请求，请求页面的资源。
• 请求组成：
• 请求行：包含 HTTP 方法（如 GET）、路径（如 /index.html）和协议版本（如 HTTP/1.1）。
• 请求头：包含浏览器信息（如 User-Agent）、缓存策略（如 Cache-Control）等。
• 请求体（如果是 POST 请求）：包含提交的数据。

5. 服务器处理请求

• 服务器接收到请求后，会根据请求的路径和方法进行处理。
• 过程：

  1. 服务器解析请求，确定请求的资源。
  2. 如果需要，服务器会调用后端程序（如 PHP、Node.js）生成动态内容。
  3. 服务器将处理结果封装成 HTTP 响应。

6. 服务器返回 HTTP 响应

• 服务器将 HTTP 响应发送回浏览器。
• 响应组成：
• 状态行：包含状态码（如 200 OK）和协议版本。
• 响应头：包含内容类型（如 Content-Type: text/html）、缓存策略等。
• 响应体：包含页面的 HTML 内容或其他资源（如 CSS、JavaScript）。

7. 浏览器解析和渲染页面

• 浏览器接收到响应后，开始解析和渲染页面。
• 过程：

  1. 解析 HTML：
    ◦ 浏览器将 HTML 解析成 DOM（文档对象模型）树。
  2. 解析 CSS：
    ◦ 浏览器解析 CSS 文件或内联样式，生成 CSSOM（CSS 对象模型）树。
  3. 构建渲染树：
    ◦ 浏览器将 DOM 树和 CSSOM 树结合，生成渲染树（Render Tree）。
  4. 布局（Layout）：
    ◦ 浏览器计算渲染树中每个节点的位置和大小。
  5. 绘制（Paint）：
    ◦ 浏览器将渲染树的内容绘制到屏幕上。
  6. 执行 JavaScript：
    ◦ 如果页面中包含 JavaScript，浏览器会解析并执行它。
    ◦ JavaScript 可能会修改 DOM 或 CSSOM，触发重新布局和绘制。

8. 加载其他资源

• 页面中可能包含其他资源（如图片、CSS、JavaScript 文件），浏览器会发起额外的 HTTP 请求来加载这些资源。
• 这些资源的加载过程与上述步骤类似。

9. 页面加载完成

• 当所有资源加载完毕，页面渲染完成后，浏览器会触发 DOMContentLoaded 和 load 事件，表示页面已完全加载。

10. 后续交互

• 用户与页面进行交互（如点击按钮、滚动页面），浏览器会执行相应的 JavaScript 代码，动态更新页面内容。

总结

访问一个页面的过程可以分为以下几个主要阶段：

  1. 用户输入 URL。
  2. DNS 解析：将域名解析为 IP 地址。
  3. 建立 TCP 连接：通过三次握手与服务器建立连接。
  4. 发送 HTTP 请求：浏览器向服务器请求页面资源。
  5. 服务器处理请求：服务器生成并返回 HTTP 响应。
  6. 浏览器解析和渲染页面：解析 HTML、CSS，构建渲染树，绘制页面。
  7. 加载其他资源：加载图片、CSS、JavaScript 等资源。
  8. 页面加载完成：触发 DOMContentLoaded 和 load 事件。
  9. 后续交互：用户与页面进行动态交互。

静态网页和动态网页的区别？

静态网页和动态网页的核心区别在于内容生成方式和交互能力，具体对比如下：

  • 静态网页：
    • 内容生成：服务器直接返回预先编写好的固定HTML文件，内容在发布后不会自动变化。
    • 技术栈：HTML/CSS/JS，无需后端语言
    • 交互能力：有限（仅JS实现的简单交互）
    • ​数据来源​​：直接嵌入HTML中
    • 示例：企业官网、博客文章页
  • 动态网页：
    • 内容生成：由服务器或客户端实时生成，内容可变
    • 技术栈：依赖后端（如PHP/Python）或前端框架（如Vue/React）
    • 交互性：高（用户操作可动态更新内容）
    • ​数据来源​​：通常通过API从数据库获取
    • 示例：社交媒体、电商平台、实时仪表盘