本文深入讲解HTTP请求的全过程，从客户端、服务器端角色解析，到URL解析、DNS域名解析、TCP连接建立，直至HTTP请求与响应，涵盖状态码、缓存机制及浏览器渲染流程。同时，探讨了前端性能优化策略，如避免DOM回流与重绘。
1. 客户端、服务器端
-
客户端：可以向服务器发请求，并接收返回的内容进行处理 -
服务器端：能够接收客户端请求，并且把相关资源信息返回给客户端的
=> 当前电脑既可以充当服务端又可以充当客户端。因此，如何区分是服务端还是客户端：不是针对于某一台机器的，而是针对于功能、需求的
2. 地址栏输入网址之后都发生了哪些操作？
-
请求阶段 -
URL地址解析 -
DNS域名解析 -
客户端与服务端建立TCP连接（三次握手） -
把客户端信息传递给服务器端（发送HTTP请求） -
服务器得到并处理请求（HTTP响应内容）
-
-
响应阶段 -
客户端渲染服务器返回的内容 -
和服务端断开TCP连接（四次挥手）
-
2.1 URL/URI地址解析
2.1.1 URL/URI/URN
-
URI（Uniform Resource Identifier）：统一资源标识符，URL和URN是URI的子集 -
URL（Uniform Resource Locator）：统一资源定位符，根据这个地址能找到对应的资源 -
URN（Uniform Resource Name）：统一资源名称，一般指国际上通用的（标准的）名字（例如：国际统一发版的编号）不常用
2.2.2 一个完整的URL所包含的内容
❝http://www.baidu.com/s?wd=index&name=ll#hash
❞
「协议 (http://):」 传输协议就是，能够把客户端和服务端通信的信息，进行传输的工具（类似于快递员）
-
http：超文本传输协议 ，除了传递文本之外，还可以传递媒体资源文件(或者流文件）及XML格式数据 -
https：更加安全的HTTP，一般涉及支付的网站都要采用https协议（支付宝、淘宝、天猫、GitHub、百度等网站），s是SSL，加密传输 -
ftp：文件上传协议（大资源的东西），一般应用于把本地资源上传或下载到服务器端 -
filezilla：ftp上传工具，通过这个工具基于ftp传输协议，可以把本地的文件上传到服务器上
-
「域名(www.baidu.com):」 一个让用户方便记忆的名字
-
顶级域名 qq.com 买域名买的就是顶级域名-万网 -
一级域名 www.qq.com -
二级域名 sports.qq.com -
三级域名 kbs.sports.qq.com -
.com 国际域名 -
.cn 中文域名 -
.com.cn -
.edu 教育 -
.gov 政府 -
.io 博客 -
.org 官方组织 -
.net 系统类
「端口号(80):」 端口号的取值范围0~65535，使用端口号来区分同一台服务器上的不同项目
-
http默认端口号是80 -
https默认端口号是443 -
ftp默认端口号是21 -
如果项目采用的就是默认端口号，我们在书写地址的时候，不用加端口号，浏览器在发送请求的时候会帮我们默认给加上
「请求资源路径名称(/s)：」
-
默认的路径名称或者名称(xxx.com/stu/ 不指定资源名，服务器会找默认的资源，一般默认资源名称是default.html / index.html...当然这些可以在服务器端自己配置，如果都不写，找不到会显示404)
-
注意伪URL地址的处理：(URL重写技术是为了增加SEO搜索引擎优化的，动态的网址一般不能被搜索引擎收录，所以我们要把网址静态化，此时需要的是重写URL)
举例：https://item.jd.hk/23457607363.html=>它可能改写的是这个网址 https://item.jd.hk/index.php?id=23457607363
「问号传参信息( ?wd=index&name=ll)」
-
客户端想把信息传递给服务器，有很多的方式 -
URL地址的问号传参 -
请求报文传输（请求头和请求主体） -
也可以实现不同页面之间的信息交互，例如：从列表到详情
「HASH值(#hash)」
-
也可以充当信息传输的方式 -
锚点定位 -
基于HASH实现路由管控(不同的HASH值，展示不同的组件和模块)
2.2.3 URL的字符编码
请求地址中如果出现非有效Unicode编码内容，现代版浏览器会默认的进行编码
-
基于encodeURI编码，我们可以基于decodeURI解码，我们一般用encodeURI编码的是整个URL，这样整个URL中的特殊字符都会自动编译 -
encodeURIComponent / decodeURIComponent它相对于encodeURI来说，不用于给整个URL编码，而是给URL部分信息进行编码（一般都是问号传参的值编码）
=> 客户端和服务端进行信息传输的时候，如果需要把请求的地址和信息编码，我们则基于以上两种方式处理，服务器端也存在这些方法，这样就可以统一编码解码了
-
客户端还存在一种方式，针对于中文的编码方式 escape / unescape，这种方式一般只应用于客户端页面之间自己的处理，例如：从列表跳转到详情，我们可以把传递的中文信息基于这个编码，详情页获取编码后的信息再解码，再比如我们在客户端种的cookie信息，如果信息是中文，我们也基于这种办法编码...
2.2 DNS服务器域名解析
DNS服务器：域名解析服务器，在服务器上存储着 域名<=>服务器外网IP 的相关记录 而我们发送请求时候所谓的DNS解析，其实就是根据域名在DNS服务器上查找到对应服务器的外网IP
2.2.1 DNS优化
-
DNS缓存：一般浏览器会在第一次解析后，默认建立缓存，时间很短，只有一分钟左右 -
减少DNS解析次数：一个网站中我们需要发送请求的域名和服务器尽可能少即可 -
DNS预获取(dns-prefetch)：在页面加载开始的时候，就把当前页面中需要访问其他域名（服务器）的信息进行提前DNS解析，以后加载到具体内容部分可以不用解析了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- DNS预获取 -->
<!-- <meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//static.360buyimg.com">
<link rel="dns-prefetch" href="//misc.360buyimg.com">
<link rel="dns-prefetch" href="//img10.360buyimg.com">
<link rel="dns-prefetch" href="//img11.360buyimg.com">
<link rel="dns-prefetch" href="//img12.360buyimg.com"> -->
<title>AJAX</title>
<script>
// let link = document.getElementById('link');
// console.log(link);
</script>
</head>
2.3 建立TCP连接（三次握手）
关于三次握手以及下面的四次挥手，可以看掘金上这位博主的：三次握手
2.4 发送HTTP请求
http事务 / http请求： 都是指的一次完整的http请求（请求+响应）
2.4.1 HTTP报文
谷歌浏览器中F12 => network(所有客户端和服务器端的交互信息在这里都可以看到) => 点击某一条信息，在右侧可以看到所有的HTTP
-
请求报文：所有经过传输协议，客户端传递给服务器的内容，都被称为请求报文 -
起始行 -
请求头：前端设置的 有些是默认设置， 也可以前端自己设置； -
请求主体
-
-
响应报文：所有经过传输协议，服务器返回给客户端的内容，都被称为响应报文 -
HTTP状态码 -
响应头： 是后台给的 前端没办法修改 -
响应主体
-
-
HTTP报文：请求报文 + 响应报文
2.4.2 强缓存与协商缓存
「强缓存」 这种请求是到不了后台的；直接是从本地缓存中获取资源然后相应这个请求
-
Expires: 过期时间，在这个过期时间之内 的请求，都会直接从本地缓存获取资源； -
cache-control: max-age=3600 ； max-age 缓存的有效时间；3600秒
「协商缓存」 协商缓存：如果没有命中强缓存 ，才会有可能走协商缓存，
-
确实是去后台要东西了；但是后台告诉前端，这个请求可以使用缓存的内容；（304） -
etag/if-none-match :etag是后端生成的一个字符串；那么下一次请求的时候 浏览器会在请求头中添加一个if-none-match 的属性 -
这个属性对应的值 就是后台给的etag对应的值
-
-
last-modified/if-modified-since : last-modified 后端生成的一个时间，其实就是当前请求对应的内容最后一次更改的时间，下一次请求，请求头中 会带上 if-modified-since这个属性值是 last-modified 对应的值；
2.5 服务器得到并处理请求（HTTP响应内容）
2.5.1 HTTP状态码
1~5开头，三位数字，其中1开头的出现频率极低。
-
200 OK：成功 -
201 CREATED：一般应用于告诉服务器创建一个新文件，最后服务器创建成功后返回的状态码 -
204 NO CONTENT：对于某些请求（例如：PUT或者DELETE），服务器不想处理，可以返回空内容，并且用204状态码告知 -
301 Moved Permanently：永久重定向（永久转移） -
302 Moved Temporarily：临时转移，很早以前基本上用302来做，但是现在主要用307来处理这个事情，307的意思就是临时重定向Temporary Redirect =>主要用于：服务器的负载均衡等 -
304 Not Modified：设置HTTP的协商缓存 -
400 Bad Request：传递给服务器的参数错误 -
401 Unauthorized：无权限访问 -
404 Not Found：请求地址错误 -
500 Internal Server Error：未知服务器错误 -
503 Service Unavailable：服务器超负荷
2.6 客户端渲染服务器返回的内容
2.6.1 同步异步加载
遇到link/img/audio/video等是异步去加载资源信息（浏览器分配一个新的线程去加载，主线程继续向下渲染页面）,如果遇到的是script或者@import，则让主线程去加载资源信息（同步），加载完成信息后，再去继续渲染页面
2.6.2 浏览器渲染页面的步骤
-
处理 HTML 标记，构建 DOM 树 -
处理 CSS 标记，构建 CSSOM 树 -
将 DOM 树和 CSSOM 树融合成渲染树 -
根据生成的渲染树，计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流 => 布局（Layout）或 重排（reflow） -
根据渲染树以及回流得到的几何信息，得到节点的绝对像素 => 绘制（painting）或栅格化（rasterizing）
2.6.3 DOM的重绘与回流(重排)
-
重绘：元素样式的改变（但宽高、大小、位置等不变） -
回流：元素的大小或者位置发生了改变（当页面布局和几何信息发生变化的时候），触发了重新布局，导致渲染树重新计算布局和渲染 -
注意：回流一定会触发重绘，而重绘不一定会回流
2.6.4 前端性能优化：避免DOM的回流
-
放弃传统操作DOM的时代，基于vue/react开始数据影响视图模式 -
分离读写操作（现代浏览器都有渲染队列的机制） -
发现某一行要修改元素的样式，不立即渲染，而是看看下一行，如果下一行也会改变样式，则把修改样式的操作放到“渲染队列中”...一直到不在是修改样式的操作后，整体渲染一次，引发一次回流 -
offsetTop、offsetLeft、offsetWidth、offsetHeight、clientTop、clientLeft、clientWidth、clientHeightscrollTop、scrollLeft、scrollWidth、scrollHeight、getComputedStyle、currentStyle....会刷新渲染队列
-
-
样式集中改变 -
缓存布局信息 -
元素批量修改 -
动画效果应用到position属性为absolute或fixed的元素上（脱离文档流） -
CSS3硬件加速（GPU加速） -
牺牲平滑度换取速度 -
避免table布局和使用css的javascript表达式
2.7 和服务端断开TCP连接（四次挥手）
-
第一次挥手：由浏览器发起，发送给服务器，我请求报文发送完了，你准备关闭吧 -
第二次挥手：由服务器发起，告诉浏览器，我接收完请求报文了，我准备关闭，你也准备吧； -
第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完毕，你准备关闭吧； -
第四次挥手：由浏览器发起，告诉服务器，我响应报文接收完毕，我准备关闭，你也准备吧；
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
