产品经理学技术：在浏览器输入URL回车后发生了什么

这是HTTP网络系列的第一篇文章。

计算机与网络设备要相互通信，必须要遵循一定的规则，我们把这种规则称为协议。协议会规定好谁先发起请求，怎么寻找服务器地址，怎么获取请求内容，怎么响应请求等等。

与互联网相关的协议集合统称为TCP/IP。而HTTP协议只是TCP/IP协议的一部分。下面只会讲到与HTTP相关的内容。

大致流程

1、URL解析

2、DNS解析

3、HTTP连接

4、服务器处理请求

5、浏览器接受响应

6、浏览器渲染页面

01

URL解析

●假设我们在浏览器输入URL：http://www.a.com/index.html?b=1

首先浏览器会判断你输入的地址是合法的URL还是待搜索的关键词，如果是合法的URL，则会解析出域名：www.a.com，然后进入下一步。

02

DNS解析

● 在浏览器输入的只是服务器域名，ip地址才是目标服务器的真实地址，所以为了寻址，要先经过DNS解析，把域名转化成IP地址。

03

HTTP连接

● 解析好ip地址后，浏览器会发起一条HTTP请求，和目标服务器建立一条连接来通信。

● 服务器会对连接请求做出响应，表示同意建立连接。

04

服务器处理请求

● 服务器根据http协议规定，从请求报文里面拿到请求的子路径：

/index.html?b=1。如果请求的文件是真实存在的，比如html、css、js、图片等，则直接把文件返回。否则就要走到后台代码的匹配路由上面。

● 如果走的是后台代码的匹配路由，则会执行后台相应的逻辑，如果逻辑里面有查询数据库的请求，则会向数据库服务器发起一条查询数据的请求，等待数据库的数据返回后，最后才把数据返回给前端。

● 数据准备好后，服务器开始构建响应，创建一条http响应报文，把资源信息放到响应体里面开始返回。

05

浏览器接受响应

● http请求响应，都有一个状态码返回，用来标记这次返回的状态。一般有以下几种状态码：

200：表示成功

302：表示重定向

404：表示找不到资源

405：表示浏览器请求类型错误（比如把get请求当作post请求来用）

500：表示服务器内部错误

502：网关错误

504：timeout，表示服务器在规定时间内没有返回资源

浏览器会根据状态码，做出相应的动作，遇到200会接受正常返回信息，开始渲染页面。遇到302，则会根据http响应头的location字段，再次发起一次地址是location的网络请求，遇到4开头和5开头的错误，则不会正常渲染，会提示相应的错误。

06

浏览器渲染页面

不同的浏览器，渲染过程也不完全相同，但是大概流程是一样的。

一个web前端网页大概由三部分构成，html组成了这个网页的结构，比如按钮，下拉框，表格。css展示了网页的样式，比如背景，字体颜色大小。javascript负责执行前端的一些事件，比如点击事件、悬浮事件，还有跟后台的交互。

1、HTML解析

浏览器拿到html网页后，会利用html解析规则，一行一行地往下解析，然后构建成一棵DOM节点的树。HTML解析完成后，浏览器会通知DOM解析完成。但是如果在解析html的过程中，遇到了js代码，会暂停解析，等执行完了js代码才继续往下解析。

2、CSS解析

解析完html后，开始解析css代码，也会构建出一棵css的规则树，然后把html和css结合起来，开始渲染页面，我们就可以看到眼前的网页啦。

3、javascript解析执行

如果有js代码，则会根据js的语法进行语法解析，按顺序执行js代码。