网页加载全过程

过程概述

• 浏览器查找域名对应的 IP 地址；

• 浏览器根据 IP 地址与服务器创建 socket 链接；

• 浏览器与服务器通讯： 浏览器请求，服务器处理请求；

• 浏览器与服务器断开链接。

查找域名对应IP地址

访问服务器须要先知道服务器的ip地址，因此第一步是经过 DNS 把域名解析成一个 IP 地址, DNS 具体的查找过程：（浏览器缓存->系统缓存->路由器缓存）

1. 浏览器搜索本身的 DNS 缓存（维护一张域名与 IP 地址的对应表）；
2. 搜索操做系统中的 DNS 缓存（维护一张域名与 IP 地址的对应表）；
3. 搜索操做系统的 hosts 文件（ Windows 环境下，维护一张域名与 IP 地址的对应表）；
4. 操做系统将域名发送至 LDNS（本地区域名服务器），LDNS 查询 本身的 DNS 缓存（通常查找成功率在 80% 左右），查找成功则返回结果，失败则发起一个迭代 DNS 解析请求：

创建链接（TCP的三次握手）

1. 主机向服务器发送一个创建链接的请求；

2. 服务器接到请求后发送赞成链接的信号；

3. 主机接到赞成链接的信号后，再次向服务器发送了确认信号 ;

⚠️注意：这里的三次握手中主机两次向服务器发送确认，第二次是为了防止已失效的链接请求报文段传至服务器致使错误。

网页请求与构建

请求

1. 浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等；

2. 服务器接到请求后，会根据 HTTP 请求中的内容来决定如何获取相应的 HTML 文件；

3. 服务器将获得的 HTML 文件发送给浏览器；

4. 在浏览器尚未彻底接收 HTML 文件时便开始渲染、显示网页；

5. 在执行 HTML 中代码时，根据须要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML ；

页面构建

1. HTML代码转化为DOM(DOM Tree)

2. CSS代码转化成CSSOM（CSS Object Model）

3. 结合DOM和CSSOM，生成一棵渲染树（包含每一个节点的视觉信息）(Render Tree)

4. 生成布局（layout），即将全部渲染树的全部节点进行平面合成

5. 布局绘制（paint）在屏幕上

断开链接(TCP的四次挥手)

1. 主机向服务器发送一个断开链接的请求；

2. 服务器接到请求后发送确认收到请求的信号；(此时服务器可能还有数据要发送至主机)

3. 服务器向主机发送断开通知；(此时服务器确认没有要向主机发送的数据)

4. 主机接到断开通知后断开链接并反馈一个确认信号，服务器收到确认信号后断开链接；