前端铁铁们必看浏览器基础知识

古蓬莱掌管玉米的神
153 阅读8分钟

浏览器盒模型深入解析

W3C标准盒子模型 (box-sizing: content-box)

在标准W3C盒模型中，元素的width和height属性仅定义了内容区域（content area）的尺寸。当应用内边距（padding）、边框（border）时，这些值会增加到元素的实际宽度和高度上。例如：

div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
}

在这种情况下，div的实际宽度为：200px + 2 * 10px + 2 * 5px = 230px。

IE怪异盒子模型 (box-sizing: border-box)

IE怪异模式下的盒模型，元素的width和height包含内容区、内边距和边框。这意味着如果设置了相同的CSS属性，但使用了box-sizing: border-box，则上述例子中的div实际宽度仍为200px，因为内边距和边框会在内部减少可用的内容空间。

进程与线程的概念

  • 进程：是操作系统资源分配的基本单位，拥有独立的内存空间和其他系统资源。
  • 线程：是进程中执行计算的实体，是CPU调度的基本单位。同一进程内的多个线程共享该进程的资源，因此它们之间的通信和数据交换相对简单快捷。

并行性的好处

并行操作能够显著提升程序性能，特别是在多核处理器环境中。通过将任务分配给不同的核心或线程，可以同时处理多个任务，从而缩短整体执行时间。然而，并行编程也带来了挑战，如死锁、竞态条件等同步问题。

Chrome多进程架构详述

Chrome采用了一种称为“多进程架构”的设计，它增强了应用程序的安全性和稳定性。以下是Chrome的主要进程类型及其功能：

  • 浏览器主进程 (Browser Process)

    • 用户界面管理：负责渲染浏览器的UI元素，如工具栏、书签栏等。
    • 事件循环：处理用户的输入事件，比如点击链接或按下键盘键。
    • 子进程管理：创建和销毁其他类型的进程，并通过IPC（Inter-Process Communication）机制协调它们的工作。
    • 存储管理：处理所有与持久化存储相关的操作，如cookies、localStorage、IndexedDB等。

  • 渲染进程 (Renderer Process)

    • 每个标签页对应一个独立的渲染进程，确保单个页面崩溃不会影响整个浏览器或其他标签页。
    • 使用Webkit/Blink引擎进行HTML和CSS的解析及布局计算。
    • V8 JavaScript引擎执行JavaScript代码，支持异步编程模型（如Promises、async/await），提高响应速度。

  • 插件进程 (Plugin Process)

    • 为旧版Flash Player和某些第三方扩展提供安全沙箱环境，限制其对系统的访问权限。

  • GPU进程 (GPU Process)

    • 负责图形加速，特别是对于CSS3变换、动画效果、视频解码等功能，减轻CPU负担，提高渲染效率。
    • 支持硬件加速的API，如WebGL，使复杂的3D图形能够在网页上流畅运行。

页面加载过程详解

从用户输入URL开始，直到页面完全显示，浏览器经历了以下几个关键步骤：

  1. DNS查找：首先，浏览器需要确定服务器的IP地址。这一步骤可能涉及缓存查询或向DNS服务器发起请求。

  2. TCP连接建立：一旦获得IP地址，浏览器就会尝试与服务器建立TCP连接，通常使用HTTP协议，默认端口80；如果是HTTPS，则是443端口。

  3. 发送HTTP请求：建立连接后，浏览器发出GET请求获取指定资源（HTML文档）。

  4. 接收响应：服务器接收到请求后返回HTTP响应，其中包含了所请求的HTML文件以及其他必要的元信息（如状态码、头部信息）。

  5. 解析HTML：浏览器开始解析HTML文档，构建DOM树。在此过程中，可能会遇到外部资源（如样式表、脚本、图片等），触发额外的网络请求。

  6. 加载CSSOM：当遇到<link>标签引用的样式表时，浏览器会暂停构建DOM树，先加载并解析CSS文件，构造CSS对象模型（CSSOM）。这是因为样式规则决定了页面的外观，必须在渲染之前就位。

  7. 构建渲染树：结合DOM树和CSSOM，浏览器创建一个渲染树，它只包含可见元素，用于后续的绘制工作。

  8. 布局（Reflow）：根据渲染树中的节点，浏览器计算每个元素的确切位置和尺寸，这一过程称为“布局”或“reflow”。

  9. 绘制（Paint）：接下来，浏览器将渲染树转换成像素，形成屏幕上的图像。此阶段涉及到颜色填充、文本渲染、边框绘制等工作。

  10. 合成（Compositing）：最后，如果有分层的元素（如固定定位的元素、具有3D变换的元素），浏览器会将这些图层合成为最终的画面，并更新到屏幕上。

  11. 交互准备：随着页面加载完成，JavaScript事件监听器被绑定，页面变得可交互。此时，用户可以开始浏览、点击链接或提交表单等操作。

