大家好，从输入url到页面显示发生了什么是在前端面试中经常被问到的问题，今天，我将一步一步向大家介绍这个过程以及对其中的一些步骤的原理和设计到的重要网络协议展开讲解。我大致将其分为下六大步骤：URL解析DNS查询TCP连接处理请求接受响应渲染页面?
URL解析URL解析顾名思义就是地址解析，它的作用是解析用户输入的地址，将它转换成ip地址。大致步骤如下：1.用户在地址栏输入url。2.浏览器检查缓存，查看缓存中是否存在请求的资源并且判断它是否新鲜。
若资源未缓存，发起新请求
若已缓存，检验是否足够新鲜（这里的新鲜指的是距离它上一次访问的时间长短），足够新鲜直接提供给客服端，否则发起新请求。
检验新鲜通常由两个HTTP头部字段进行控制，分别是Expires和Cache-Control，Expires是由http1.0提供的，它的值是一个绝对时间表示缓存新鲜日期，在这个日期内都可使用。Cache-Control是由http1.1提供的，它的值为max-age=x秒，x即为有效时长。3.浏览器解析URL获取协议，主机，端口，path等。4.浏览器封装一个HTTP（GET）请求报文。5.浏览器获取主机ip地址,过程如下：
找浏览器缓存，若没有，继续找。
本机缓存
hosts文件
路由器缓存
DNS缓存，若仍然未找到，进入第二个步骤，DNS查询。
DNS查询DNS查询有两种方式，递归查询和迭代查询。递归查询：本地域名服务器-->根域名服务器-->顶级域名服务器-->权限域名服务器查到了所需的IP地址后也是逐层返回。此方法会给根域名服务器造成的负载过大，所以基本不用。迭代查询：当本地域名服务器向根域名服务器发出迭代查询请求报文时，根域名服务器要么给出所查询的IP地址，要么告诉本地域名服务器你下一步应该向哪个顶级域名服务器查询。同样，顶级域名服务器收到由本地域名服务器发送的迭代请求后，要么给它IP，要么告诉它再去哪个权限域名服务器找。在实际应用当中，一般采用递归和迭代相结合的方式。本地主机向本地域名服务器查找为递归查询，本地域名服务器往下找则为迭代查询。总之，只要在缓存中没有找到，那么就走DNS查询，就可以获取输入的url中到目的主机的IP地址。
TCP连接6.获取到目的主机的IP地址后，即可建立TCP连接。
TCP连接建立TCP连接的建立有3个步骤，也就是我们常说的三次握手：
（1）第一步:客户机的TCP首先向服务器的TCP发送连接请求报文段。这个特殊报文段的首部中的同步位SYN置1,同时选择一个初始序号seq=J。TCP规定，SYN报文段不能携带数据，但要消耗掉一个序号。这时，TCP客户进程进入SYN-SENT(同步已发送)状态。（2）第二步:服务器的TCP收到连接请求报文段后，如同意建立连接，则向客户机发回确认，并为该TCP连接分配缓存和变量。在确认报文段中，把SYN位和ACK位都置1,确认号是ack=J+1,同时也为自己选择一个初始序号seq=K。同时，确认报文段也不能携带数据，但也要消耗掉一个序号。这时，TCP服务器进程进入SYN-RCVD(同步收到)状态。（3）第三步:当客户机收到确认报文段后，还要向服务器给出确认，并为该TCP连接分配缓存和变量。确认报文段的ACK位置1,确认号ack=y+1,序号seq=x+1。该报文段可以携带数据，若不携带数据则不消耗序号。这时，TCP客户进程进入ESTABLISHED(已建立连接)状态。成功进行以上三步后，就建立了TCP连接，接下来就可以传送应用层数据。TCP提供的是全双工通信，因此通信双方的应用进程在任何时候都能发送数据。但是，这时候有一个问题就是，服务器端的资源是在完成第二次握手时分配的，而客户端的资源是在完成第三次握手时分配的，这就使得服务器易于受到SYN洪泛攻击。SYN洪泛攻击指的是攻击者给目标服务器发送大量的SYN消息，服务器会发送SYN/ACK并等待攻击者的ACK消息，这时服务器上会为此连接占用一定资源。如果攻击者通过篡改包中的源IP或在Client端过滤相应包等方式使目标服务器一直收不到ACK消息，这时服务器上会保持大量的半连接，这些半连接占用的资源会通过一个超时机制来释放，如果攻击者发送的包数量巨大，服务器来不及回收资源，则会出现资源耗尽从而无法响应新的正常请求。SYNcookie可以有效抵御SYN洪泛攻击，洪泛攻击也还有其他几种方式，具体原理这里就不再过多介绍。
7.TCP连接建立之后发送HTTP请求
处理请求8.服务器接受请求并解析，将请求转发到服务程序。9.服务器检查HTTP请求头是否包含缓存验证信息，如果有则验证缓存是否新鲜，返回304等状态码。10.处理程序读取完整请求并准备HTTP响应。11.服务器将响应报文通过TCP连接发送回浏览器。
接受响应12.浏览器接受HTTP响应报文，此时可以根据需求是否关闭TCP连接，TCP连接的关闭有4个步骤，通常称为四次握手，这里就不再展开。13.浏览器检查响应状态码，如果为301,302一类跳转信息，浏览器会跳转到新的地址栏继续导航，如果是200，那么表示浏览器可以继续处理该请求。14.若资源可缓存，则进行缓存。15.对资源进行解码压缩。16.根据资源类型决定如何处理，URL请求的数据类型有时候是一个下载类型，有时候是正常的HTML页面，在HTTP头中有一个字段Content-Type，它告诉浏览器返回的响应体数据是什么类型。如果是下载类型，该请求会被提交到浏览器的下载管理器，此次URL请求就此结束。如果是HTML，则继续，接下来就准备渲染进程了。（以下假定资源为HTML）
渲染页面17.准备渲染进程，一般来说打开一个新页面的渲染进程策略是：
通常情况下，打开新的页面都会使用单独的渲染进程
但是如果从A页面打开B页面，而且A和B都属于同一站点的话，那么B页面可以复用A页面的渲染进程18.提交文档，就是浏览器进程会将网络进程接受到的HTML数据提交给渲染进程，当渲染进程确认提交之后，就将进入到正式的渲染阶段了。19.解析HTML文档，生成页面，步骤如下。
构建DOM树，因为浏览器无法直接理解和使用HTML，所以需要将HTML转换为浏览器能够理解的结构——DOM树。那么DOM树是如何构建的呢？大家可参考下图。
计算样式，也就是把css文本转换为浏览器可以理解的结构——styleSheets，并且计算出DOM树种的每个节点的具体样式，可参考下图。
创建布局树，有了DOM树和DOM树的样式时，就可以创建布局树了。可参考下图。
对布局树进行分层，并生成分层树，并为每个图层生成绘制列表，它会在合成线程中进行栅格化操作，在转交给浏览器进程即可生成页面，具体过程可参考李兵老师的浏览器工作原理课程(http://gk.link/a/11oJa)
20.显示页面（HTML解析过程中页面会逐步显示）。那么大致的流程就是这样，看到这里，赶紧回忆一下并试着组织好自己的语言去回答面试中面试官的提问吧。以上纯属个人在学习过程中的总结，若存在错误的地方，欢迎大家指正。
原文：https://juejin.cn/post/7098335747266052132
logo设计
创造品牌价值
¥500元起
APP开发
量身定制，源码交付
¥2000元起
商标注册
一个好品牌从商标开始
¥1480元起
公司注册
注册公司全程代办
¥0元起
查
看
更
多
- 官方电话官方服务
- 官方网站八戒财税知识产权八戒服务商企业需求数字市场