从输入url到页面加载完成过程详解

从输入url到页面加载完成发生了什么

一、浏览器接收到URL，到网络请求线程的开启。

1、URL解析

URL结构:Protocol://Host:Port/Path?Query#Fragment，例如 http://example.com/u5ers/1?foo=bar#abc

1. Protocol 协议头：用来传输客户端和服务器端交互信息的。
2. Host 域名：一级域名（顶级域名） www.qq.com、二级域名 sport.qq.com、三级域名 kbs.sport.qq.com。
3. Port 端口号：用来区分同一台服务器上不同服务的标识（基于web服务管理创建服务的时候可以指定），不同服务之间一般是不能使用相同的端口号的。
4. Path 目录路径：一般都是请求当前服务对应的项目目录中。
5. Query 查询参数：?xx=xxx这是问号传参，在HTTP事务中，问号传参是客户端把信息传递给服务器的一种方式（也有可能是跳转到某一个页面，把参数值传递给页面用来标识的）。
6. Fragment 片段：#xxx这是哈希值，哈希值一般都是跟用户端服务器交互没啥关系，主要用于页面中的锚点定位和HASH路由切换。

2、进程与线程

简单来说，进程就是一个程序运行的实例，操作系统会为进程创建独立的内存，运行所需的代码和数据;而线程是进程的组成部分，每个进程至少有一个主线程及多个子线程，这些线程由所属的进程进行启动和管理。由于多个线程可以共享操作系线的同一个进程所分配的资源，所以多线程的并行处理能有效提高程序的运行效率。

1. 进程和线程之间的区别:

• 只要某个线程执行出错，将会导致整个进程崩溃。
• 进程与进程之间相互隔离。这保证了当一个进程挂起或崩溃的情况发生时，并不会影响其他进程的正常运行，虽然每个进程只能访问系统分配给自己的资源，但可以通过IPC机制进行进程间通信。
• 进程所占用的资源会在其关闭后由操作系统回收。即使进程中存在某个线程产生的内存泄漏，当进程退出时，相关的内存资源也会被回收。
• 线程之间可以共享所属进程的数据。

2. 多进程浏览器:

• 主进程：一个浏览器只有一个主进程，负责如菜单栏、标题栏等界面显示，文件访问，前进后退，以及子进程管理等。
• GPU进程：GPU(图形处理单元)最初是为了实现3D的CSS效果而引入的，后来随着网页及浏览器在界面中的使用需求越来越普遍，Chrome便在架构中加入了GPU进程。
• 插件进程：主进程会为每个加入浏览器的插件开辟独立的子进程，由于进程间所分配的运行资源相对独立，所以即便某个插件进程意外崩溃，也不至于对浏览器和页面造成影响。另外，出于对安全因素的考虑，这里采用了沙箱模式(即上图中虚线所标出的进程)，在沙箱中运行的程序受到一些限制:不能读取敏感位置的数据，也不能在硬盘上写入数据。这样即使插件运行了恶意脚本，也无法获取系统权限。
• 网络进程：负责页面的网络资源加载，之前属于浏览器主进程中的一个模块，最近才独立出来。
• 渲染进程：也称为浏览器内核，其默认会为每个标签窗口页开辟一个独立的渲染进程，负责将 HTML、CSS 和JavaScript 等资源转为可交互的页面，其中包含多个子线程，即JS 引擎线程、GUI渲染线程、事件触发线程、定时触发器线程、异步 HTTP 请求线程
  等。当打开一个标签页输入URL后，所发起的网络请求就是从这个进程开始的。另外，出于对安全性的考虑，渲染进程也被放入沙箱中。

二、一个完整的HTTP请求发出。

3、DNS解析

1. 首先查询浏览器自身的DNS缓存，如果查到IP 地址就结束解析。
2. 由于缓存时间一般只有1分钟，同时缓存容量也有限制，所以在浏览器缓存中没找到IP地址，搜索系统自身的DNS缓存。
3. 如果还未找到，接着就会尝试从系统的hosts文件中查找。
4. 在本地主机进行的查询若都没获取到，接下来便会在本地域名服务器上查询。
5. 如服务器没有直接的目标IP地址可供返回，则本地域名服务器便会采取迭代的方式查询根域名服务器、COM顶级域名服务器和权限域名服务器等。
6. 最终将所要访问的浏览器IP地址返回本地主机，若查询不到，则返回报错信息。

4、网络模型

1. OSI模型

