荐阅读：

阿里架构师精选Nginx+Redis+Sping+SpringBoot源码级PDF文档分享

微服务+Docker完美教程，被阿里架构师汇集到这2份文档里面了！

引言

对于面试常问的从浏览器输入 URL 到页面展示过程发生了什么？，我想大家都或多或少能说出一二。但是，其实这个问题很有深度，而你是否回答的有深度，在很大程度上会影响到面试官对你的印象。

并且，网上各种资料都是浅尝辄止地讲解这个过程，经常会出现今天看到这个版本，明天看到另一个版本地情况。所以，这次我们就来深入浅出一下这整个过程~

一、Chrome 多进程架构

首先，在开始讲解整个过程前，我们需要认识一下 Chrome 多进程架构。因为，从浏览器输入 URL 到页面渲染的整个过程都是由 Chrome 架构中的各个进程之间的配合完成。

Chrome 的多进程架构：

• 浏览器进程，它负责用户界面（地址栏、菜单等等）、子进程的管理（例如，进程间通信和数据传递）、存储等等
• 渲染进程，它负责将接收到的 HTML 文档和 JavaScript 等转化为用户界面
• 网络进程，它负责网络资源的请求，例如 HTTP请求、WebSocket 模块
• GPU（图形处理器）进程，它负责对 UI 界面的展示
• 插件进程，它负责对插件的管理

二、过程详解

2.1 解析输入

发生这个过程的前提，用户在地址栏中输入了 URL，而地址栏会根据用户输入，做出如下判断：

• 输入的是非 URL 结构的字符串，则会用浏览器默认的搜索引擎搜索该字符串
• 输入的是 URL 结构字符串，则会构建完整的 URL 结构，浏览器进程会将完整的 URL 通过进程间通信，即 IPC，发送给网络进程

2.2 请求过程

在网络进程接收到 URL 后，并不是马上对指定 URL 进行请求。首先，我们需要进行 DNS 解析域名得到对应的 IP，然后通过 ARP 解析 IP 得到对应的 MAC（Media Access Control Address）地址。

域名是我们取代记忆复杂的 IP 的一种解决方案，而 IP 地址才是目标在网络中所被分配的节点。MAC 地址是对应目标网卡所在的固定地址。

1. DNS 解析

而 DNS 解析域名的过程分为以下几个步骤：

• 询问浏览器 DNS 缓存
• 询问本地操作系统 DNS 缓存（即查找本地 host 文件）
• 询问 ISP（Internet Service Provider）互联网服务提供商（例如电信、移动）的 DNS 服务器
• 询问根服务器，这个过程可以进行递归和迭代两种查找的方式，两者都是先询问顶级域名服务器查找

2. 通信过程

首先，建立 TCP 连接，即三次握手过程：

• 客户端发送标有 SYN 的数据包，表示我将要发送请求。
• 服务端发送标有 SYN/ACK 的数据包，表示我已经收到通知，告知客户端发送请求。
• 客户端发送标有 ACK 的数据包，表示我要开始发送请求，准备被接受。

然后，利用 TCP 通道进行数据传输：

• 服务端接收到数据包，并发送确认数据包已收到的消息到客户端，不断重复这个过程
• 客户端在发送一个数据包后，未接收到服务端的确定消息，则重新发送该数据包，即 TCP 的重发机制
• 当接收完所有的数据包后，接收端会按照 TCP 头中的需要进行排序，形成完整的数据

最后，断开 TCP 连接，即四次握手过程：

• 客户端发送请求，申请断开连接，进入等待阶段，此时不会发送数据，但是会继续接收数据。
• 服务端接收请求后，告知客户端已明白，此时服务端进入等待状态，不会再接收数据，但是会继续发送数据。
• 客户端收到后，进入下一阶段等待。
• 服务端发送完剩余的数据后，告知客户端可以断开连接，此时服务端不会发送和接收数据。
• 客户端收到后，告知服务端我开始断开连接。
• 服务端收到后，开始断开连接。

而这整个过程的客户端则是网络进程。并且，在数据传输的过程还可能会发生的重定向的情况，即当网络进程接收到状态码为 3xx 的响应报文，则会根据响应报文首部字段中的 Location 字段的值进行重新向，即会重新发起请求

3. 数据处理

当网络进程接收到的响应报文状态码，进行相应的操作。例如状态码为 200 OK 时，会解析响应报文中的 Content-Type 首部字段，例如我们这个过程 Content-Type 会出现 application/javascript、text/css、text/html，即对应 Javascript 文件、CSS 文件、HTML 文件。

详细的 MIME 类型讲解可以看 MDN

2.3 创建渲染进程

