【浏览器工作原理】在浏览器地址栏输入网址，再按下回车，发生了什么

这篇文章在http层面解答了这个经典的面试题，相对来说还是很简单的，但是有的时候面试官想问的更加深层次的东西，那就是要问浏览器的工作原理了。本篇文章在浏览器的原理的层面来解答这个问题！

1. 用户在浏览器的地址栏输入内容

1. 浏览器根据输入的信息，判断是输入的【搜索内容】、还是【网址】

1. 如果输入的是【搜索内容】，浏览器使用默认的搜索引擎合成新的url

1. 如果输入的是【网址】，也就是符合url规则，浏览器根据url协议，在这段内容上加上协议合成合法的url，比如，输入 www.baidu.com 可能会合成百度一下，你就知道，前面的这个https协议是浏览器加的。

1. 在这一步不同浏览器的处理规则可能不同

1. 用户输入完内容，按下回车键

1. 浏览器的导航栏显示loading状态，就是浏览器的左上角的那个刷新按钮

1. 浏览器页面暂时保持不变，因为新的页面数据还没有返回

1. 浏览器进程中构建请求行信息，通过进程间通信ipc将上述的url发送给网络进程

1. 网络进程获取到url

1. 检查本地缓存中是否有对应的缓存文件

1. 有缓存，拦截请求，返回200，整个流程终止！

1. 没有缓存，进行下一步网络请求

1. 网络进程请求dns，进行dns解析，获取对应的ip地址和端口号

1. dns解析流程如下

• 浏览器缓存

• 操作系统缓存

• 本地的hosts文件

• 局域网/本地域名服务器

• 广域网域名服务器

• 根域名服务器

• 顶级域名服务器

• 权威域名服务器

• 返回ip地址或者解析出错

1. 如果解析出来的接口没有端口号，那么http默认端口号是80，https默认端口是443，注意，这个是浏览器在dns解析结果加上的端口，用于后续请求用。

2. 获取目的主机的mac地址，用于传输层传输

3. 如果是https请求，还需要建立tls连接

4. chrome 限制在同一个域名下最多可以建立6个tcp连接，所以如果在同一个域名下，同时有超过6个请求发生，那么多余的会进入排队等待状态，直到有请求完成，当前总请求数小于6就会建立tcp连接

1. 网络进程开始发起http请求，下面是网络相关知识：

1. 传输层tcp三次握手建立连接，http请求加上tcp头部，包括源端口号，目的端口号和用于校验数据完整性的序号，向下传输【这里的上下是计算机网络模型中抽象的上下】

1. 网络层在数据包上加上ip头部，包括源ip地址和目的ip地址，向下传输

1. 数据链路层/物理层 通过物理网络传输给服务器主机

1. 服务器主机网络层收到数据包，解析ip 头部，识别数据部分，向上传输

1. 服务器主机传输层收到数据包，解析tcp头部，识别端口，识别数据部分，向上传输到应用层

1. 服务器主机应用层http解析请求头和请求体，根据各种头部信息进行后续操作

1. 301/302重定向，根据location字段重定向

1. 304 使用缓存，

1. 200 成功，返回响应数据

1. 等

1. 响应数据原路返回应用层-传输层-网络层-网络层-传输层-应用层

1. 数据传输完成

1. 如果使用http 1.0 短链接，那么此时tcp四次挥手断开链接

1. 如果使用http 1.1 长链接，那么此时不会断开tcp连接

1. 网络进程将获取的数据包进行解析

1. 根据http响应头content-type的类型处理数据

1. 如果是字节流，将将该请求交给下载管理器，结束导航流程

1. 如果是text/html类型，进行下一步，通知浏览器进程获取文档准备渲染

1. 浏览器进程获取到通知

1. 判断当前页面B是否是已经存在的A页面打开的，并且和A是否是同一个站点【根域名和协议一样就被认为同一个站点】，如果是，就复用A网页的渲染进程，否则创建一个新的渲染进程

1. 浏览器进程发出【提交文档】的消息给渲染进程

1. 渲染进程收到【提交文档】消息后，和网络进程建立传输数据的管道，文档数据传输完成后，渲染进程会返回【确认提交】的消息给浏览器进程

1. 浏览器进程收到【确认提交】的消息后，更新浏览器的页面状态

1. 更新安全状态，就是浏览器地址栏左边的一个锁的那个小图标

1. 更新地址栏的url

1. 更新前进、后退的历史状态

1. 更新web页面，这个时候web页面是空白页

1. 渲染进程开始对文档进行页面解析，和子资源的加载

1. html通过html解析器转换成dom tree

1. css 按照css规则和css解释器转成cssDom tree

1. dom tree 和cssDom tree结合生成渲染树

1. 渲染到页面上