在浏览器输入URL回车以后发生了什么

大体流程

1. URL 解析
2. DNS 查询
3. TCP 链接
4. 处理请求
5. 接受响应
6. 渲染页面

1、URL 解析

2、DNS 查询

1. 浏览器缓存

浏览器会先检查是否在缓存中，没有则调用系统库函数进行查询。

2. 操做系统缓存

操做系统也有本身的 DNS缓存，但在这以前，会向检查域名是否存在本地的 Hosts 文件里，没有则向 DNS 服务器发送查询请求。

3. 路由器缓存

路由器也有本身的缓存。

4. ISP DNS 缓存

ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器，它们在大多数状况下都会有缓存。

3、TCP 链接

1. 应用层：发送 HTTP 请求

在前面的步骤咱们已经获得服务器的 IP 地址，浏览器会开始构造一个 HTTP 报文，其中包括：

• 请求报头（Request Header）：请求方法、目标地址、遵循的协议等等
• 请求主体（其余参数）

其中须要注意的点：

• 浏览器只能发送 GET、POST 方法，而打开网页使用的是 GET 方法

2. 传输层：TCP 传输报文

传输层会发起一条到达服务器的 TCP 链接，为了方便传输，会对数据进行分割（以报文段为单位），并标记编号，方便服务器接受时可以准确地还原报文信息。

在创建链接前，会先进行 TCP 三次握手。

“

关于 TCP/IP 三次握手，网上已经有不少段子和图片生动地描述了。

相关知识点：

1. SYN 泛洪攻击

”

3. 网络层：IP协议查询Mac地址

将数据段打包，并加入源及目标的IP地址，而且负责寻找传输路线。

判断目标地址是否与当前地址处于同一网络中，是的话直接根据 Mac 地址发送，不然使用路由表查找下一跳地址，以及使用 ARP 协议查询它的 Mac 地址。

“

注意：在 OSI 参考模型中 ARP 协议位于链路层，但在 TCP/IP 中，它位于网络层。

”

4. 链路层：以太网协议

以太网协议

根据以太网协议将数据分为以“帧”为单位的数据包，每一帧分为两个部分：

• 标头：数据包的发送者、接受者、数据类型
• 数据：数据包具体内容

Mac 地址

以太网规定了连入网络的全部设备都必须具有“网卡”接口，数据包都是从一块网卡传递到另外一块网卡，网卡的地址就是 Mac 地址。每个 Mac 地址都是独一无二的，具有了一对一的能力。

服务器接受请求

5、浏览器接受响应

浏览器接收到来自服务器的响应资源后，会对资源进行分析。

回流(reflow)

当浏览器发现某个部分发现变化影响了布局时，须要倒回去从新渲染，会从html标签开始递归往下，从新计算位置和大小。

reflow基本是没法避免的，由于当你滑动一下鼠标、resize 窗口，页面就会产生变化。

重绘(repaint)

改变了某个元素的背景色、文字颜色等等不会影响周围元素的位置变化时，就会发生重绘。

每次重绘后，浏览器还须要合并渲染层并输出到屏幕上。

浏览器对同一域名的并发链接数是有限的，一般为 6 个

宏任务

分为：

• 同步任务：按照顺序执行，只有前一个任务完成后，才能执行后一个任务
• 异步任务：不直接执行，只有知足触发条件时，相关的线程将该异步任务推动任务队列中，等待JS引擎主线程上的任务执行完毕时才开始执行，例如异步Ajax、DOM事件，setTimeout等。

微任务

微任务是ES6和Node环境下的，主要 API 有：Promise，process.nextTick。

代码例子

console.log('1'); // 宏任务 同步

setTimeout(function() {
console.log('2'); // 宏任务 异步
})

new Promise(function(resolve) {
console.log('3'); // 宏任务 同步
resolve();
}).then(function() {
console.log('4') // 微任务
})
console.log('5') // 宏任务 同步

以上代码输出顺序为：1,3,5,4,2

你所不知道的 HSTS:http://t.cn/AiR8pTqx

[2]

详见这篇文章: http://t.cn/AiR8pnEC

[3]

MIME: http://t.cn/AiR8prtm

[4]

语法规范: http://t.cn/AiR80GdO

[5]

这篇文章:http://t.cn/AiR80c1k

[6]

what-happens-when-zh_CN: http://t.cn/AiR80xb5

[7]

Tags to DOM:http://t.cn/AiR80djX

[8]

完全理解浏览器的缓存机制: http://t.cn/AiR8Ovob

[9]

浏览器的工做原理：新式网络浏览器幕后揭秘: http://t.cn/AiR8Oz06

[10]

深刻浅出浏览器渲染原理: http://t.cn/AiR8O4fO

[11]

js引擎的执行过程（一）:http://t.cn/AiR8Ot3s