导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

⭐️ 浏览器请求网页的过程

1. 敲下回车，首先对网址进行 DNS 解析，把网址转为 IP 地址
2. TCP/IP 三次握手，建立以后才能开始 HTTP 请求
3. 浏览器得到 HTML 代码，浏览器再解析并下载其中的静态资源渲染页面
4. 四次挥手，中断连接
   1. TCP/IP 是一种长连接，过程完了以后需要客户端 or 服务器发起断开连接请求

⭐️ URI

• 资源标识的总称是：URI（统一资源标志符）（Uniform Resource Identifier）
  • 用来唯一的标识一个资源
• 具体定位某个资源的位置的时候叫：URL（统一资源定位符）（Uniform Resource Locator）
  • URL 可以用来标识一个资源，而且还指明了如何定位这个资源
  • 用地址定义一个资源
• 资源叫什么，名称是什么的时候叫：URN（统一资源名称）（Uniform Resource Name）
  • 即通过名字来表示资源的
  • 用名称定位一个资源
• URL肯定是一个URI，URI并不一定是URL，也有可能是URN

举例

客户端和服务端

C/S 和 B/S 架构

域名

什么是域名

1. 相当于访问互联网某一户人家的地址
2. 域名与服务器绑定以后，域名与服务器对应的 IP 是映射关系
   1. www.jd.com -> 111.13.28.118
3. 域名比 IP 更方便用户记忆
4. IP 可以对应多个域名，所以不同的域名可以访问一个或多个WEB网页

购买及解析

购买域名及备案

• 购买：阿里云、万网
• 备案域名：阿里云备案管理
• 解析域名：阿里云后台展示
  • 解析就是将域名与服务器 IP 映射的过程，由 DNS 服务器来完成
• A记录：Address. 域名与Ip对应的记录，将域名指向到服务器上
• CNAME记录：用于将一个域名别名映射到另一个域名，而不是直接映射到IP地址。CNAME让一个域名指向另一个域名，最终由该域名的A记录或其他记录指向IP地址。

A 记录的配置需要在服务器配置虚拟主机，而 CNAME 不用，因为本质是访问别人的服务器

举例：

你有两个域名 www.example.com 和 example.com，想让它们指向同一个服务器IP地址。你可以为 example.com 设置A记录指向IP地址，然后为 www.example.com 设置CNAME指向 example.com。

[example.com](<http://example.com/>) → 192.168.1.1 (A记录)
[www.example.com](<http://www.example.com/>) → [example.com](<http://example.com/>) (CNAME记录)

域名分类

域名级别

• 顶级域名（一级域名）：jsplusplus.com
• 二级域名：www.jsplusplus.com 、study.jsplusplus.com
• 三级域名：qianduan.study.jsplusplus.com

⭐️ DNS

• DNS：Domain Name Server 域名服务器
• 作用：转换 域名与对应ip 的服务器，保存了一张它们的对应的表
  • 一个域名 对应 一个 ip
  • 一个 ip 可以对应 多个域名
• DNS 就类似下面这张表

⭐️ DNS 解析

1. 输入 www.xxx.com
2. 客户端询问 DNS本地服务器 这个域名的 IP 是多少
   1. DNS本地服务器：就是网络运营商(电信、移动)。它们有自己的DNS服务器
3. 如果 DNS本地服务器 的缓存中有，则直接把IP返回
4. 如果 DNS本地服务器 没有此域名对应的IP，则会访问 根服务器 ，询问域名对应的IP是多少
5. 根服务器会告诉说，我这没有（因为根服务器存的很少，只有1k多条），你得在 .com域服务器 中找，接着把 .com域服务器 IP 地址给到 DNS本地服务器，DNS本地服务器会缓存此IP地址，下次就直接缓存中找
6. DNS本地服务器询问 .com域服务器 后，.com域服务器也说没查到（存的也很少，和根服务器一样，一般做管理用的），会告诉你说你去找 xxx.com域服务器吧
   1. xxx.com域服务器是xxx.com域名的总服务器 IP，并不是 xxx.com域名 本身的 IP
7. 然后 DNS本地服务器 就去找 xxx.com 域服务器，xxx.com 域服务器就去找 xxx.com 这个域名的 IP 地址，返回给 DNS本地服务器
8. 最后 DNS本地服务器 把这个 xxx.com 域名的 IP 写入缓存，再返回给浏览器，转换成 IP 地址
9. 这个时候浏览器就拿到了 IP 地址

IP

• 英文：Internet Protocol Address
• 中文：互联网协议地址、IP 地址
• 作用：分配给用户上网使用的互联网协议
• 分类：IPv4 IPv6 其他
  • IPv4：4组，十进制
  • IPv6：8组，十六进制
• 形式：192.168.0.1（长度32位（4个字节），十进制表示） （IPv4）

⭐️ IP 端口号 PORT

• 类比

  • IP: 上海市浦东新区川沙新镇、 域名：上海迪士尼乐园、 端口：乐园海盗船的入口
  • Ip地址：上海迪斯尼乐园的地址
    • IPv4 或 IPv6
  • 端口号：乐园中的不同游乐设施
    • 80、 443

• 解释

  • 找到一个 IP 就像找到了乐园的地址，你就可以到乐园，相当于可以访问到 IP 所对应的服务器，IP 加端口号，相当于到乐园去玩儿不同的项目，每个项目其实就是一个端口号。

• 总结

  • 每一个端口对应的是一个服务器的一个业务，访问一个服务器的不同端口相当于访问不同的业务。

• 端口号范围

  • 0-65535
  • 默认情况下
    • http：80
    • https：443
    • ftp：20、21

TCP

• TCP: Transmission Control Protocol 传输控制协议

• 特点：面向连接（收发数据前，必须建立可靠的连接）

• 建立连接基础：三次握手

• 应用场景：数据必须准确无误的收发

• 优点：速度慢、稳定、重传机制、拥塞控制机制、断开连接

• 缺点：效率低、占用资源、容易被攻击（三次握手 → DOS、 DDOS攻击）

• TCP/IP协议组：提供点对点的连接机制，制定了数据封装、定址、传输、路由、数据接收的标准。

• 只要是传数据，不管收发，都得建立可靠的连接

TCP 连接的前奏

⭐️ TCP 三次握手

1. 客户端：发送连接请求（喂，听得到吗？）
2. 服务端：我收到了请求，确认可以连接（听得到，你听得到我吗）
3. 客户端：收到服务端确认信息，确认连接建立（听到了，我们可以说话了）

• 发送序号是上一次的确认序号+1
• 确认序号是上一次发送信号+1

总结

1. 第一次握手
2. 第二次握手
3. 第三次握手

资源