八股文-html

欢迎阅读 html 八股文

📌 html

1.1 <script> 标签中 defer 和 async 的区别

  • 普通 script
    会阻碍 HTML 的解析，只有在下载并执行完脚本后，HTML 才会继续解析。

  • async script

    • 在解析 HTML 的同时异步下载脚本。
    • 一旦下载完成会立即执行，可能会打断 HTML 的解析。
    • 脚本执行顺序不一定按照书写顺序。

  • defer script

    • 脚本异步下载，但不会阻塞 HTML 的解析。
    • 等 HTML 解析完成后再执行脚本。
    • 脚本会按照书写顺序依次执行。

1.2 从浏览器地址栏输入 URL 到请求返回发生了什么

当我们在浏览器地址栏输入一个 URL 并回车时，大致会经历以下几个阶段：

1. 解析 URL

  • 浏览器解析出 协议、主机、端口、路径 等信息。
  • 构造一个 HTTP 请求。

2. 缓存策略

3. DNS 域名解析

  • 将域名解析为对应的 IP 地址。

4. 建立 TCP 连接

  • 通过三次握手建立可靠的传输通道。
  • 为什么需要三次握手，两次不行吗？
    • 第一次握手：客户端确认自己的 发送能力。
    • 第二次握手：服务端确认自己的 接收能力和发送能力。
    • 第三次握手：客户端确认自己的 接收能力。

5. 发送 HTTP 请求

  • 浏览器向服务器发送 HTTP 报文（包括请求行、请求头、请求体等）。

6. 服务器处理请求并返回响应

  • 服务器处理请求逻辑，生成响应报文并返回给客户端。
  • 响应包含：状态码、响应头、响应体等。

7. 浏览器渲染页面

  1. 解析 HTML，构建 DOM 树。
  2. 解析 CSS，生成 CSSOM。
  3. 合并 DOM 与 CSSOM，生成渲染树。
  4. 布局（Layout）：计算元素位置和大小。
  5. 绘制（Paint）：将像素绘制到屏幕上。
  6. 执行 JS 脚本，处理事件循环，可能引发 重绘/回流。

👉 总结：
输入 URL → 解析 URL → 检查缓存 → DNS 解析 → TCP 三次握手 → HTTP 请求 → 服务器响应 → 浏览器渲染。