跳至主要內容
从输入URL到页面加载的全过程

参考文章
参考文章

  • 输入url

  • 查找缓存:浏览器会从浏览器缓存->系统缓存->路由缓存查找是否有该页面

  • DNS域名解析:浏览器向DNS服务器发起请求,解析该URL中的域名对应的IP地址。

  • 建立TCP连接,进行三次握手

    为什么三次握手:客户端与服务端都需要确认双发的发送和接收能力。

    1. 第一次握手:建立连接时,客户端将初始化的序列号(client_isn)发送SYN包(syn=client_isn)到服务器,并进入SYN_SENT状态,等待服务器确认;
    2. 第二次握手:服务端收到SYN包也初始化自己的序列号(server_isn),然后发送SYN(syn=server_isn)+ACK(ack=client_isn+1)包给客户端,此时服务器进入SYN_RECV状态;
    3. 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=server_isn+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

    第三次握手是可以携带数据的,前两次握手是不可以携带数据的

  • 服务器响应请求并把对应的html文件发送给浏览器(浏览器缓存)

  • 关闭TCP连接:通过四次挥手释放TCP连接

    为什么四次挥手:因为TCP是全双工的,因此,每个方向都要单独关闭。

    当一方完成数据发送任务后,发送一个FIN来终止这一方向的连接,收到一个FIN只是意味着一方向不会再收到数据了,但是这个TCP连接上仍然能够发送数据,直到这一方也发送了FIN,首先进行关闭的一方执行主动关闭,另一方执行被动关闭.第一个关闭的最后等待2MSL。

    1. 第一次:Client将FIN置为1,序号seq=M,发送给Server,进入FIN_WAIT_1(终止等待1)状态
    2. 第二次:Server收到后,将ACK置为1,ack=M+1,响应给Client,进入CLOSE_WAIT(关闭等待)状态Client收到响应后,进入FIN_WAIT_2(终止等待2)状态
    3. 第三次:Server在结束所有数据传输后,将Fin置为1,seq=N+1,发送给Client,进入LAST_ACK(最后确认)状态
    4. 第四次:Client收到后,将ACK置为1,ack=N+1,响应给Server,进入TIME_WAIT(时间等待)状态,等待 2MSL后,进入CLOSED状态,Server收到后,进入CLOSED状态
  • 浏览器渲染

    • 构建DOM树:从上到下解析HTML文档生成DOM节点树,是DOM元素和属性节点组成的,树的根是document对象
    • 构建CSS规则树
    • 构建render树:Web浏览器将DOM和CSSOM结合,生成渲染树
    • 布局(layout):根据渲染树将节点树的每一个节点布局在屏幕上
    • 绘制(painting):遍历渲染树绘制所有节点,并使用UI后端绘制每个节点

狮子...大约 3 分钟面试浏览器计算机网络
HTTP状态码
  • 1xx 类状态码属于提示信息,是协议处理中的一种中间状态,实际用到的比较少。

  • 2xx 类状态码表示服务器成功处理了客户端的请求,也是我们最愿意看到的状态。

    • 「200 OK」是最常见的成功状态码,表示一切正常。如果是非 HEAD 请求,服务器返回的响应头都会有 body 数据。

    • 「204 No Content」也是常见的成功状态码,与 200 OK 基本相同,但响应头没有 body 数据。

    • 「206 Partial Content」是应用于 HTTP 分块下载或断点续传,表示响应返回的 body 数据并不是资源的全部,而是其中的一部分,也是服务器处理成功的状态。

  • 3xx 类状态码表示客户端请求的资源发生了变动,需要客户端用新的 URL 重新发送请求获取资源,也就是重定向。

    • 「301 Moved Permanently」表示永久重定向,说明请求的资源已经不存在了,需改用新的 URL 再次访问。

    • 「302 Found」表示临时重定向,说明请求的资源还在,但暂时需要用另一个 URL 来访问。

      301 和 302 都会在响应头里使用字段 Location,指明后续要跳转的 URL,浏览器会自动重定向新的 URL。

    • 「304 Not Modified」不具有跳转的含义,表示资源未修改,重定向已存在的缓冲文件,也称缓存重定向,也就是告诉客户端可以继续使用缓存资源,用于缓存控制。

  • 4xx 类状态码表示客户端发送的报文有误,服务器无法处理,也就是错误码的含义。

    • 「400 Bad Request」表示客户端请求的报文有错误,但只是个笼统的错误。

    • 「403 Forbidden」表示服务器禁止访问资源,并不是客户端的请求出错。

    • 「404 Not Found」表示请求的资源在服务器上不存在或未找到,所以无法提供给客户端。

    • 「499」 客户端发起请求后,一段时间没没有收到代理服务器的应答,导致连接失败

  • 5xx 类状态码表示客户端请求报文正确,但是服务器处理时内部发生了错误,属于服务器端的错误码。

    • 「500 Internal Server Error」与 400 类型,是个笼统通用的错误码,服务器发生了什么错误,我们并不知道。

    • 「501 Not Implemented」表示客户端请求的功能还不支持,类似“即将开业,敬请期待”的意思。

    • 「502 Bad Gateway」通常是服务器作为网关或代理时返回的错误码,表示服务器自身工作正常,访问后端服务器发生了错误。

    • 「503 Service Unavailable」表示服务器当前很忙,暂时无法响应客户端,类似“网络服务正忙,请稍后重试”的意思。


