Web 前后端基础架构原理

当我们打开浏览器去访问一个网站时，发生了什么？在了解整个过程之前，我们应该先了解一些基本概念

计算机网络

首先我们需要明确一点的是，当我们访问一个网站的时候，实际上是在与一个主机进行交互。就像去商店购物一样，只要你不差钱，商店有的，它都能提供给你。

主机（Host）

主机简单来说就是一台电脑，只不过它的作用更多，可以响应浏览器发送的请求。我们平时所用的电脑也可以充当一台服务器，只不过需要一些专业的操作，才能把它变成主机。

那么问题来了，世界上有很多台主机，我们在浏览器输入 www.taobao.com 的时候，它是怎么帮我们找到淘宝的主机的？

IP 与域名

每个 IP 对应一个主机，因此只要我们知道 IP 地址就可以正确地找到对应的主机了。说到这里可能还有个疑问，我们明明输入的是一个网址，也没有看见 ip 地址啊，他怎么知道我访问的是那一台主机？这个就要说到 DNS 的功劳了。首先用 ip 去找对应的主机是没问题的，我们输入的网址本质上就对应一个 ip，只是我们没有察觉。DNS 就是把输入的网址，找到对应的 ip ，然后返回给我们。这样我们就本能的以为，只要输入网址就能找到对应的网站了，这是 DNS 给我们的错觉。

DNS 是个网络上的服务，他包含了域名和 ip 地址的映射关系。windows 本机上有个 hosts 文件，可以自己添加和修改网址和 ip 的对应关系，假如我们把 www.taobao.com 对应的 ip 改成 127.0.0.1，这样在浏览器再次输入www.taobao.com 就找不到原本的淘宝网站了，而是映射到本机。

端口

现在请假设一个场景：你有一台电脑，电脑连了一根网线，同时电脑上开了好几个程序，像 QQ、淘宝、微信。你有没想过，一根网线传的数据，他怎么知道哪个是 QQ 要的数据，哪个是淘宝返回的数据呢？

区分不同应用的数据，我们就用到了端口，不同应用他所对应的端口不一样的。网线中传输的数据，每个数据包都有对应的端口信息，就像一列火车一样，每个人的目的地不一样，有的在广州下车，有的在深圳下车，目的地不一样。数据也是这样，根据端口到达不同的应用中去。

我们可以经常看到网址前面有 http 或 https，他们都对应着不同的端口号。HTTPS 协议的默认端⼝是443，HTTP协议的默认端口是80。别看我们访问网站的时候没有看到端口号，其实浏览器已经在后面偷偷帮我们补上了。

TCP 协议

当我们向远程的服务器发起请求时，TCP 协议就开辟了一条双车道的「高速公路」，不过在这条路上跑的是数据。同时数据也是一个一个的字节，所以也叫字节流，TCP是基于流的协议。由于是双车道，所以我们可以和服务器同时接受和发送数据，这叫做全双工协议，tcp就是全双工协议。半双工协议就是类似生活中的「对讲机」，只有对方说完，我们才能说话。

TCP 协议本质上就是规定字节流如何发送和接收

HTTP 协议

Http 是在 TCP 协议之上的一层协议。Http 定义了文本之外的东西如何被传输。我们把发送给服务器的字节流叫做 HTTP Request，比如我们访问豆瓣首页。我们就会向服务器发送如下字节流。

服务器收到请求之后就会返回一个 HTTP Response 字节流，除了 Headers 之外，还返回了 HTTP Response Body（响应体），response body 可以是文本，也可以是及二进制数据，包括图片、声音、下载的文件等。

刚才访问的豆瓣网站，就返回了一个 response body，一个 html 文件。我们得浏览器收到这个 html 文件，就会根据他的结构，标签去解析和展示他。我们看到的页面就是浏览器解析之后的样子。