从输入URL网址到浏览器页面加载成功到底经历了什么？

1.DNS解析

DNS是一种分布式网络目录服务，主要用于域名与 IP 地址的相互转换，以及控制因特网的电子邮件的发送。域名系统（Domain Name System缩写DNS，Domain Name被译为域名）是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。简单来说就是输入的网址到IP地址的转换。   

   例如查找www.baidu.com的IP地址过程:

• 先在本地域名服务器中查询IP地址 
•  如果本地服务器没有，本地域名服务器会向根域名服务器发送一个请求
• 如果根域名服务器也不存在该域名时，本地域名会向com顶级域名服务器发送一个请求
• 如果com顶级域名服务器也不存在该域名时，本地域名会向baidu.com域名服务器发送一个请求
• 直到最后本地域名服务器得到baidu的IP地址并把它缓存到本地，供下次查询使用
• 所有网址真正的解析过程为: . -> .com -> baidu.com. -> www.baidu.com.。

DNS缓存：缓存在本地域名服务器中会加快下次查找的速度，DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

2.TCP连接 

TCP百科：传输控制协议（TCP，Transmission Control Protocol）是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP是因特网中的传输层协议，使用三次握手协议建立连接。当主动方发出SYN连接请求后，等待对方回答SYN+ACK，并最终对对方的 SYN 执行 ACK 确认。这种建立连接的方法可以防止产生错误的连接，TCP使用的流量控制协议是可变大小的滑动窗口协议。

                                          图1 TCP的三次握手

TCP三次握手的过程如下：

1. 客户端发送SYN（SEQ=x）报文给服务器端，进入SYN_SEND状态。

2. 服务器端收到SYN报文，回应一个SYN （SEQ=y）ACK（ACK=x+1）报文，进入SYN_RECV状态。

3. 客户端收到服务器端的SYN报文，回应一个ACK（ACK=y+1）报文，进入Established状态。

三次握手完成，TCP客户端和服务器端成功地建立连接，可以开始传输数据了。

3.HTTP请求

HTTPS （全称：Hyper Text Transfer Protocol over SecureSocket Layer：超文本传输安全协议），是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性   。HTTPS 在HTTP 的基础下加入SSL (Secure Sockets Layer ：安全套接字协议)层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 HTTPS 存在不同于 HTTP 的默认端口及一个加密/身份验证层（在 HTTP与 TCP 之间）。这个系统提供了身份验证与加密通讯方法。它被广泛用于万维网上安全敏感的通讯，例如交易支付等方面  。

HTTP请求主要发生在客户端。发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议中发送到服务器指定端口(HTTP协议80/8080, HTTPS协议443)。服务器返回给浏览器的文本信息，通常HTML, CSS, JS, 图片等文件就放在响应报文。

4.浏览器解析渲染页面

 浏览器是一个边解析边渲染的过程。

1. 首先浏览器解析HTML文件构建DOM树，
2. 然后解析CSS文件构建渲染树，
3. 等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。

这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。

DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;

当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。

页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。