从输入url到页面加载完成发生了什么
一、浏览器接收到URL，到网络请求线程的开启。
1、URL解析
URL结构:Protocol://Host:Port/Path?Query#Fragment，例如 http://example.com/u5ers/1?foo=bar#abc
- Protocol 协议头：用来传输客户端和服务器端交互信息的。
- Host 域名：一级域名（顶级域名） www.qq.com、二级域名 sport.qq.com、三级域名 kbs.sport.qq.com。
- Port 端口号：用来区分同一台服务器上不同服务的标识（基于web服务管理创建服务的时候可以指定），不同服务之间一般是不能使用相同的端口号的。
- Path 目录路径：一般都是请求当前服务对应的项目目录中。
- Query 查询参数：?xx=xxx这是问号传参，在HTTP事务中，问号传参是客户端把信息传递给服务器的一种方式（也有可能是跳转到某一个页面，把参数值传递给页面用来标识的）。
- Fragment 片段：#xxx这是哈希值，哈希值一般都是跟用户端服务器交互没啥关系，主要用于页面中的锚点定位和HASH路由切换。
2、进程与线程
简单来说，进程就是一个程序运行的实例，操作系统会为进程创建独立的内存，运行所需的代码和数据;而线程是进程的组成部分，每个进程至少有一个主线程及多个子线程，这些线程由所属的进程进行启动和管理。由于多个线程可以共享操作系线的同一个进程所分配的资源，所以多线程的并行处理能有效提高程序的运行效率。
- 进程和线程之间的区别:
- 只要某个线程执行出错，将会导致整个进程崩溃。
- 进程与进程之间相互隔离。这保证了当一个进程挂起或崩溃的情况发生时，并不会影响其他进程的正常运行，虽然每个进程只能访问系统分配给自己的资源，但可以通过IPC机制进行进程间通信。
- 进程所占用的资源会在其关闭后由操作系统回收。即使进程中存在某个线程产生的内存泄漏，当进程退出时，相关的内存资源也会被回收。
- 线程之间可以共享所属进程的数据。
- 多进程浏览器:
- 主进程：一个浏览器只有一个主进程，负责如菜单栏、标题栏等界面显示，文件访问，前进后退，以及子进程管理等。
- GPU进程：GPU(图形处理单元)最初是为了实现3D的CSS效果而引入的，后来随着网页及浏览器在界面中的使用需求越来越普遍，Chrome便在架构中加入了GPU进程。
- 插件进程：主进程会为每个加入浏览器的插件开辟独立的子进程，由于进程间所分配的运行资源相对独立，所以即便某个插件进程意外崩溃，也不至于对浏览器和页面造成影响。另外，出于对安全因素的考虑，这里采用了沙箱模式(即上图中虚线所标出的进程)，在沙箱中运行的程序受到一些限制:不能读取敏感位置的数据，也不能在硬盘上写入数据。这样即使插件运行了恶意脚本，也无法获取系统权限。
- 网络进程：负责页面的网络资源加载，之前属于浏览器主进程中的一个模块，最近才独立出来。
- 渲染进程：也称为浏览器内核，其默认会为每个标签窗口页开辟一个独立的渲染进程，负责将 HTML、CSS 和JavaScript 等资源转为可交互的页面，其中包含多个子线程，即JS 引擎线程、GUI渲染线程、事件触发线程、定时触发器线程、异步 HTTP 请求线程
等。当打开一个标签页输入URL后，所发起的网络请求就是从这个进程开始的。另外，出于对安全性的考虑，渲染进程也被放入沙箱中。
二、一个完整的HTTP请求发出。
3、DNS解析
- 首先查询浏览器自身的DNS缓存，如果查到IP 地址就结束解析。
- 由于缓存时间一般只有1分钟，同时缓存容量也有限制，所以在浏览器缓存中没找到IP地址，搜索系统自身的DNS缓存。
- 如果还未找到，接着就会尝试从系统的hosts文件中查找。
- 在本地主机进行的查询若都没获取到，接下来便会在本地域名服务器上查询。
- 如服务器没有直接的目标IP地址可供返回，则本地域名服务器便会采取迭代的方式查询根域名服务器、COM顶级域名服务器和权限域名服务器等。
- 最终将所要访问的浏览器IP地址返回本地主机，若查询不到，则返回报错信息。
4、网络模型
- OSI模型
- 应用层：是OSI参考模型的最高层，是用户与网络的接口。该层通过应用程序来完成网络用户的应用需求，如文件传输、收发电子邮件等。
- 表示层：处理流经结点的数据编码的表示方式问题，以保证一个系统应用层发出的信息可被另一系统的应用层读出。
- 会话层：主要功能是管理和协调不同主机上各种进程之间的通信（对话），即负责建立、管理和终止应用程序之间的会话。
- 传输层：作用是为上层协议提供端到端的可靠和透明的数据传输服务，包括处理差错控制和流量控制等问题。
- 网络层：是为传输层提供服务的，传送的协议数据单元称为数据包或分组。该层的主要作用是解决如何使数据包通过各结点传送的问题，即通过路径选择算法（路由）将数据包送到目的地。
- 数据链路层：该层的主要作用是通过校验、确认和反馈重发等手段，将不可靠的物理链路转换成对网络层来说无差错的数据链路。
- 物理层：是OSI参考模型的最低层，它利用传输介质为数据链路层提供物理连接。
- 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相关协议
- HTTPS传输数据的流程
- 客户端发起一个http请求，告诉服务器自己支持哪些hash算法，同时服务端到证书机构申请到数字证书。
- 服务端把报文经过hash处理成摘要，摘要被证书机构用私钥加密后生成了签名，连同报文一起发给客户端。
- 客户端接收数据后，用浏览器内置的公钥解密签名成摘要，同时，把报文提取出来用hash处理得到摘要，与上面的摘要进行对比，两者相等，证明证书没有被篡改过。
- 客户端生成一个用于对称加密的随机Key，并用公钥Pub进行加密，发送给服务端；
- 服务端收到加密后的随机Key，使用私钥Private进行解密，得到客户端真正想发送的随机Key，使用它对要传输的HTTP数据进行对称加密，将密文返回客户端；
- 客户端使用随机Key对称解密密文，得到HTTP数据明文；后续HTTPS请求使用之前交换好的随机Key进行对称加解密。
- HTTP新特性
- HTTP1.1:建立长链接。
- 多路复用:一个链接可以请求多个资源。
- 二进制分帧:在应用层和传输层之间，新加入了一个二进制分帧层，以实现单进程浏览器高吞吐量。
- 服务器端推送:以往是一个请求带来一个响应，现在服务器可以向客户端发出多个响应，这样便可以实现服务器端主动向客户端推送的功能。
- 设置请求优先级:服务器会根据请求所设置的优先级，来决定需要多少资源请求。
- HTTP头部压缩:减少报文传输体积。
8、浏览器缓存
- 强缓存
强缓存就是当浏览器判断出本地缓存未过期时，直接读取本地缓存，无须发起HTTP，此时状态为:200from cache。在HTTP1.1版本后通过头部的cache-contrg max-age属性值规定的过期时长来判断缓存是否过期失效，这比之前使用expi的服务器过期时间更准确而且安全。
- 协商缓存
协商缓存则需要浏览器向服务器发起HTTP请求，来判断浏览器本地缓存的文件是否更改，若未修改则从缓存中读取，此时的状态码为:304。
五、浏览器接收到数据包后的关键渲染路径。
9、渲染步骤
- 处理HTML标记并构建DOM 树。
- 处理CSS标记并构建CSSOM 树。
- 将 DOM与CSSOM 合并成一个 render tree。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个节点绘制到屏幕上。