• 应用层：是OSI参考模型的最高层，是用户与网络的接口。该层通过应用程序来完成网络用户的应用需求，如文件传输、收发电子邮件等。
• 表示层：处理流经结点的数据编码的表示方式问题，以保证一个系统应用层发出的信息可被另一系统的应用层读出。
• 会话层：主要功能是管理和协调不同主机上各种进程之间的通信（对话），即负责建立、管理和终止应用程序之间的会话。
• 传输层：作用是为上层协议提供端到端的可靠和透明的数据传输服务，包括处理差错控制和流量控制等问题。
• 网络层：是为传输层提供服务的，传送的协议数据单元称为数据包或分组。该层的主要作用是解决如何使数据包通过各结点传送的问题，即通过路径选择算法（路由）将数据包送到目的地。
• 数据链路层：该层的主要作用是通过校验、确认和反馈重发等手段，将不可靠的物理链路转换成对网络层来说无差错的数据链路。
• 物理层：是OSI参考模型的最低层，它利用传输介质为数据链路层提供物理连接。

2. TCP/IP模型

• 应用层：负责向用户提供应用程序，比如HTTP、FTP、Telnet、DNS、SMTP等。
• 传输层：负责对报文进行分组和重组，并以TCP或UDP协议格式封装报文。
• 网络层：负责路由以及把分组报文发送给目标网络或主机。
• 链路层：负责封装和解封装IP报文，发送和接受ARP/RARP报文等。

三、服务器接收到请求并转到具体的处理后台。

5、TCP三次握手

• 第1次握手:客户端生成一个随机数seq，假设其值为t，并将标志位SYN，将这些数据打包发给服务器端后，客户端进入等待服务器端确认的状态。
• 第2次握手:服务器端收到客户端发来的SYN=1的数据包后，将SYN与ACK均置为1，并将请求包中客户端发来的随机数t值给 ack，然后生成一个服务器端的随机数seq=k，完成这些操作后，服务器端将数据打包再发回给客户端，作为对客户端建立连接请求的确认应答。
• 第3次握手:客户端收到服务器端的确认应答后，检查数据包中ack的字为t+1，ACK是否等于1，若都正确就将服务器端发来的随机数加1(ack=k+1 ACK=1的数据包再发送给服务器端以确认服务器端的应答，服务器端收到应答包查ack是否等于k+1来确认连接是否建立成功。

6、反向代理

• 负载均衡。
• 安全防火墙。
• 加密及SSL加速。
• 数据压缩。
• 解决跨域。
• 对静态资源缓存。

四、前后台之间的 HTTP 交互和涉及的缓存机制。

7、HTTP相关协议

1. HTTPS传输数据的流程

• 客户端发起一个http请求，告诉服务器自己支持哪些hash算法，同时服务端到证书机构申请到数字证书。
• 服务端把报文经过hash处理成摘要，摘要被证书机构用私钥加密后生成了签名，连同报文一起发给客户端。
• 客户端接收数据后，用浏览器内置的公钥解密签名成摘要，同时，把报文提取出来用hash处理得到摘要，与上面的摘要进行对比，两者相等，证明证书没有被篡改过。
• 客户端生成一个用于对称加密的随机Key，并用公钥Pub进行加密，发送给服务端；
• 服务端收到加密后的随机Key，使用私钥Private进行解密，得到客户端真正想发送的随机Key，使用它对要传输的HTTP数据进行对称加密，将密文返回客户端；
• 客户端使用随机Key对称解密密文，得到HTTP数据明文；后续HTTPS请求使用之前交换好的随机Key进行对称加解密。

2. HTTP新特性

• HTTP1.1:建立长链接。
• 多路复用:一个链接可以请求多个资源。
• 二进制分帧:在应用层和传输层之间，新加入了一个二进制分帧层，以实现单进程浏览器高吞吐量。
• 服务器端推送:以往是一个请求带来一个响应，现在服务器可以向客户端发出多个响应，这样便可以实现服务器端主动向客户端推送的功能。
• 设置请求优先级:服务器会根据请求所设置的优先级，来决定需要多少资源请求。
• HTTP头部压缩:减少报文传输体积。

8、浏览器缓存

1. 强缓存

强缓存就是当浏览器判断出本地缓存未过期时，直接读取本地缓存，无须发起HTTP，此时状态为:200from cache。在HTTP1.1版本后通过头部的cache-contrg max-age属性值规定的过期时长来判断缓存是否过期失效，这比之前使用expi的服务器过期时间更准确而且安全。

2. 协商缓存

协商缓存则需要浏览器向服务器发起HTTP请求，来判断浏览器本地缓存的文件是否更改，若未修改则从缓存中读取，此时的状态码为:304。

五、浏览器接收到数据包后的关键渲染路径。

9、渲染步骤

1. 处理HTML标记并构建DOM 树。
2. 处理CSS标记并构建CSSOM 树。
3. 将 DOM与CSSOM 合并成一个 render tree。
4. 根据渲染树来布局，以计算每个节点的几何信息。
5. 将各个节点绘制到屏幕上。

10、TCP四次挥手