狮子...大约 3 分钟面试计算机网络http
HTTP与HTTPS
  • HTTPS是加密传输协议,HTTP是明文传输协议;

    HTTP 是超文本传输协议,信息是明文传输,存在安全风险的问题。HTTPS 则解决 HTTP 不安全的缺陷,在 TCP 和 HTTP 网络层之间加入了 SSL/TLS 安全协议,使得报文能够加密传输。

  • HTTPS需要用到CA证书,而HTTP不用;

  • HTTPS标准端口443,HTTP标准端口80;

  • HTTPS基于传输层,HTTP基于应用层;

  • HTTP是无状态的,连接简单;HTTPS是有状态的,通过HTTP+SSL构建,连接费时

    HTTP 连接建立相对简单, TCP 三次握手之后便可进行 HTTP 的报文传输。而 HTTPS 在 TCP 三次握手之后,还需进行 SSL/TLS 的握手过程,才可进入加密报文传输。

  • HTTPS缓存不如HTTP


狮子...小于 1 分钟面试计算机网络http
HTTP报文组成

请求报文

  • 请求行 — 包含http方法,页面地址,http协议,http版本
  • 请求头 — eg: host、Cache-Control,Accept,Cookie等
  • 空行 — 用来告诉服务端往下就是请求体的部分啦
  • 请求体 — 就是正常的query/body参数

响应报文

  • 状态行 — 包含http方法,http协议,http版本,状态码
  • 响应头 — eg: Content-type,Set-cookie, Cache-Control, Date, Server等
  • 空行 — 用来告诉客户端往下就是响应体的部分
  • 响应体 — 就是服务端返回的数据

狮子...小于 1 分钟面试计算机网络http
HTTP发展史

省流总结

HTTP1.0和HTTP1.1

  1. HTTP1.0默认是短连接。每次与服务器交互,都需要新开一个TCP连接;
    HTTP1.1默认是长连接。只要客户端服务端没有断开TCP连接,就一直保持连接,可以发送多次HTTP请求。(目前浏览器中对于同一个域名,默认允许同时建立 6 个 TCP 持久连接)
  2. HTTP1.1支持断点续传,只发送header信息(不带任何body信息)
  3. HTTP1.0缓存处理:expires,HTTP1.1引入更丰富的缓存字段如:cache-control

HTTP1.1和HTTP2.0

  1. HTTP1.1请求头header以纯文本传输;HTTP2.0支持头部压缩
  2. HTTP1.1是以文本格式传输数据,HTTP2.0改用二进制格式传输数据
  3. HTTP1.1需要等上一个请求的响应数据回来后才能发送另一个请求;
    HTTP2.0设计了 Stream 概念,多个 Stream 复用同一个TCP连接,并发处理多个请求
  4. HTTP2.0支持服务端推送

HTTP/2 通过头部压缩、二进制编码、多路复用、服务器推送等新特性大幅度提升了 HTTP/1.1 的性能,而美中不足的是 HTTP/2 协议是基于 TCP 实现的,于是存在的缺陷有三个。

  1. TCP的队头阻塞并没有彻底解决
  2. TCP以及TCP+TLS建立连接的延时
  3. 网络迁移需要重新连接

HTTP2.0和HTTP3.0

  1. HTTP3.0弃用TCP,基于UDP实现了QUIC协议,彻底解决了TCP层的队头堵塞
  2. 更快建立连接
  3. 通过连接ID,实现连接迁移;

狮子...大约 16 分钟面试计算机网络http