浏览器输入网址后会做什么

浏览器输入网址后会做什么

一、DNS域名解析

我们在浏览器输入网址，其实就是要向服务器请求我们想要的页面内容，所有浏览器首先要确认的是域名所对应的服务器在哪里。将域名解析成对应的服务器IP地址这项工作，是由DNS服务器来完成的。

客户端收到你输入的域名地址后，它首先去找本地的hosts文件，检查在该文件中是否有相应的域名、IP对应关系，如果有，则向其IP地址发送请求，如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。
如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。
如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。
如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13台根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找qq.com域服务器，重复上面的动作，进行查询，直至找到www.qq.com主机。
如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。

二、建立TCP链接

费了一顿周折终于拿到服务器IP了，下一步自然就是链接到该服务器。对于客户端与服务器的TCP链接，必然要说的就是『三次握手』。

客户端发送一个带有SYN标志的数据包给服务端，服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功。

上图也可以这么理解：

客户端：“你好，在家不，有你快递。”

服务端：“在的，送来就行。”

客户端：“好嘞。”

三、发送HTTP请求

与服务器建立了连接后，就可以向服务器发起请求了请求包括GET/POST、url、协议、浏览器头、cookies信息等。这里我们先看下请求报文的结构（如下图）：

请求报文

在浏览器中查看报文首部（以google浏览器为例）：

请求行包括请求方法、URI、HTTP版本。首部字段传递重要信息，包括请求首部字段、通用首部字段和实体首部字段。我们可以从报文中看到发出的请求的具体信息。具体每个首部字段的作用，这里不做过多阐述。

四、服务器处理请求

服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

服务器处理请求

五、返回响应结果

在HTTP里，有请求就会有响应，哪怕是错误信息。这里我们同样看下响应报文的组成结构：

响应报文

在响应结果中都会有个一个HTTP状态码，比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常，并能了解具体的错误。

状态码由3位数字和原因短语组成。根据首位数字，状态码可以分为五类：

状态码类别

2开头 （请求成功）表示成功处理了请求的状态代码。

200   （成功）  服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。   201   （已创建）  请求成功并且服务器创建了新的资源。  202   （已接受）  服务器已接受请求，但尚未处理。  203    （非授权信息）  服务器已成功处理了请求，但返回的信息可能来自另一来源。  204   （无内容）  服务器成功处理了请求，但没有返回任何内容。   205   （重置内容） 服务器成功处理了请求，但没有返回任何内容。 206   （部分内容）  服务器成功处理了部分 GET 请求。

3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。

300    （多种选择）  针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。   301   （永久移动）  请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD  请求的响应）时，会自动将请求者转到新位置。 302   （临时移动）   服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。 303   （查看其他位置） 请求者应当对不同的位置使用单独的  GET 请求来检索响应时，服务器返回此代码。 304   （未修改） 自从上次请求后，请求的网页未修改过。  服务器返回此响应时，不会返回网页内容。  305   （使用代理） 请求者只能使用代理访问请求的网页。  如果服务器返回此响应，还表示请求者应使用代理。  307   （临时重定向）   服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400    （错误请求） 服务器不理解请求的语法。  401   （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。  403    （禁止） 服务器拒绝请求。 404   （未找到） 服务器找不到请求的网页。 405   （方法禁用） 禁用请求中指定的方法。  406    （不接受） 无法使用请求的内容特性响应请求的网页。  407   （需要代理授权） 此状态代码与  401（未授权）类似，但指定请求者应当授权使用代理。 408   （请求超时）  服务器等候请求时发生超时。  409   （冲突）   服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。  410   （已删除）   如果请求的资源已永久删除，服务器就会返回此响应。  411   （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。  412    （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。  413   （请求实体过大）  服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。  414   （请求的 URI 过长） 请求的  URI（通常为网址）过长，服务器无法处理。  415   （不支持的媒体类型） 请求的格式不受请求页面的支持。  416    （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。  417   （未满足期望值）  服务器未满足"期望"请求标头字段的要求。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。

500    （服务器内部错误）  服务器遇到错误，无法完成请求。  501   （尚未实施） 服务器不具备完成请求的功能。  例如，服务器无法识别请求方法时可能会返回此代码。  502   （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。  503    （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。  504   （网关超时）   服务器作为网关或代理，但是没有及时从上游服务器收到请求。  505   （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP  协议版本。

六、关闭TCP连接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

4次握手

上图可以这么理解：

客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”

服务端：“收到，我看看我这边有木有数据了。”

服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”

客户端：“好嘞。”

七、浏览器解析HTML

准确地说，浏览器需要加载解析的不仅仅是HTML，还包括CSS、JS。以及还要加载图片、视频等其他媒体资源。

浏览器通过解析HTML，生成DOM树，解析CSS，生成CSS规则树，然后通过DOM树和CSS规则树生成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显示的节点。

要注意的是，浏览器的解析过程并非是串连进行的，比如在解析CSS的同时，可以继续加载解析HTML，但在解析执行JS脚本时，会停止解析后续HTML，这就会出现阻塞问题，关于JS阻塞相关问题，这里不过多阐述,后面会单独开篇讲解。

八、浏览器布局渲染

根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：repaint和reflow。

repaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。

所以我们应该尽量减少reflow和repaint，我想这也是为什么现在很少有用table布局的原因之一。

最后浏览器绘制各个节点，将页面展示给用户。