一、从输入URL到页面呈现发生了什么？----涉及的网络知识
1.构建请求
浏览器回构建请求行
请求行包含用于请求的方法，请求url和htpp版本
2.查找浏览器强缓存
如果过命中直接使用，如果没有命中则发起请求
关于浏览器缓存可参考之前写的文章：浏览器缓存
3.DNS域名解析
1.由于是分布式的域名系统所以会逐渐查找。
2.浏览器先检查自身缓存-》系统缓存host中有没有对应的已解析过的结果-》本地域名服务器-》Root Server 域名服务器请求解析-》顶级域名服务器-》权限域名服务器-》返回结果给本地域名服务器-》请求DNS客户
域名解析这里涉及：递归查询和迭代查询 而且查询时是用UPD用户数据报。高速缓存
3.高速缓存：高速缓存用来存放最近查询过的域名以及从何处获得域名映射信息的记录。
DNS详细内容可参考：《计算机网络第7版》–谢希仁 或者 博客：DNS原理总结及其解析过程详解
4.建立 TCP 连接
TCP 连接通过什么手段来保证数据传输的可靠性，一是三次握手确认连接，二是数据包校验保证数据到达接收方，三是通过四次挥手断开连接。
详细内容：三次握手
5.发送 HTTP 请求
浏览器发 HTTP 请求要携带三样东西:请求行、请求头和请求体。
网络响应:网络响应具有三个部分:响应行、响应头和响应体。
响应完成之后怎么办？TCP 连接就断开了吗？
不一定。这时候要判断Connection字段, 如果请求头或响应头中包含Connection: Keep-Alive，表示建立了持久连接，这样TCP连接会一直保持，之后请求统一站点的资源会复用这个连接。
否则断开TCP连接, 请求-响应流程结束。涉及四次挥手：TCP断开连接 四次挥手
二、输入URL到页面呈现发生了什么？——解析算法篇
6.构建Dom树
由于浏览器无法直接理解HTML字符串，因此将这一系列的字节流转换为一种有意义并且方便操作的数据结构，这种数据结构就是DOM树。DOM树本质上是一个以document为根节点的多叉树。
解析算法:
- 1.标记化。
- 2.建树。
对应的两个过程就是词法分析和语法分析。
标记算法：
这个算法输入为HTML文本，输出为HTML标记，也成为标记生成器。其中运用有限自动状态机来完成。即在当当前状态下，接收一个或多个字符，就会更新到下一个状态。
建树算法:
DOM 树是一个以document为根节点的多叉树。因此解析器首先会创建一个document对象。标记生成器会把每个标记的信息发送给建树器。建树器接收到相应的标记时，会创建对应的 DOM 对象。创建这个DOM对象后会做两件事情:
1.将DOM对象加入 DOM 树中。
2.将对应标记压入存放开放(与闭合标签意思对应)元素的栈中。
7.样式计算
关于CSS样式，它的来源一般是三种:
- link标签引用
- style标签中的样式
- 元素的内嵌style属性
格式化样式表
首先，浏览器是无法直接识别 CSS 样式文本的，因此渲染引擎接收到 CSS 文本之后第一件事情就是将其转化为一个结构化的对象，即styleSheets。
标准化样式属性
有一些 CSS 样式的数值并不容易被渲染引擎所理解，因此需要在计算样式之前将它们标准化，如em->px, red->#ff0000, bold->700等等。
计算每个节点的具体样式
样式已经被格式化和标准化,接下来就可以计算每个节点的具体样式信息了。其实计算的方式也并不复杂，主要就是两个规则: 继承和层叠。
不过值得注意的是，在计算完样式之后，所有的样式值会被挂在到window.computedStyle当中，也就是可以通过JS来获取计算后的样式，非常方便。
8.生成布局树
现在已经生成了DOM树和DOM样式，接下来要做的就是通过浏览器的布局系统确定元素的位置，也就是要生成一棵布局树(Layout Tree)。
布局树生成的大致工作如下:
- 遍历生成的 DOM 树节点，并把他们添加到布局树中。
- 计算布局树节点的坐标位置。
三、说一说从输入URL到页面呈现发生了什么？——渲染过程篇
接下来就来拆解下一个过程——渲染。分为以下几个步骤:
1.建立图层树(Layer Tree)
2.生成绘制列表
3.生成图块并栅格化
4.显示器显示内容