第 5️⃣ 座大山：一次完整页面请求经历的七个步骤

JS 深度剖析 JS 高级 #JavaScript

2022-09-14 | 2024-05-15 | 1k | 3 分钟

第一步：URL 地址解析

传输协议 （把信息在客户端和服务器端进行传递）
1. http：超文本传输协议，传输的内容除了文本，还有可能是 二进制编码、BASE64码、文件流 等等；
2. https：比 http 更加安全的传输协议 （传输通道设置加密算法 SSL），一般支付类网站都是 https 协议；
3. ftp：资源上传协议，一般应用于把本地文件直接上传到服务器端；
域名
1. 一级域名 www.baidu.cn
2. 二级域名 video.baidu.cn
3. 三级域名 webG.video.baidu.cn
4. 常用域名：.com国际、.cn中国、.gov政府、.org官方、.net系统、.io博客、.vip、…
端口号 （根据端口号，找到当前服务器上指定的服务）
1. 0 ~ 65535 之间；
2. 不同协议有自己默认的端口号，http => 80、https => 443、ftp => 21，除这几个在书写的时候可以省略，其余的不能省；
请求资源的路径和名称：
1. /stu/index.html，一般情况下，如果访问的是 index.html 等，可以省略不写 （因为服务端一般会设置 index.html 为默认文档，当然可以自定义）
2. 伪 URL，数据请求的接口地址 /user/list，SEO 优化后的地址 https://item.jd.com/100006038463.html
问号传参部分 ?xxx=xxx
1. 客户端基于 get 系列请求，把信息传递会服务器，一般都会基于问号传参的模式；
2. 页面之间跳转，信息的一些通信也可以基于问号传参的方式 （单页面中组件和组件跳转之间的信息通信，也可能基于问号传参）；
3. 关于传递的内容需要进行编码处理 （处理特殊字符和中文）
  1. encodeURI / decodeURI：只能把空格和中文内容进行编码和解码，所以一般应用这种模式处理整个 URL 的编码；客户端和服务器端都支持这种编码和解码方式；
  2. encodeURIComponent / decodeURIComponent：所有的特殊字符和汉字都进行编码，一般不会整个 URL 编码，只会给传递的每一个参数值单独编码；客户端和服务器端都支持这种编码和解码方式；
  3. escape / unescape：这种方式不一定所有的后台都有，所以一般只应用于客户端自己内部编码；例如：存储 cookie 信息，把存储的中文进行编码和解码，特殊符号也会被编码；
设置哈希：#xxx

第二步：DNS 解析

特点：网站中，每发送一个 TCP 请求，都要进行 DNS 解析，一但当前域名解析过一次，浏览器一般会缓存解析记录，缓存时间一般在 1 分钟左右，后期发送的请求如果还是这个域名，则跳过解析步骤 => 这是一个性能优化点；
真实项目中，一个大型网站，要请求的资源是分散到不同的服务器上的 （每个服务器都有自己的域名解析）：
1. WEB 服务器 （处理静态资源文件，例如：html/css/js 等的请求）
2. 数据服务器 （处理数据请求）
3. 图片服务器 （处理图片请求）
4. 音视频服务器
5. …
6. 这样导致，需要解析的 DNS 会有很多次；

优化技巧

DNS Prefetch 即 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">