URL 回车后发生了什么？
更新日期:
URL 回车后的概况
1、建立 TCP 连接
浏览器从 URL 中提取出 “服务器 IP + 端口号”，建立一条与服务器间的 TCP 连接
- 提取服务器的主机名 host（即域名）、端口号
- host 转换成服务器 IP 地址（先 hosts，后 DNS）
- 依据 “服务器IP+端口号” 与服务器建立一条 TCP 连接
2、浏览器与服务器通过 HTTP 报文进行通信
- 浏览器向服务器发送一条 HTTP 请求报文
- 服务器向浏览器回送一条 HTTP 响应报文
3、浏览器显示 web 页面
建立 TCP 连接
1、在 HTTP 客户端向 HTTP 服务器发送报文之前，需要用 IP+端口号，在客户端和服务器之间建立一条 TCP/IP 连接
- TCP：传输控制协议 Transmission Control Protocol
- IP：网际协议 Internet Protocol
2、因特网本身，是基于 TCP/IP 的（全世界的计算机和网络设备，层次化分组交换网络协议）
- TCP/IP 隐藏了网络和硬件的特点及弱点，使计算机和网络可以可靠地通信
- HTTP 协议位于 TCP 之上，TCP 则位于 IP 之上
- 在TCP中，需要知道 “服务器的IP地址” 和 “服务器上运行特定软件相关的 TCP 端口号”
3、资源的地址 URL，可提供 IP 和 端口号
- URL 两种形式：数字形式的 IP 地址、文本形式的域名（域名也称主机名）
- 域名是 IP 地址的人性化称呼
- 域名服务 DNS（Domain Name Service）机制：将域名（主机名）转换为 IP 地址
显示 Web 页面
准备工作：下载
打开一个网页，需要浏览器发送很多次 HTTP Request。当在浏览器输入 URL 后，比如 http://anjia.github.io/ 时
- 浏览器先发送一个 Request 去获取 http://anjia.github.io/ 的 HTML，服务器把 HTML 代码 Response 给浏览器
- 浏览器分析 Response 中的 HTML，若发现其中引用了很多其他文件，比如图片，CSS文件，JS文件等，浏览器会自动再次发送 Request 去获取它们。
等所有的文件都下载成功后，网页就被显示出来了。
HTML 页面渲染
浏览器加载 HTML 页面时的工作流程如下：
1、解析 HTML 构建 Dom 树
- 渲染引擎解析 HTML 文档，将 HTML 标签 转化成 Dom 节点内容树
2、构建渲染树，即 Render 树
- 解析CSS（包括外部 CSS文件，样式元素），据 CSS 选择器计算出节点的样式，创建另一棵树-渲染树，Render 树
- 解析CSS 文件时的优先级：浏览器默认样式 < 自定义样式 < 页面内样式
- 每一个节点是一个渲染对象，
3、布局渲染树，Layout the render tree
- 从根节点递归调用，计算每个元素的大小、位置等，计算每个节点在屏幕上的精确坐标
- 它和 Dom树有对应关系，但不会一一对应，因为有的 Dom节点是display:none 就不显示，有时渲染树也会自己补充些节点
4、绘制渲染树
- 遍历渲染树，每个 node节点使用 UI后端层 来绘制
- 浏览器在屏幕上“画”出所有渲染树的节点，画即绘制，painting the render tree