浏览器工作的宏观流程

浏览器架构发展

  1. 单进程
    早期的浏览器是单进程的，任务的处理都在一个进程上，进程上有可能有网络线程，页面线程等用以进行网络操作和页面渲染，但中间若是有任务出错就容易导致浏览器的奔溃。

  2. 多进程（早期）
    由于单进程可能导致的不稳定和不安全，然后就出现了多进程的架构，如早期的Chrome的架构，页面有单独的渲染进程，这样即使一个页面奔溃了也不会影响到别的页面，浏览器主进程等。而进程间可以通过IPC（进程间通信）进行信息的传递。
    image
    image

  3. 多进程（当前）
    现在Chrom的架构虽是多进程的，但和早期的架构比也有改进，将浏览器主进程的网络抽出了网络进程，还有对GPU支持的进程。
    image
    image
    我们在Chrome中‘设置’->'任务管理'也能看到：
    image

补充：进程(process)与线程(threads)的区别？
感觉看英文的话就一下就区分了，而单看中文就有点像。

  • 一个进程就是一个程序运行的实列。进程启动，系统会为期分配内存供其使用。
  • 而线程是依托与进程的，由进程启动和管理。
    image

数据是如何传输到浏览器的？

  1. 首先思考下，数据是如何在计算间传输的呢？
    都知道数据是通过网络在计算机中传输的，那具体些是怎么传输的呢？比如说，服务器和浏览是如何传输数据的呢？
    这时又该回想起《计算机网络原理》的内容了，回顾下TCP/IP四层模型：
    image

  2. 两个主机间要传送数据，那就得有相互的地址（比如说：ip），那它发送的数据，把目标IP,自己IP地址等加上组成了IP报文。通过IP协议，它们就能通过网络层进行连接了。但此时数据只知道在那些地址传，但还不知道去哪个应用。

  3. 应用要连接网络那它机占用端口，所以此时相同的道理，把应用端口号，目标应用端口等加上，通过UDP协议，主机间的应用就能通信了。但是UDP"管杀不管埋"，数据发出去它就不过管了。数据不可靠，但速度快。为了数据可靠，所以就有了TCP。

  4. TCP为了保证数据的可靠的传输，在传输开始通过“三次握手”建立传输，收到数据，还会对数据确认，发送确认数据包给发送端，发送端没收到就回触发重发机制等。然后传输完成后，还会“四次挥手”断开连接。
    image

浏览器如何发起HTTP请求

在浏览器地址栏中输入一个http网址，它是如何请求的呢？

  1. 在发送请求前，浏览器会先构建请求行。
  2. 基于上面TCP的内容，建立TCP连接，过程是“获取IP&端口” -> "等待TCP队列" -> "建立TCP连接"。（Chrome 有个机制，同一个域名同时最多只能建立 6 个 TCP 连接，所以同域名下超过6个要等待）
    image
  3. 建立HTTP连接，发送请求，主要包括请求行，请求头，请求体。我们可以随便抓个http的包看下：
    image
    image
  4. 服务器处理请求并响应请求，可以看下响应举例如下：image
    这里可能会遇到重定向的情况，就是状态码是300系列的，比如输入是http://xxx.xxx浏览器打开的却是https://xxx.xxx，输入http:baidu.com打开的却是http://www.baidu.com等都是因为重定向了。重定向的响应中会有Location字段，浏览器就会取该字段信息去访问它了。
  5. 当再次打开同一个链接的时候，它可能会使用缓存来帮助更快的页面加载，其过程如下：
    image

有几个字段可以注意下：

字段 作用
Connection:Keep-Alive 浏览器或者服务器在其头信息有该字段，则 TCP 连接在发送后将仍然保持打开状态
Location: https://www.baidu.com 状态码是要重定向的，浏览器获取 Location 字段中的地址，并使用该地址重新导航
Cache-Control:Max-age=2000 设置http缓存能使用的时长
Expires: Tue, 28 Feb 2022 22:22:22 GMT 设置http缓存过期的时间点
Content-Type: text/html 服务端返回指定文件的类型，如html文件若是text/html，它则会被解析渲染成页面，若是application/octet-stream，则就作文件下载了

浏览器的请求流程

在之前浏览器架构中我们可以知道，浏览主要有：

  • 浏览主进程（负责用户交互，界面显示，子进程管理等）。
  • 网络进程（主要负责网络资源的加载）
  • 渲染进程 （主要是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页）
  • GUP进程
  • 插件进程

用户在浏览地址栏输入地址后，这些进程是如何配合的呢？注：导航，用户发出URL到浏览器解析的过程。
image
具体分析下：

  1. 用户在地址栏输入非URL就会更据设置的默认搜索引擎拼凑得到搜索的URL，是URL就直接按URL处理，就是通过IPC将其发送给网络进程，页面开始加载。
  2. 网络进程中，会先做如下处理，然后等服务器返回信息：
    image
    网络进程收到服务器的响应，会进行判断
    • 若是服务返回的是一个重定向的响应，则浏览器进程根据location重新导航。
    • 判断返回的Content-Type，若是text/html则会将数据传递给创建的渲染进程进行渲染。
  3. 渲染进程拿到的数据都是文本，会通过一步步转换变为浏览器能识别使用的数据。
    image
  4. 在之前的布局过程中，已经获得了一个布局树，也知道每个元素的位置信息了。然后就要进行分层的操作了，比如dom节点中有z-index设置的，有裁剪的如overflow: scroll隐藏了部分的都会分层。分层好层了，才开始图层的绘制。
    分层
  5. 分层的好了，就开始栅格化，也就是将这些数据交给渲染进程中的合成线程开始真正的渲染了。栅格化的时候它不会把整个页面都一次给它处理掉,而是会把页面按视口的大小分成图块（tile），然后视口中，和视口附近的图块就会优先处理，合成线程发送绘制图块命令DrawQuad给浏览器进程。浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。image

当页面中的元素发生改变的时候，还会涉及到重排和重绘。如果发生了重排就会重新走一次完整的流程，如果是重绘的话，就不会有布局和分层的流程了，效率就会更高。

此文章主要作为浏览器工作原理与实践的相关笔记

  1. 浏览器工作原理与实践: https://time.geekbang.org/column/intro/216
  2. The Chromium Projects - Multi-process Architecture:https://www.chromium.org/developers/design-documents/multi-process-architecture/
  3. Inside look at modern web browser (part 1):https://developer.chrome.com/blog/inside-browser-part1/#browser-architecture
posted @ 2022-12-05 11:05  会飞的一棵树  阅读(97)  评论(0)  编辑  收藏  举报