浏览器访问——输入URL，回车之后具体发生了什么？

写在前面

这个问题，基本上很多web面试都会问到。最近笔者就有被问到过，但是由于自己回答得不好，忽略甚至忘记了一些关键点。所以刷了很多相关资料，总结一下，学习一下。

主要过程

通过URL向服务器发起访问请求的一个大致步骤可分为：

1.解析URL

2.通过DNS查找IP

3.建立连接（TCP）

4.服务器处理请求

5.接收响应

6.渲染

---

解析URL

我们输入的不一定是完整的URL，大多数情况下都是关键字。这就需要浏览器去自动处理。

一个合法的URL一定包含协议、域名等信息。

DNS查询IP

查询缓存

img1

根DNS服务器查询

如果没有缓存，则本地DNS服务器会将请求转发到根DNS，如图：

img2

建立连接（TCP）

主要是HTTP请求和TCP连接。在网络协议那块有详细介绍。

1.应用层发送HTTP请求

2.传输层建立TCP连接

3.网络层查询Mac地址

4.数据链路层，以太网协议

TCP的三次握手建立连接，服务器接受请求。

服务器处理请求

大致流程

img3

浏览器接受响应

浏览器接受来自服务器的响应。

渲染页面

大致流程

img4

1.解析HTML

    解码

    预解析

    符号化

    构建DOM树

2.解析CSS

形成CSS规则树。

3.渲染树

DOM树与CSS规则树的合并。

渲染阻塞

当遇到script标签时，DOM构建会暂停，直到js脚本执行完成，然后继续构建DOM树。

但是，若js脚本需要依赖CSS样式，但由于CSS Rules还没构建，则浏览器会延迟脚本执行，直到CSS Rules构建完成。

所以：

    CSS会阻塞JS；

    JS会阻塞DOM树。

一般我们把script标签放在HTML页面底部，style标签放在JS资源之前。

img5

参考链接：

https://juejin.im/post/5d5e795ff265da03e275f29e

https://juejin.im/post/5e32449d6fb9a02fe4581907