当前需要渲染 HTML 时，则需要创建渲染进程，用于后期渲染 HTML。而对于渲染进程，如果是同一站点是可以共享一个渲染进程，例如 a.abc.com 和 c.abc.com 可以共享一个渲染渲染进程。否则，需要重新创建渲染进程

需要注意的是，同站指的是顶级域名和二级域名相等

2.4 开始渲染

在创建完渲染进程后，网络进程会将接收到的 HTML、JavaScript 等数据传递给渲染进程。而在渲染进程接收完数据后，此时用户界面上会发生这几件事：

• 更新地址栏的安全状态
• 更新地址栏的 URL
• 前进后退此时 enable，显示正在加载状态
• 更新网页

2.5 渲染过程

大家都知道页面渲染的过程也是面试中单独会考的点，并且时常会由这个点延申出另一个问题，即如何避免回流和重绘。

渲染过程，是整个从理器输入 URL 到页面渲染过程的最后一步。而页面渲染的过程可以分为 9 个步骤：

• 解析 HTML 生成 DOM 树
• 解析 CSS 生成 CSSOM
• 加载或执行 JavaScript
• 生成渲染树（Render Tree）
• 布局
• 分层
• 生成绘制列表
• 光栅化
• 显示

2.5.1 构建 DOM 树

由于网络进程传输给渲染进程的是 HTML 字符串，所以，渲染进程需要将 HTML 字符串转化成 DOM 树。例如：

需要注意的是这个 DOM 树不同于 Chrome-devtool 中 Element 选项卡的 DOM 树，它是存在内存中的，用于提供 JavaScript 对 DOM 的操作。

2.5.2 构建 CSSOM

构建 CSSOM 的过程，即通过解析 CSS 文件、style 标签、行内 style 等，生成 CSSOM。而这个过程会做这几件事：

• 规范 CSS，即将 color: blue 转化成 color: rgb() 形式，可以理解成类似 ES6 转 ES5 的过程
• 计算元素样式，例如 CSS 样式会继承父级的样式，如 font-size、color 之类的。

CSS Object Model 是一组允许用 JavaScript 操纵 CSS 的 API。详细 API 讲解可以看 MDN

2.5.3 加载 JavaScript

通常情况下，在构建 DOM 树或 CSSOM 的同时，如果也要加载 JavaScript，则会造成前者的构建的暂停。当然，我们可以通过 defer 或 sync 来实现异步加载 JavaScript。虽然 defer 和 sync 都可以实现异步加载 JavaScript，但是前者是在加载后，等待 CSSOM 和 DOM 树构建完后才执行 JavaScript，而后者是在异步加载完马上执行，即使用 sync 的方式仍然会造成阻塞。

而 JavaScript 执行的过程，即编译和运行 JavaScript 的过程。由于 JavaScript 是解释型的语言。所以这个过程会是这样的：

• 针对每句代码进行分行处理，即 Token 化
• 根据 Token，生成 AST（Abstract Sytanx Tree) 抽象语法树和创建上下文
• 解释器解析和执行 AST，生成字节码。
• 编译器针对需要反复执行的代码，生成对应的机器码，提高运行效率

2.5.4 生成渲染树（Render Tree）

在有了 DOM 树和 CSSOM 之后，需要将两者结合生成渲染树 Render Tree，并且这个过程会去除掉那些 display: node 的节点。此时，渲染树就具备元素和元素的样式信息。

2.5.5 布局

根据 Render Tree 渲染树，对树中每个节点进行计算，确定每个节点在页面中的宽度、高度和位置。

需要注意的是，第一次确定节点的大小和位置的过程称为布局，而第二次才被称为回流

2.5.6 分层

由于层叠上下文的存在，渲染引擎会为具备层叠上下文的元素创建对应的图层，而诸多图层的叠加就形成了我们看到的一些页面效果。例如，一些 3D 的效果、动画就是基于图层而形成的。

值得一提的是，对于内容溢出存在滚轮的情况也会进行分层

2.5.7 生成绘制列表

对于存在图层的页面部分，需要进行有序的绘制，而对于这个过程，渲染引擎会将一个个图层的绘制拆分成绘制指令，并按照图层绘制顺序形成一个绘制列表。

2.5.8 光栅化

有了绘制列表后，渲染引擎中的合成线程会根据当前视口的大小将图层进行分块处理，然后合成线程会对视口附近的图块生成位图，即光栅化。而渲染进程也维护了一个栅格化的线程池，专门用于将图块转为位图。

栅格化的过程通常会使用 GPU 加速，例如使用 wil-change、opacity，就会通过 GPU 加速显示

2.5.9 显示

