【前端高频面试题】 浏览器地址栏输入网页地址后发生了什么？

---

前言

最近看了很多分享前端面试题的帖子，发现这道题出现的频率特别高。但是贴子里的答案很精简，很多点都是一笔带过，没有很详细的解释，前几天我专门搜了很多相关的资料，今天整理出来，希望能够对大家有所帮助！
来吧 展示

---

一、思考一下可能发生的步骤

在直接查看答案之前，我们可以先自己思考一下，想象一下浏览器可能需要那些步骤。
我们在浏览器地址栏输入网址，然后打开对应的页面，其实就是想让浏览器向服务器请求这个页面的资源，然后浏览器拿到资源后加载渲染；所以发生的步骤包括了两个阶段：网络阶段和浏览器加载阶段

二、经历的两个阶段

（1）网络阶段

1. DNS服务器域名解析

我们想要向服务器请求页面的相关资源，第一步肯定是需要知道服务器地址在哪里，这一步就是由DNS服务器来完成的，它可以将我们输入的域名解析成对应服务器的ip地址。
输入网址后，浏览器会根据本地客户端DNS服务器配置，向DNS服务器获取域名对应的IP地址。

插入一个知识点，注意一会要考
DNS查找过程为：
浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->递归搜索
递归搜索过程为：从根域名服务器到顶级域名服务器到所查询的域名服务器。

2. 建立TCP连接

在浏览器获取到服务器ip地址之后，就需要向他发送http请求获取资源了，但是 HTTP请求是一个基于TCP协议之上的应用层协议——超文本传输协议，因此浏览器通过DNS获取到web服务器的IP地址后，需要向Web服务器发起TCP连接请求，通过TCP三次握手建立好连接后，浏览器便可以将HTTP请求数据通过发送给服务器了。
TCP三次握手连接：

找到了一个图，挺形象的。大概你可以理解成刘能和赵四在聊天：
刘能：“在吗？想去找你玩。”
赵四：“我在，快来啊！”
刘能：“好的，马上就到”

3. 发送http请求

请求的内容包括：

请求行
请求头
请求主体

4.服务器处理请求并返回响应结果

当服务器接收到浏览器的请求之后，就会进行逻辑操作，处理完成之后返回一个HTTP响应消息，包括：

状态行
响应头
响应正文

5.关闭TCP连接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。
和建立TCP连接的三次握手差不多，关闭需要四次握手。大概流程是这个样子：

客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。” – FIN + seq
服务端：“收到，我看看我这边有木有数据了。” – ACK + seq + ack
服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。” - FIN + ACK + seq + ack
客户端：“好嘞。” – ACK + seq + ack

（2）浏览器加载阶段

6.浏览器解析HTML

这个过程又可以细分为以下几个步骤：
1.构建DOM树
2.构建css树。
可以理解为样式树，也是树形结构，类似于DOM树。css的渲染和HTML的渲染是同步进行的，所以样式加载的越快越好，所以一般css放在页面顶部
3.构建Render tree。
浏览器遍历dom树，从根节点开始逐个遍历，对每个可见节点找到适配的样式规则并加以应用。这个过程包括了两个步骤，样式计算和样式覆盖。
4.布局。
创建完渲染树后，下一步就是布局，又称回流，这个过程就是通过渲染树中各个渲染对象的信息，计算出每一个渲染对象的位置和尺寸，将其放置在浏览器中对应的位置。有时候会进行一些dom操作，这个时候就可能需要重新进行布局，称为回流，本质上还是一个布局的过程。
5.绘制。

知识点：重绘和回流会在我们设置节点样式时频繁出现,同时也会很大程度上影响性能。回流所需的成本比重绘高的多,改变父节点里的子节点很可能会导致父节点的一系列回流。

【高频面试题】：回流和重绘的区别？

重绘：元素样式的改变（但宽高、大小、位置等不变）
如：outline、visibility、color、background-color等
只改变自身样式，不会影响到其他元素
回流：元素的大小或者位置发生改变（当页面布局和几何信息发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染，如添加或删除可见的DOM元素；元素的位置发生变化；元素的尺寸发生变化、内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；页面一开始渲染的时候（无法避免）；因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流。
总结： 回流必定会发生重绘,重绘不一定会引发回流。

7.JS的加载

这个环节又可以细分为以下几个步骤：
1.创建window对象。
2.加载文件
3.预编译
4.解释执行

随堂小练习

高频面试题：
1.DNS解析可以做哪些优化？
2.前端页面首屏加载可以做的优化有哪里？
3.谈谈你对前端性能优化的理解？
4.重绘和回流？

---

总结

写了大半天，费老鼻子劲终于整理完了，激动…

看到这里你应该对打开页面时，浏览器的整个工作流程很熟悉了，希望能对你有所帮助。如果还有什么不理解的欢迎给我留言或者私信，接下来的一段时间我会每天更新一些学习心得和一些算法题，欢迎关注，我们一起交流，共同学习。