从浏览器地址栏输入url到页面展示都发生了啥？-烟雨网

高频面试题：从浏览器地址栏输入url到页面展示都发生了啥？

以往当我们从浏览器输入框输入https://juejin.cn/的时候，回车，然后就会展示干货满满的文章，那么，从输入链接到展示文章的过程中究竟发生了啥，有这样的疑问的话，就接着往下看。

可以把从输入链接到展示页面的中间过程看做一个黑盒子，这个黑盒子里就是浏览器。

先看盒子里都有啥？

浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能
渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下
GPU进程：GPU 的使用初衷是为了实现 3D CSS 的效果，随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制
网络进程。主要负责页面的网络资源加载
插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

进程又是啥？

一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程。

进程中的任意一线程执行出错，都会导致整个进程的崩溃
线程之间共享进程中的数据
当一个进程关闭之后，操作系统会回收进程所占用的内存
进程之间的内容相互隔离，进程间数据通信需要（IPC）机制

线程又是啥？

线程是进程中的实际运行单位，是不能独立存在的，它是由进程来管理和启动的。

到这里就该开始正题了，从浏览器地址栏输入url到页面展示都发生了啥？

一、处理用户输入的字符串

主要进程：浏览器进程

用户输入的是搜索内容，则通过浏览器的默认搜索引擎进行搜索
比如在地址栏输入稀土掘金，地址栏解析成：

如果用户输入的符合URL规则
比如在地址栏输入https://juejin.cn/，地址栏为：

二、和后端建立请求通道

主要进程：网络进程
浏览器通过IPC将url发送给网络进程，网络进程进行真实的网络请求。

首先，判断本地是否有缓存，如果有的话，直接使用本地缓存。

否则，进行DNS查询，获取当前域名对应的真实的IP地址。

拿到真实的IP地址以后，会通过三次握手和服务器进行TCP的连接。然后，构建请求信息向后端发送请求。

服务端会返回两种主要的信息：

状态码status：当服务器返回301（永久重定向）和302（暂时重定向）时，客户端浏览器会从Location中读取需要重定向的链接，重新进行请求流程。
文件类型content-type: 当服务器返回的是application/octet-stream时，客户端浏览器会进行文件的下载，请求结束；如果返回的是text/html，浏览器认为是页面资源，会进行渲染流程。

三、渲染进程接受资源

主要进程：渲染进程

首先有个问题，需要开几个渲染进程？

如果：新打开的页面和之前的页面属于同一站点(相同的协议，相同的域名)，那么新页面会使用之前页面的渲染进程。

否则：会新建一个新的渲染进程，作为新打开页面的渲染进程。

当网络进程获取到响应头信息后，它会告诉浏览器进程，浏览器进程又会通过IPC通知渲染进程，渲染进程打开通道，让网络进程中的数据源源不断的传递过来，结束时告诉浏览器进程。

浏览器接到通知后，会更新浏览器界面状态，包括地址栏的URL安全锁、前进后退状态等信息。

这时，浏览器的渲染进程就拿到了网络资源，类似于工厂的生产车间拿到了原材料，开始网络资源的加工处理。

四、渲染场景

1、构建DOM树

浏览器无法直接解析服务端拿到的html资源，首先需要将其转换为浏览器可识别，并且可编辑的DOM树。DOM树是用来描述html资源的结构，以document作为根节点，根据嵌套结构构建真实的树。

假设html资源为：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <h3>title</h3>
        <p>phrase</p>
    </div>
</body>

</html>

当在浏览器控制台输入document的时候，就获取到了当前的DOM树：

2、样式计算

（1）将样式转换成浏览器认识的结构

在日常开发过程中，浏览器的样式可以通过link文件引入、在头部的style标签中定义或者通过内联的style标签写入，但是这些方式浏览器是不能直接识别或者操作的，那么，浏览器就会先将其转换成styleSheets的形式。该形式可以通过JavaScript中提供的方法进行获取和操作。

（2）将其中的快捷样式进行处理

我们发现其中还存在bolder、1rem和green这样的样式值。这里浏览器还需要将其进行computed的处理，其最终的值可以在开发工具中查看：

（3）根据继承和层叠关系计算各个节点样式

DOM树是树结构，父节点上定义的样式会被子节点继承，当然子节点也可以重写该样式。

DOM树又可以通过脱离文档流的方式对其进行层叠处理。

3、布局树

会通过遍历DOM树，将其中可见的部分添加到布局树上。

4、分层

真实的页面最终会像PS的图层结构一样，是由多张图层构成的。

新图层的产生会有以下两种情况：

层叠上下文
需要裁减的部分

<style>
    div {
        position: relative;
        font-size: 12px;
        color: gray;
        background-color: aqua;
    }
    h3 {
        position: absolute;
        width: 80px;
        height: 200px;
        border: 1px solid red;
        font-weight: bolder;
        font-size: 1rem;
        color: green;
        z-index: 1;
        background-color: bisque;
    }
    p {
        width: 100px;
        height: 300px;
        border: 1px solid red;
        transform: translateZ(10px);
        background-color: blueviolet;
    }
</style>

分层结果为：

可以看出，div，h3和p通过position以及css3的新属性，将其分为3层。