当所有的图块都经过栅格化处理后，渲染引擎中的合成线程会生成绘制图块的指令，提交给浏览器进程。然后浏览器进程将页面绘制到内存中。最后将内存绘制结果显示在用户界面上。

而这个整个从生成绘制列表、光栅化、显示的过程，就是我们常说的重绘的过程

结语

整个浏览器输入 URL 到页面渲染的过程涉及到的知识点非常广，如 Chrome 多进程的架构、HTTP 通信过程、浏览器解析 JavaScript 过程、浏览器绘制页面过程以及一些计算机的基础知识等等，并且，这整个过程的分析其实和 Chrome-devtools 密切相关，所以很好的使用 Chrome-devtools 是非常重要的，后续应该会出一篇关于使用 Chrome-devtools 的指南。当然，本篇文章仍然存在诸多不足，欢迎提 issue ~

作者：五柳
链接：https://juejin.im/post/5e871ee56fb9a03c832b0013

1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2 HTML结构

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

​标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器​

​标签：body

说明：用来定义HTML网页文档的主体区域​

​标签：meta

说明：用来描述HTML网页文档的属性​

​标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码​

​2.1 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.1.1 双标签

<html></html>

2.1.2 单标签

<br>

2.1.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

<head>
</head>
<body>    
</body>

3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

4 head标签

4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta标签

是单标签，用来描述HTML网页文档的属性

4.2.1 name属性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

4.2.2 http-equiv属性

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">

4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>

4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

5 文本标签

5.1 标题标签

是双标签，h是header的缩写

<h1>h1标签：一级标题</h1>
<h2>h2标签：二级标题</h2>
<h3>h3标签：三级标题</h3>
<h4>h4标签：四级标题</h4>
<h5>h5标签：五级标题</h5>
<h6>h6标签：六级标题</h6>

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用<h>标签的主要意义是告诉搜索引擎这是一段文字的标题

5、<h1>在一个页面最多只能有一个，不要用多个

5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

特点：

1、独占一行

2、段落与段落之间，存在间隙

5.3 换行标签

是单标签，br是break的缩写

<p>这是一段<br>文字</p>

特点：

1、强制换行

2、单标签

5.4 水平线标签

是单标签，hr是horizon地平线的缩写

<p>这是一段文字</p>
<hr>
<p>这是一段文字</p>

特点：

1、在页面中显示一条水平线

2、单标签

6 文本格式化标签

<b>这是一段文字</b>
<strong>这是一段文字</strong>
<br>
<u>这是一段文字</u>
<ins>这是一段文字</ins>
<br>
<i>这是一段文字</i>
<em>这是一段文字</em>
<br>
<s>这是一段文字</s>
<del>这是一段文字</del>

特点：

1、不会独占一行

2、推荐使用标签2所在列标签

6.1 上标标签

sup是superscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下标标签

sub是subscripted这个单词的缩写

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代

7 媒体标签

7.1 图片标签

<img src="./001.jpg" alt="">

img标签常见属性：

只设置宽或高，会自动等比缩放，宽高只需要数字，不需要'px'

<img src="./001.jpg" alt="图片加载失败" title="这是程序兔" width="200" height="200">

绝对路径：指目录下的绝对位置，比如从根目录开始的路径，或完整的网络地址

相对路径：从当前文件开始出发找目标文件的过程

7.2 音频标签

<audio src="music.mp3" controls autoplay loop></audio>

audio标签常见属性：

支持mp3、wav、ogg三种音频格式

7.3 视频标签

<video src="video.mp4" controls loop autoplay></video>

支持mp4、webm、ogg三种视频格式

7.4 超链接标签

超链接，是双标签，实现各个独立页面之间进行跳转，可以跳去站外也可以在站内之间跳转

<a href="链接地址">文本或图片</a>

站外跳转，采用绝对路径

<a href="http://www.baidu.com" target="_blank">百度</a>

站内跳转，采用相对路径

<!-- a页面 -->
<a href="b.html">跳去b页面</a>

<!-- b页面 -->
<p>b页面</p>

页面内跳转

<a href="#ms">美食</a>
<a href="#jd">景点</a>
<h3 id="ms">推荐美食</h3>
<!-- 省略n个br标签 -->
<br>
<h3 id="jd">推荐景点</h3>

target属性值

target属性值一般使用_self（默认）和_blank

8 列表标签

8.1 无序列表

<ul type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

解释：

1、ul，unordered lists，无序列表，li，list item，列表项

2、ul标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="属性值">
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

解释：

1、ol，ordered lists，有序列表，li，list item，列表项

2、ol标签子标签只允许是li标签

3、li标签可以包含任意内容

type属性值

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定义列表

