从输入url到页面显示都发生了什么

这个问题是个经典的问题，也会是前端面试最常问的面试题之一，虽然简单的一句话，但是里面水很深，包含的知识量很大，下面就分模块研究一下。

大概分为

• 1、DNS解析
• 2、TCP三次握手建立连接
• 3、http发起请求
• 4、服务器处理请求，并返回响应报文
• 5、浏览器渲染dom树
• 6、断开TCP连接，解释本次请求流程

1、DNS 解析

咱们先看看dns是为什么诞生的，然后咱们就知道它是干什么的了。

大家一般访问网站的时候，通常都是通过域名进行访问，而不是通过ip地址进行访问。因为与ip地址是一串数字，相比域名（英文字母+数字）更符合人类的记忆习惯。

但是让计算机去理解域名（英文字母+数字），相对而言也是相当困难的，因为计算机更擅长处理一串数字。

为了解决这个问题。dns服务应用就产生了，dns协议服务提供了通过域名查找ip地址，或逆向从ip反查域名的服务。如图

详细的简介一下dns解析的步骤：

• 1、首先看看本地dns（hosts）如果找到对应的域名解析就执行tcp三次握手，如果没有找到执行2、
• 2、去路由器的dns服务去找对应ip，如果找到对应的域名解析就执行tcp三次握手，如果没有找到，接着执行3、
• 3、 去代理服务器的dns服务去找对应ip，如果找到对应的域名解析就执行tcp三次握手，如果没有找到，接着执行4、
• 4 代理服务器都找不到，那么就会去网络服务商哪里去找，直到找到就会执行tcp三次握手。

如果在路由器，或者代理服务器，或者网络服务商找到了，对于的ip，就会通知上一步把这个ip缓存起来（dns缓存--优化项），以便下次使用。

2、TCP协议的三次握手 咱们先看看TCP协议是干什么的，TCP协议在tcp/ip协议中为第二层，传输层，下面简介一下tcp/ip协议的4层。

• 1、应用层（http协议属于该层），

  作用：向用户提供应用服务时通信的活动。

  TCP/IP 协议族内预存了各类通用的应用服务。比如，FTP（File Transfer Protocol，文件传输协议）和 DNS（Domain Name System，域 名系统）服务就是其中两类。

• 2、传输层（tcp协议属于该层），

  作用：提供互联网中两台计算机之间的数据传输

• 3、网络层（ip协议属于改层）

  作用：用来处理网上流动的数据包，数据包是网上传输的最小单位，该层规定了使用什么样的路径到达对方的计算机，然后把数据包传递给对方

• 4、链路层

  作用：用来连接网络硬件的部分，包括控制操作系统、硬件的设备驱 动、NIC（Network Interface Card，网络适配器，即网卡），及光纤等 物理可见部分（还包括连接器等一切传输媒介）。硬件上的范畴均在 链路层的作用范围之内。

tcp/ip分层是非常好的处理方式，就像社会人类分工一样，各就其职，那个层出问题就单独的去处理那层，或者或要替换某层的话就直接把那层给替换掉，不用整体替换。或者两层之间好添加一层新的协议，只要能过处理好各层的接口，就可以添加。

例如https就是在应用层和传输层之间添加了一层SSL(secuer socket layer，安全套阶层)

来看图

发送端在发送的时候，都会加上该层的所属的头部信息，相反在接受层，接受数据时每层都会去掉该层的首部信息。

接下来就看看tcp协议的传输层的作用和实际交互方式。 传输层细分两个作用

• 1 提供字节流服务 字节流服务指的是，tcp协议会对大数据的请求体进行数据分割，分割成以报文段为单位的数据包，进行传输

• 2 确保数据能够到达目标 tcp协议为了能够确保数据传输到目标，会选择三次握手策略。

  握手过程采用tcp标志（flg）SYN--(synchronize)和ACK---（ackonwledgement） 发送端先发送一个带有SYN--(synchronize)flag的数据包给目标服务器，目标服务器得到请求后，会返回一个携带SYN--（synchronize）/ACK--(ackonwledgement)flag的数据包来传达确认信息，客户端接收到以后会，会回传一个ACK(ackonwledgement)的标志代表握手成功。如果中间有断开，tcp会以相同的顺序发送，这就是三次握手的真实面目，看下图

3 http 发送请求 当tcp三次握手建立以后，接下来就会发起一到多个数据请求。请求分两部分

• 1请求首部 分为2部分首部，里面有很多的详细的内容，有兴趣可以点击后面文章

  • 1 请求首部《请求首部字段--四大首部字段之一》
  • 2 通用首部《通用首部字段--四大首部字段之一》

• 2 请求体,使用承载数据，客户端想服务器发送的数据载体的。里面可能包含客户端的请求要求，或者服务器的答复要求。如图

请求头

请求体

响应体也分为两部分。

• 1 响应首部分为以下，

  • 1 响应首部《响应首部字段--四大首部字段之一》

  • 2 实体首部《实体首部字段--四大首部字段之一》

  • 3 响应状态码的部分，分为5种

    简介响应状态码1xx、2xx、5xx

    有关4xx的状态码解释

    面试常问有关响应状态码3XX

响应头

响应体

5 浏览器渲染

• 1 处理html标记并构建DOM树。
• 2 处理css标记并构建CSSOM树。
• 3 将DOM与CSSOM合并成一个渲染树。
• 4 根据渲染树来布局，以计算每个节点的几何信息。
• 5 将各个节点绘制到屏幕上。

我们的演示网页看起来可能很简单，实际上却需要完成相当多的工作。如果 DOM 或 CSSOM 被修改，您只能再执行一遍以上所有步骤，以确定哪些像素需要在屏幕上进行重新渲染。

默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕

优化

• 1 CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。

• 2 并利用媒体类型和查询来解除对渲染的阻塞"< link href="other.css" rel="stylesheet" media="(min-width: 40em)">"

• 3 hash 缓存 "< link href="89498567945.css" rel="stylesheet" media="(min-width: 40em)">"

JavaScript 允许我们修改网页的方方面面：内容、样式以及它如何响应用户交互。 不过，JavaScript 也会阻止 DOM 构建和延缓网页渲染。

优化

• 1 可以让您的 JavaScript 异步执行 "< script src="app.js" async>"
• 2 并去除关键渲染路径中任何不必要的 JavaScript
• 3 hash 缓存 "< script src="app34534534543.js" async> "

6、断开TCP连接，解释本次请求流程

• 1 当服务器完成数据传输后,将控制位FIN置1,提出停止TCP连接的请求
• 2 客户端收到FIN后对其作出响应,确认这一方向上的TCP连接将关闭,将ACK置1
• 3 由客户端再提出反方向的关闭请求,将FIN置1
• 4 服务器对客户端的请求进行确认,将ACK置1,双方向的关闭结束。

客户端和服务器双方都可以先提出断开连接

因个人了解程度有限，目前只能提供这么多的产考，有不足的地方可以提出来，会及时修改，后期或不断补充

转载于:https://juejin.im/post/5c34018ae51d45523070f82f