什麽是 HTTP ?

前言

该文章同步发布於 我的部落格

有天在网路上看到一张很有趣的图片,是关於浏览器输入网址後发生的行为,还记得一开始在学习的时候,只能粗浅的理解 HTTP 是一个通讯协议,客户端发出 request 然後服务器送回一个 response。

下面是我看到的那张图片,今天就来解析一下到底发生了什麽事吧!

DNS

当我们从浏览器输入一段网址之後,第一站来到的就是 DNS ( Domain Name System )

可以看到图片中他先去 Cache 那边找了一下,Cache 就是在检查你是不是有来过这个网站,基本上我们第一次到一个网站的时候,拿下来的 HTML、CSS 等等的档案都会被快取在浏览器的记忆体里面。

所以这也是为什麽会先去看看 Cache 有没有,如果没有的话,就是 DNS 该发挥功用的时候了,他会解析我们输入的网址把他转化成 IP 位置。

从 Root Domain 到 Top Level Domain 一层一层的分析,来确定这段网址完整的 IP 位置,也就是说 DNS 其实很像一个巨无霸的电话簿,可以根据输入的网址来产生此网址的 IP 位置。

那为什麽要有 DNS 呢? 是因为人们基本上记不起来 IP 位置 (216.58.216.164),这样子你会知道这个是 Google 吗?

所以才有了 DNS 这个系统 (分离式资料库) 来存放域名对应的 IP 位置!

IP

那为什麽在 HTTP 里面会需要 IP 位置呢?

因为 IP 就是你这台主机在网际网路中的地址,当你要送信时,你也要写上你的地址吧?至於要收你信的人,也要有地址啊!

这样的功能在 IP 协议中叫做标识装置或网路。

所以当我们有了目的地的 IP 位置後,就可以接着往下一步走了!

开始 TCP 通道

这边开始就会提到 TCP/IP 的三次交握,也是常常会在面试中被问到的题目。

三次交握主要的目的是建立起虚拟的连线,来确定客户端和服务器端能够有稳定且安全的传输通道。

那为什麽要进行三次呢?

是因为如果只进行两次的话,没办法真正的确立双方的身份,就没办法建立一个双向的通道来传输资讯!

举个例子:

# A想和B借 1000 元,所以A传了一张纸条给B,上面写着 "可以和你借 1000 元吗?"
A -> B 

# B是一个很好的人,他回传说 "可以,但我要知道你是谁,这边是本票,请你签完传回来"
A <- B

# A签完本票盖完章後,传回去给B,接着两人建立了可以汇款的通道了!
A -> B

所以说少了第三次交握,B是不会知道A是谁的,这样子随便的给 1000 元,不是一件安全的事情!

当然上面只是举例,在真正的 TCP/IP 中,要看的是 ISN,但这边也不细讲,总之确立彼此的身份是在 TCP/IP 协议中很重要的一个步骤。

发出请求

前置步骤中,我们得到了目的地的 IP 位置,也建立起了虚拟的传输通道来进行资料交换,这时候我们就可以正式的发出 HTTP 的 request

在 HTTP 的 request 中有很多种方法,较常使用的是 GET POST DELETE PATCH 这些。

GET -> 请求展示资源,单纯获取资料
POST -> 请求提交实体资源,通常会造成 side effect
PATH -> 请求更改某部分资源
DELETE -> 请求删除某实体资源

这边只是比较大略的提一下 HTTP 的方法,可以往上看一下图片,发出的请求是 GET https://example.com HTTP/1.1

第一个是我们上面提到的 GET 方法,而中间则是 Domain 的名字,使用的是 HTTP/1.1 的协议。

这边看起来很简单也很好理解,但这都是在应用层面的显示,其实在 TCP 的传输层和 IP 的网路层中,做了很多我们看不到的事情,这边真的是要大大感谢 OSI 模型的设计,让我们可以专注在应用层面的执行,少了很多复杂的东西!

服务器回应

服务器收到 GET https://example.com HTTP/1.1 後,会根据你的请求去拿取特定的资源并且回传 response

这边看到图片中有许多不同的数字,其实代表的是 HTTP Response Code,这是经过协议的,每一个回传的数字都有特殊的意义。

像是 404 大家最常看到的数字,这代表请求的资源并不存在,所谓的不存在并不是坏掉喔,是根本没有这项资源,所以这边的回应还是正常的,服务器端也没有出现任何问题。

而另一个是工程师比较常遇到的 500 就代表是服务器端遇到了不符合预期的错误,并且没办法做出回应导致坏掉,相信大家最讨厌看到的也是这个数字~

而如果回应的是 200,那就是服务器根据所请求的资源正确的回应给客户端,这时候我们就会收到一大包的 HTML + CSS + JS 档案,并且回到浏览器!

解析 HTML + CSS + JS

这时候会解析 HTML 档案建立 DOM Tree,如下图所示:

同时也会根据载入的 Script 来解析 CSS 的 CSSOM Tree

而在分别解析 HTML 和 CSS 的时间,JS 就会顺势的被 Load 进去,最後一起变成 Render Tree!

接着把这个 Render Tree 丢回到浏览器,根据浏览器内建的引擎来渲染这个 Render Tree,最终变成我们看到的网站!

小结

看到这张图片的瞬间觉得很有趣,真的算是画得很详细,可以让人快速的理解 HTTP 是什麽,经过了什麽关卡,到最後的结果呈现。

还记得几个月前就有想写 什麽是 HTTP? 了,但拖延症发作,想学的太多,就一直到看到这张图片才有了动力来纪录一下!


<<:  Visual studio使用者到Rider没那麽简单

>>:  在安装haproxy时,显示重启失败

Day 8 - 基本语法3 (运算)

昨天我们学了转型态等等的语法,今天我们继续! 正文 运算 规则 在现实生活中,我们运算会写成 2 +...

[Day9] 注册API – admin

哈罗罗~~ 今天我们要来说明admin.py的部分啦~~ ,前面创建app时有稍微介绍一下,不知道夥...

Jupyter Notebook 输入栏位设计(2)

前言 上一篇介绍 interact 基本的用法,可以设计使用者介面(UI),但无法取得输入值,本篇介...

Day 15 - 苹果生态圈探讨

本文重点 因为我觉得要开发,不应该是一昧的写,了解系统也是很重要的!所以在这篇我会讲一些我自己对苹果...

[Day 01] 你要的全能IDE,Visual Studio Code,它来了!

前言 大家好,我是刚从硕士班毕业不到一年的社会新鲜人,目前担任小小的AI工程师。 兴趣是资料分析和深...