欧克。接下来当用户在输入一个url的时候，我们来想想网络这个线程发生在哪个进程上，没错，浏览器进程

网络线程与资源加载

1. 网络栈初始化

  • 浏览器启动时：当浏览器启动时，会创建一个或多个专门用于处理网络请求的线程，称为“网络线程”（Network Thread）。这些线程独立于渲染进程运行，确保网络操作不会阻塞用户界面或其他关键任务。

2. URL解析与重定向

  • 输入URL：用户在地址栏输入URL或点击链接后，浏览器首先需要解析这个URL，确定协议类型（如HTTP/HTTPS）、主机名、端口号以及路径。
  • 重定向处理：如果响应头中包含Location字段指示了新的URL，则浏览器会自动发起新的请求，直到找到最终的目标资源。

3. DNS查找

  • 检查缓存：浏览器首先检查本地DNS缓存是否有目标域名对应的IP地址记录。
  • 使用公共DNS服务：一些浏览器还允许用户配置使用特定的公共DNS服务（如Google Public DNS或Cloudflare）来提高解析速度或增强隐私保护。

4. 建立TCP连接

  • 选择最优路径：对于HTTP/1.1，浏览器在同一时间只能为每个域维持有限数量的并发TCP连接（通常是6个）。为了提高效率，浏览器会选择最优的连接路径，并尽量复用现有的连接。
  • TCP三次握手：为了建立可靠的数据传输通道，客户端和服务器之间需要完成TCP三次握手过程。
  • TLS握手（HTTPS）：如果是HTTPS请求，还需要额外进行安全层协商，包括交换加密密钥、验证证书等操作，以保证数据传输的安全性。

5. 发送HTTP请求

  • 构造HTTP请求：浏览器根据需要构建HTTP请求消息，其中包括请求行（方法、路径、版本）、请求头（如User-Agent、Accept等）以及可能存在的请求体。
  • 发送请求：通过已建立的TCP连接发送上述HTTP请求给服务器。

6. 接收并解析响应

  • 接收HTTP响应：服务器接收到请求后返回HTTP响应，其中包含了状态码、响应头和响应体。
  • 分块传输编码：对于大文件或流式内容，服务器可能会采用分块传输编码（Chunked Transfer Encoding），每次只发送一部分数据，浏览器则逐步拼接完整的响应。
  • 解压缩：如果响应体被压缩（如Gzip、Brotli），浏览器会在接收完毕后对其进行解压处理。

7. 资源调度与下载

  • 优先级管理：浏览器对不同类型的资源赋予不同的优先级，比如样式表通常会被视为高优先级，因为它们影响页面的整体布局；而图片和其他媒体文件则可能是低优先级。
  • 并发下载：浏览器能够并发下载多个资源，但受限于浏览器设置和服务器配置（如HTTP/1.1中的连接数限制）。HTTP/2和HTTP/3支持多路复用，可以在同一个TCP连接上同时传输多个资源。
  • 缓存机制：浏览器会根据响应头中的缓存指令（如Cache-Control、Expires）决定是否将资源存储到本地缓存中，以便在未来请求相同资源时直接从缓存读取，减少网络延迟。

8. 流式解析HTML

  • 增量解析：一旦开始接收HTML文档，浏览器并不会等待整个文档下载完成才开始解析。相反，它会以流的方式逐段解析已接收到的内容，并尽可能早地开始构建DOM树。
  • 暂停解析：当遇到外部资源（如<script>标签中的JavaScript代码或<link>标签中的样式表）时，HTML解析可能会暂时停止，等待这些资源加载完成。

9. 处理异步资源

  • 预加载扫描器：即使HTML解析器因外部资源而暂停，浏览器仍会继续扫描HTML文档，寻找其他可以提前加载的资源（如图片、字体等），并通过网络线程尽早发起请求。
  • 异步JavaScript执行：对于标记为async或defer的脚本，浏览器可以在不阻塞HTML解析的情况下异步加载并执行这些脚本。
avatar
文章
阅读
粉丝