浏览器原理

Sunny947
94 阅读4分钟

浏览器（Chrome）的架构

不同的浏览器采用了不同的架构模式，这里并不存在标准，下面以 Chrome 为例进行说明：

Chrome 采用多进程架构，其顶层存在一个浏览器进程（Browser Process）用以协调浏览器的其它进程

进程你可以理解为一个车间，线程就是车间里的一个个员工，一个车间可以有一个或多个员工

主要进程

  • 浏览器进程（Browser Process）：

    1. 负责地址栏、书签栏、前进后退按钮等部分的工作
    2. 负责处理浏览器的一些不可见的底层操作，比如网络请求和文件访问

  • 渲染进程（Renderer Process）：负责运行应用程序的用户界面，网页展示相关的所有工作

  • 插件进程（Plugin Process）：负责控制一个网页用到的所有插件，比如 flash

  • GPU进程（GPU Process）：负责处理整个应用程序的GPU任务

多进程架构的优缺点

优点：

  1. 某一渲染进程出问题不会影响其它进程
  2. 更为安全，在系统层面上限定了不同进程的权限

缺点：

进程的内存消耗。由于不同进程间的内存不共享，不同进程的内存常常需要包含相同的内容

浏览器渲染原理

当我们在web浏览器中输入 URL 时，具体发生了什么？

  1. URL解析：浏览器首先解析URL，分解成协议（例如HTTP、HTTPS）、主机（域名，例如www.example.com）、端口（如果没有明确指定，则使用默认端口，HTTP默认端口为80，HTTPS默认端口为443）、路径和查询参数等组成部分。

  2. DNS解析：

    • 一旦浏览器解析出主机名（域名），它会将主机名发送到本地DNS解析器。
    • 如果本地DNS缓存中存在对应主机名的IP地址，浏览器将会直接使用缓存的IP地址。
    • 如果没有缓存或者缓存已经过期，浏览器将向本地DNS解析器发起查询请求，请求该主机名对应的IP地址。
    • 如果本地DNS解析器有对应主机名的IP地址缓存，则直接返回给浏览器。否则，本地DNS解析器将向根域名服务器发起递归查询，依次向下查询，直到找到对应的IP地址。

  3. 建立TCP连接：浏览器通过TCP（传输控制协议）与服务器建立连接。在建立连接之前，浏览器会执行三次握手，即客户端向服务器发送SYN包（同步请求），服务器接收到后回复ACK包（确认），然后服务器也向客户端发送SYN包和ACK包，客户端接收到后回复ACK包，建立连接成功。

  4. 发送HTTP请求：浏览器向服务器发送HTTP请求，包括请求行（包括请求方法、路径等）、请求头（如User-Agent、Accept等）、请求体（对于POST请求）等信息。

  5. 服务器处理请求：服务器接收到HTTP请求后，根据请求的内容进行处理。这可能涉及到动态生成网页内容、从数据库中检索数据、执行后端逻辑等。

  6. 服务器返回响应：服务器处理完请求后，向浏览器发送HTTP响应。响应包括状态码（表示请求的处理结果，如200表示成功，404表示未找到等）、响应头（如Content-Type、Content-Length等）、响应体（包含HTML、CSS、JavaScript等网页内容）等信息。

  7. 浏览器渲染页面（可看详细版）：

    • 浏览器接收到服务器返回的HTML、CSS、JavaScript等资源后，会进行页面渲染。
    • 首先，浏览器会解析HTML文档，构建DOM（文档对象模型）树，表示文档的结构。
    • 然后，浏览器会解析CSS样式表，构建CSSOM（CSS对象模型）树，表示样式的结构。
    • 接着，浏览器将DOM树和CSSOM树结合起来，构建渲染树（Render Tree）。
    • 最后，浏览器根据渲染树来绘制页面，并将其显示在浏览器窗口中。

  8. 断开TCP连接

    页面加载完成后，或者在超时时间内未能接收到响应时，浏览器会断开与服务器的TCP连接，释放资源。

    这个过程通常涉及四次挥手：

    1. 客户端向服务器发送一个FIN包，表示客户端没有数据要发送了。
    2. 服务器接收到FIN包后，回复一个ACK包，表示接收到了请求，并准备关闭连接。
    3. 服务器发送一个FIN包给客户端，表示服务器没有数据要发送了。
    4. 客户端接收到服务器的FIN包后，回复一个ACK包，表示接收到了请求，并准备关闭连接。
avatar
文章
阅读
粉丝