当你在浏览器输入URL，它到底做了什么

有头发的小D
1,309 阅读5分钟

前言

作为一名前端开发，每天都跟浏览器打交道了，这年头可以说如果你对浏览器没点深入的了解你都不好意思。今天笔者就来说说浏览器的一些原理。具体我们来通过一个线索来把东西都串起来：当你在浏览器敲入一个URL，浏览器是怎么把内容呈现给我们的。

一.关于浏览器进程

在这里我假设你已经知道了什么是进程，以及进程跟线程之间的关系。那么浏览器运行的时候其实是会产生多个进程的，通常他将包括以下几个进程：

这几个进程到底是干什么用的呢？

  • 浏览器进程。浏览器总司令。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能
  • 渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页。这个进程就是我们运行渲染页面和运行JavaScript的核心进程了。因为网上的内容千奇百怪，黑白难分，浏览器出于安全考虑，将渲染进程运行在沙箱模式下
  • GPU 进程。用来实现3d css 效果的
  • 网络进程。主要负责页面的网络资源加载
  • 插件进程。用来运行浏览器插件的

Tips:如何查看浏览器上开了哪些进程？打开chrome浏览器，点击右上角->更多工具->任务管理器

接下来我们可以进入正题了

二. 从URL到页面展示

1.输入URL

首先我们打开浏览器之后，浏览器进程就可以接受用户的操作了，这时候我们输入：

www.baidu.com

然后回车。浏览器发现这是个网址，于是，他将这个网址丢给了网络进程。同时，因为这是个地址，那将意味着当前页面要被替换了，于是浏览器对当前页面发出了 beforeunload 事件，tab开始转loading，

2.识别IP地址，发送请求

  • 构造请求，发送

    • 构造HTTP请求，请求包含请求头，请求体

    • 匹配缓存

      浏览器是有缓存的，所以构造请求头之后会先看本地是否有缓存，缓存策略是否有效。无效则会发送请求。

    • 排队

      一般上，浏览器对于同一个域名只能同时发送6个请求，所以如果当前请求数已经达到6个，他还得排个队

    • tcp三次握手

      排到了，由于HTTP是基于tcp的，所以这里还有个三次握手的过程。

    • 服务器响应

      请求发送过去后，服务器开始处理。处理完之后服务器将返回请求响应头，以及响应体

    • 通知浏览器进程

      网络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程

3.浏览器进程通知渲染进程

  • 浏览器进程根据响应头Content-type做处理，如果是text/html，则发送“提交导航 (CommitNavigation)”消息到渲染进程；

  • 渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的方式是直接和网络进程建立数据管道；

  • 最后渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页面数据了”。

  • 浏览器进程接收到渲染进程“提交文档”的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

4.渲染进程从网络进程接收数据并解析

渲染进程拿到数据后，大致会做一下几个事情：

  1. 预览整个dom,发现有css和js标签的，提前向网络进程发出请求

  2. 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。 这里面我建议大家了解下编译原理。浏览器使用状态机将dom文本经过token解析、语法解析、生成语法树三个步骤生成dom对象结构。

  3. 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。

    在过程2和3中，dom的解析是由上至下的，遇到css和js时，会先等待css和js下载并解析完才会继续解析dom

  4. 创建布局树，并计算元素的布局信息。

  5. 对布局树进行分层，并生成分层树。

  6. 为每个图层生成绘制列表，并将其提交到合成线程。

  7. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。

  8. 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。

  9. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

结语：

浏览器从url到展示页面大致上来说是三个主要阶段：1.浏览器进程接收用户输入 2.网络进程发出请求，拿到响应数据 3.渲染进程解析内容。大家要重点关注的是这几个进程的配合步骤、以及缓存机制和渲染机制。最后，整个流转过程已经完成了。

再附上一张完整的流程图：

avatar
文章
阅读
粉丝