<dl>
    <dt>名词</dt>
    <dd>描述</dd>
    ……
</dl>

解释：

1、dl，definition lists，自定义列表；dt，definition term，自定义列表组；dd，definition description，自定义列表描述

<dl>
    <dt>称呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格标签

9.1 表格基本结构

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

解释：

1、tr，table row，表格行；td，table data cell，表行单元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格标签属性

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格标题标签

<caption>标题内容</caption>，位于表格内第一行

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表头单元格标签

<th></th>，th，table header cell，表头单元格

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <tr>
        <th>序号</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格语义化结构标签

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
        </tr>
    </tfoot>
</table>

9.6 合并单元格

<td rowspan="跨越的行数"></td>

<td colspan="跨越的列数"></td>

<table border="1" width="200" height="50">
    <caption>数字</caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>金额</th>
            <th>金额</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>汇总</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表单标签

10.1 form标签

双标签，包裹其它表单标签

<form>
    // 表单
</form>

form标签的常用属性

name属性

一个页面中，表单可能不止一个。name属性，用来区分不同的表单

<form name="myForm"></form>

method属性

用来指定表单数据使用哪种提交方式给后端

<form method="get"></form>

action属性

用来指定表单数据提交到哪个地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target属性

该属性跟a标签的target属性一样，其属性值也是四个，一般情况只用到_blank属性值，默认也是这个值

<form target="_blank"></form>

enctype属性

<form enctype="multipart/form-data"></form>

10.2 input标签

input是单标签

<input type="表单类型">

单行文本框常用属性

<form>
    <input type="text" value="默认值" size="长度" maxlength="可输入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密码文本框常用属性

密码文本框常用属性和单行文本框常用属性相同

<input type="password" value="默认值" size="长度" maxlength="可输入字符">

<form>
    <label>密码：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

单选框

<input type="radio" name="组名" value="取值" checked="checked">

<form>
    性别：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

复选框

复选框和单选框的属性都相同，区别复选框可以多选

<form>
    爱好：
    <input type="checkbox" name="hobby" value="篮球" checked>篮球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="台球">台球
</form>

普通按钮

<input type="button" value="取值">

<form>
    <input type="button" value="普通按钮">
</form>

<button>普通按钮</button>

区别：

1、input是单标签，button是双标签

2、button标签的信息除了文本，还可以是图像、其它标签等

3、button有type属性，属性值可以是button、submit、reset等

提交按钮

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把对应表单数据提交给后端服务器

重置按钮

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

点击重置后，所在form表单里所有内容被清空了

文件上传

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名称" cols="列数" rows="行数"></textarea>

<form>
    <textarea name="文本名称" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>选项内容</option>
    <option>选项内容</option>
</select>

下拉列表标签是为了节省页面空间

select标签属性

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18岁以下</option>
        <option>18-28岁</option>
        <option>28-38岁</option>
        <option>38岁以上</option>
    </select>
</form>

option标签属性

<form>
    <select name="age" size="5">
        <option value="1">18岁以下</option>
        <option value="2" disabled="disabled">18-28岁</option>
        <option value="3" selected="selected">28-38岁</option>
        <option value="4">38岁以上</option>
    </select>
</form>

11 框架标签

<iframe src="URL" width="数值" height="数值"></iframe>

框架标签常用属性

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文档禁止被嵌入

12 标签类型

HTML标签分为三种，行内标签、块级标签和行内块级标签。

12.1 行内标签

特点：

1、在页面内只占据刚好能包裹自己内容的空间

2、没有宽高，内容多大就多大，行内标签不能嵌套块级标签（a标签除外）

3、行内标签设置宽高无效，可以对行高line-height进行设置

4、可以设置外边距margin和内边距padding，但只对左右边距有效果，上下无效

5、常见行内标签span、a、strong、ins、del、br等

span标签

双标签，行内标签，本身没有固定样式

<p>我是<span>中国人</span></p>

12.2 块级标签

特点：

1、独占一行

2、高度、宽度、外边距、内边距都可以设置生效

3、宽度默认是父级宽度的100%

4、是一个容器盒子，可以嵌套多层子级行内标签、块级标签，文本类块级标签除外

5、常见块级标签div、p、h1~h6、ol、ul、li等

div标签

双标签，块级标签，本身没有固定样式

<!-- 头部区域 -->
<div></div>
<!-- 内容区域 -->
<div></div>

12.3 行内块级标签

特点

1、在页面内只占据刚好能包裹自己内容的空间

2、高度、宽度、外边距、内边距都可以设置生效

3、常见块级标签img、input、td

12.4 标签类型转换

通过css样式display属性转换，这是css的内容