从输入URL到页面展示的浏览器过程

俗话说的好，温故而知新。我今天翻开了自己的笔记，非常不意外的发现我把之前所学的知识都忘得一干二净。
我认为原因之一是因为当时的我对知识点的理解过于浅显，将别人讲给我的知识看了一通记了一通就以为自己学会了。
第二个原因便是几乎不复习，所以重新翻看之前的知识都无法串联起来。在此立个flag，今后每隔一个月就重新复习一遍知识。

好了废话不多说，进入正题。

来谈谈我对从输入URL到页面展示的浏览器过程的理解。（ps参考了李兵老师的《浏览器工作原理与实践》以及罗剑锋老师的《透视HTTP协议》）

一、首先是用户输入URL，浏览器判断输入的信息是搜索内容还是网址

1、URL：统一资源定位符

格式：<协议类型> : / /  <主机名> ：<端口号> / <路径> ? <参数名># <锚点>

scheme  : / / host ：port / path ? query # fragment

例如：https://blog.csdn.net/weixin_44797985?spm=1000.2115.3001.5343 

2、用户输入内容之后，判断输入信息是否符合URL规则。

（1）如果是搜索内容，地址栏会使用浏览器默认的搜索引擎，来合成新的带有搜索关键字的URL

（2）如果是符合URL规则的内容，根据URL协议（比如https），把这段内容加上协议，合成完整合法的URL

（3）此时浏览器导航栏显示loading状态，这是因为页面的响应数据还没有获得

二、浏览器进程浏览器构建请求行信息

浏览器进程会通过进程间通信（IPC）将URL请求发送给网络进程，如：GET /index.html HTTP1.1
网络进程收到URL之后，浏览器寻找域名的IP地址，进行DNS解析

1、DNS解析过程

浏览器DNS缓存-->操作系统缓存-->路由器缓存-->DNS缓存-->如果都没有缓存，则运营商的DNS浏览器发起迭代DNS请求，查找域名对应IP

2、另外，如果是https请求，还需要建立TLS连接（关于TLS连接具体可以看另一篇文章）

三、网络进程发起网络请求，也就是通过IP地址发起TCP连接

四、服务器收到报文后处理请求，同时返回响应数据

五、网络进程将获取到的数据包进行解析

根据响应头中的Content-type来判断响应数据的类型，网络进程解析HTTP出来响应头数据，并将其转发给浏览器进程。

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

2、如果是text/html类型，就通知浏览器进程获取到文档准备渲染。

六、浏览器进程接收到网络进程的响应头数据之后，发送CommitNavigation消息到渲染进程，发送时携带响应头等基本信息

根据当前页面B是否是从页面A打开的并且和页面A是否是同一个站点（根域名和协议一样就被认为是同一个站点），

如果满足上述条件，就复用之前网页的进程，否则，新创建一个单独的渲染进程

七、渲染进程接收到CommitNavigation消息之后，便开始接收HTML数据，接收数据的方式是直接和网络进程建立数据管道

八、最后渲染进程会向浏览器进程“确认提交”

九、最后浏览器进程更新页面状态

1、浏览器收到“确认提交”的消息后，会更新浏览器的页面状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新web页面，此时的web页面是空白页。

2、渲染进程对文档进行页面解析和子资源加载，HTML 通过HTM 解析器转成DOM Tree（二叉树类似结构的东西），CSS按照CSS 规则和CSS解释器转成CSSOM TREE，两个tree结合，形成render tree（不包含HTML的具体元素和元素要画的具体位置），通过Layout可以计算出每个元素具体的宽高颜色位置，结合起来，开始绘制，最后显示在屏幕中新页面显示出来。

至此，一个页面展示过程才基本完成。

通过本次对于这个看似简单的问题的学习，我发现里面串联了许多的知识，关于http协议，TCP连接，TLS连接，渲染过程等等。

如果里面涉及到的知识点有错误，欢迎各位指出~~