https://www.xiaobuteach.com/html/introduce/principle.html?from=bili

HTML 基本原理

我們?cè)L問(wèn)jd.com看到京東首頁(yè)，基本原理是什么？

BS架構(gòu)的請(qǐng)求與響應(yīng)模型。

1 瀏覽器

常用的瀏覽器包括：Chrome（Google公司）、Edge（微軟公司）、FireFox（Mozilla公司）、360瀏覽器等國(guó)內(nèi)大廠瀏覽器。

我們?cè)跒g覽器輸入網(wǎng)頁(yè)地址，請(qǐng)求相應(yīng)的網(wǎng)頁(yè)，網(wǎng)頁(yè)內(nèi)容來(lái)源于服務(wù)器。

2 服務(wù)器

網(wǎng)站對(duì)應(yīng)有自己的服務(wù)器主機(jī)，服務(wù)器主機(jī)部署網(wǎng)頁(yè)服務(wù)，常用的HTML服務(wù)（也稱WEB服務(wù)器）包括：nginx、apache等。

服務(wù)器主機(jī)有自己的域名與IP。

當(dāng)服務(wù)器接收到我們?yōu)g覽器傳遞的網(wǎng)頁(yè)地址請(qǐng)求，會(huì)把HTML代碼傳給我們的瀏覽器，瀏覽器解析HTML、完成頁(yè)面顯示。

3 BS架構(gòu)

上述使用瀏覽器向服務(wù)器請(qǐng)求網(wǎng)頁(yè)的過(guò)程即BS架構(gòu)，即：請(qǐng)求—響應(yīng)模型。

B：Browser，瀏覽器；

S：Server，服務(wù)器。

瀏覽器（B）向服務(wù)器（S）請(qǐng)求網(wǎng)頁(yè)，稱為請(qǐng)求過(guò)程。

服務(wù)器（S）向?yàn)g覽器（B）響應(yīng)HTML代碼，稱為響應(yīng)過(guò)程。

瀏覽器把"看不懂"的HTML代碼解析顯示成"好看"的網(wǎng)頁(yè)。

CS架構(gòu)

與BS架構(gòu)相對(duì)的是CS架構(gòu)。

C：Client，客戶端；

S：Server，服務(wù)器。

CS架構(gòu)需要下載安裝的應(yīng)用程序，如：QQ、360安全衛(wèi)士，屬于CS架構(gòu)。

CS架構(gòu)的缺點(diǎn)：升級(jí)需要用戶重新下載與安裝新版本；開發(fā)成本高；開發(fā)漂亮的界面成本高。

CS架構(gòu)的優(yōu)點(diǎn)：大型游戲需要響應(yīng)速度非?？?，CS架構(gòu)更加合適；操作系統(tǒng)底層操作權(quán)限更高，如360。

BS架構(gòu)的優(yōu)點(diǎn)

1）升級(jí)方便：不需要用戶重新下載與安裝，各網(wǎng)站系統(tǒng)升級(jí)對(duì)于用戶無(wú)需任何操作；

2）開發(fā)成本低，開發(fā)效率高；

3）容易開發(fā)好看的界面。

4 我們的hello頁(yè)面，服務(wù)器在哪里

本節(jié)內(nèi)容大家理解有服務(wù)器這么一個(gè)東東即可，不需要掌握。

我們安裝的Open In Default Browser插件，它內(nèi)置了服務(wù)器，當(dāng)我們通過(guò)它打開頁(yè)面時(shí)，會(huì)在本地啟動(dòng)服務(wù)。

服務(wù)的端口如下圖是52330（可能會(huì)變化）。localhost表示當(dāng)前主機(jī)的虛擬域名。

測(cè)試關(guān)閉服務(wù)器

通過(guò)DOS指令查找端口對(duì)應(yīng)進(jìn)程

netstat -ano | findstr 端口

查看進(jìn)程ID對(duì)應(yīng)的程序名

tasklist | findstr 進(jìn)程ID

強(qiáng)制關(guān)閉進(jìn)程

taskkill /pid 進(jìn)程ID /F

瀏覽器刷新頁(yè)面地址，無(wú)法訪問(wèn)。

VSCode通過(guò)Open In Default Browser再次打開網(wǎng)頁(yè)，它又會(huì)自動(dòng)啟動(dòng)服務(wù)。

上述過(guò)程，說(shuō)明Open In Default Browser會(huì)自動(dòng)啟動(dòng)服務(wù)器，非常方便開發(fā)。

生產(chǎn)環(huán)境的服務(wù)器

生產(chǎn)服務(wù)器部署項(xiàng)目時(shí)，我們會(huì)在服務(wù)器部署nginx或apache服務(wù)，不會(huì)通過(guò)vscode插件Open In Default Browser來(lái)啟動(dòng)服務(wù)。