最近在和许多同学交流面经的时候，发现有一个问题：无论你是前端开发，还是后端开发，被问到的概率很高，在此，我想把这个问题记录一下
总体来说，在浏览器的地址栏中输入网址后，发生了如下的事情：
DNS解析
TCP连接
发送HTTP请求
服务器处理请求并返回HTTP报文
浏览器解析渲染页面
连接结束
下面还是具体说说每一步的大致原理
1.DNS解析
DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当我们在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。网址到IP地址转换的过程是如何进行的?解析过程
DNS解析是一个递归查询的过程。
上述图片是查找www.google.com的IP地址过程。首先在本地域名服务器中查询IP地址，如果没有找到的情况下，本地域名服务器会向根域名服务器发送一个请求，如果根域名服务器也不存在该域名时，本地域名会向com顶级域名服务器发送一个请求，依次类推下去。直到最后本地域名服务器得到google的IP地址并把它缓存到本地，供下次查询使用。从上述过程中，可以看出网址的解析是一个从右向左的过程: com -> google.com -> www.google.com。但是你是否发现少了点什么，根域名服务器的解析过程呢？事实上，真正的网址是www.google.com.，并不是我多打了一个.，这个.对应的就是根域名服务器，默认情况下所有的网址的最后一位都是.，既然是默认情况下，为了方便用户，通常都会省略，浏览器在请求DNS的时候会自动加上，所有网址真正的解析过程为: . -> .com -> google.com. -> www.google.com.。
2.进行TCP连接
建立TCP链接，就是通常说的三次握手，首先是客户端向服务器发送请求是否可以建立链接，服务器返回同意后，客户端回馈服务器的响应，即完成3次通话。TCP中的三次握手和四次挥手，大家可以自行百度，这里就不多说了。
3.发送HTTP请求
在完成TCP连接后，接下来做的事情就是客户端向服务器端发送http请求，http请求内容包括：
- 请求行：方法+地址+http版本
- 请求头
- 请求体
请求行
请求行的格式为：
Method Request-URL HTTP-Version CRLF
举个例子：GET www.baidu.com HTTP/1.1
当然请求的方法分为GET POST PUT DELETE OPTION HEAD这些类型
请求头
请求头是指在客户端向服务器传递请求的附加信息和客户端自身的信息。
PS: 客户端不一定特指浏览器，有时候也可使用Linux下的CURL命令以及HTTP客户端测试工具等。例如postman、火狐的Restclient
常见的请求报头有: Accept, Accept-Charset, Accept-Encoding, Accept-Language, Content-Type, Authorization, Cookie, User-Agent等。
常见有Accept Accept-Charset Conent-Type Authorization
请求体
当使用POST, PUT等方法时，通常需要客户端向服务器传递一些参数数据。这些数据就储存在请求体中。在请求包头中有一些与请求体相关的信息，例如: 现在的Web应用通常采用Rest架构，请求的数据格式一般为json。这时就需要设置Content-Type: application/json。
给一个HTTP请求的例子：
GET请求
POST请求
4.服务器处理请求并返回HTTP报文
服务器端接到http请求后在会作出响应，响应内容包括：
- 响应行：http版本+状态码+状态描述
- 响应头
- 响应体
状态码
状态码是由3位数组成，第一个数字定义了响应的类别，且有五种可能取值:
1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务器端错误–服务器未能实现合法的请求。
平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500
响应头
与请求头部类似，为响应报文添加了一些附加信息，常见的响应头有Server Content-Type Content-Length Content-Charset等
响应体
服务器返回给浏览器的文本信息，通常后端返回的数据以及HTML, CSS, JS, 图片等文件就放在这一部分。
给一个HTTP响应报文的例子
5.浏览器解析渲染页面
浏览器在收到HTML,CSS,JS文件后，它将这些信息渲染到客户端页面上。下图对应的就是渲染的基本过程
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂，涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在，这些都需要浏览器去计算其位置和大小等，这个过程称为relow;当盒模型的位置,大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容，这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的，尤其是在移动设备上，它会破坏用户体验，有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。