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

最新推荐文章于 2025-12-03 17:14:38 发布

转载最新推荐文章于 2025-12-03 17:14:38 发布 · 98 阅读

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c34018ae51d45523070f82f

文章标签：

本文深入解析HTTP请求全过程，从DNS解析、TCP三次握手到HTTP请求与响应，再到浏览器渲染及TCP连接断开，全面覆盖前端面试核心知识点。

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

大概分为

1、DNS 解析

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

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

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

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

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

如果在路由器，或者代理服务器，或者网络服务商找到了，对于的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 请求体,使用承载数据，客户端想服务器发送的数据载体的。里面可能包含客户端的请求要求，或者服务器的答复要求。如图

请求头

请求体

响应体也分为两部分。

响应头

响应体

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 构建和延缓网页渲染。

优化