从输入URL到加载页面发生了什么？

完整过程

1、浏览器的地址栏输入URL，并按下回车
2、浏览器查找当前的url是否存在缓存，如果由缓存并比较是否过期
3、DNS解析器解析URL对应的IP
4、根据IP建立TCP连接（三次握手）
5、HTTP发送请求
6、服务器处理请求，浏览器接受HTTP响应
7、渲染页面，构建DOM树
8、关闭TCP连接（四次挥手）

着重说以下几个关键点

DNS解析

我们知道在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。

首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。

如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。

如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。

最后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址。
　　递归查询，按上一级DNS服务器->上上级->…逐级向上查询找到IP地址。

三次握手

在通过第一步的DNS域名解析后，获取到了服务器的IP地址，在获取到IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接
1、第一次握手：客户端发送一个SYN码给服务器，要求建立数据连接
2、第二次握手：服务器SYN和自己处理一个SYN；叫SYN+ACK；发送给客户端，可以建立连接
3、第三次握手：客户端再次发送ACK向服务器，服务器验证ACK没有问题，则建立起连接；

渲染页面

在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。在收到 CSS 文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。

Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为Reflow。

Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。

所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。

下面这些动作有很大可能会是成本比较高的：

• 增加、删除、修改DOM结点时，会导致Reflow或Repaint

• 移动DOM的位置，或是搞个动画的时候

• 内容发生变化

• 修改CSS样式的时候

• Resize窗口的时候（移动端没有这个问题），或是滚动的时候

• 修改网页的默认字体时

基本上来说，reflow有如下的几个原因：

• Initial，网页初始化的时候

• Incremental，一些js在操作DOM树时

• Resize，其些元件的尺寸变了

• StyleChange，如果CSS的属性发生变化了

• Dirty，几个Incremental的reflow发生在同一个frame的子树上

四次挥手

中断连接的时候，可以是客户端也可以是服务端 中断连接端可以是Client端，也可以是Server端。
第一次挥手：客户端发送FIN报文，通知服务器数据已经传输完毕
第二次挥手：服务器接收到之后，通知客户端我收到了SYN，发送ACK给客户端，我数据还没有传输完成
第三次挥手：服务器已经传输完毕，再次发送FIN通知客户端，数据已经传输完毕
第四次挥手：客户端再次发送ACK，进入TIME—WAIT状态；服务端和客户端关闭连接