網站原理

網站原理 (5):網站運作原理 – 從瀏覽器到伺服器端發生了甚麼事?

經過前 3 篇的努力,終於可以講到完整的網站原理啦!如果你還沒看過前面幾篇,建議你先去瀏覽一下,免得這篇有些專有名詞看不懂哦~

延伸閱讀:
網站原理 (1):什麼是URL?什麼是網域?兩者有什麼差別?
網站原理 (2):甚麼是DNS伺服器?它的功能是甚麼?
網站原理 (3):網站是怎麼構成的? – 淺談網站的3大要素:UI/UX設計師 前端工程師 後端工程師
網站原理 (4):什麼是靜態網頁?什麼是動態網頁?兩者有什麼差別?

接下來就來講一下網站運作原理吧!

由於網站是由許多檔案所組成的,換句話說,當我們要看到網站時勢必要拿到這些網站的資料,所以我們的最終目的是取得這個網站的資料,並透過瀏覽器來解析並且建構成網站。

以下我將瀏覽網站的過程比喻成買家具,假設我們想要取得的網站資料就像組合式家具一樣,也就是最終目的是將組合式家具運到家裡,並透過你親手將它組裝起來,才會變成你在 DM 上看到精美的樣子。

Step 1:找到想去網站的網址 v.s. 找到想買的家具公司

買家具的第一個步驟就是:你要先知道你想買哪間公司的家具。當你在網址欄輸入網址的時候,就像你找到你喜歡的家具公司一樣,我們假設這家家具公司叫做「怕梯訝家具」好了。

網站運作原理

Step 2:找到網址的 IP v.s. 找到家具公司的地址

我們都知道找到網址後並不能知道存放這個網站資料的伺服器真正的IP位置,必須透過 DNS 伺服器才能知道這個網址所對應到的 IP 位置。

這個過程就像你只知道「怕梯訝家具」這家公司並不能知道公司的確切地址,你必須到經濟部商工登記公示資料查詢服務輸入該公司的名字,才能查詢到這家公司在經濟部登記的確切地址。

Step 3:請求網站伺服器存取 v.s. 詢問家具公司商品可否購買

找到網站的 IP 位置後,因為我們的目的是要存取網站的資料,所以下一步就是詢問是否可以存取該網站的資料。

這個過程就類似詢問家具公司該商品是否可以購買,如果家具公司願意賣,才能把商品寄去你家。

網站運作原理

Step 4:開始傳送網站資料 v.s. 寄送家具零件到你家

當網站伺服器允許存取後,接著就會開始傳送最重要的東西,也就是該網站的資料啦!網站資料會以封包的形式做傳遞,並且透過網際網路傳送到你正在使用的瀏覽器。

這個過程就像是家具公司確定你購買的意願後,隨即出貨,把家具的零件透過貨運公司送到你家。

網站運作原理

Step 5:瀏覽器建構網站 v.s. 自己 DIY 家具

終於到最後一個步驟啦!當網站伺服器把資料傳給瀏覽器後,瀏覽器就會像用磚塊蓋房子一樣,把資料一個一個解析並建構,最後就變成我們看到網站的樣子啦!

這部分就像家具零件送到你家後,最後一個步驟就是要把它組裝起來啦!瀏覽器扮演的角色就像是組裝家具的人,這個人通常是你爸,當你爸敲敲打打,把家具零件照著說明書組裝好後,就會變成DM上看到的家具啦!

總結

好的,那我們把以上流程做成一張圖表大概就會是下面這個樣子。

網站運作原理
網站完整原理

希望今天這樣講解大家對網站原理的流程有比較清楚的認識!有任何問題的話歡迎大家留言!

如果有架設網站的需求,也歡迎參考下列文章哦:

延伸閱讀:
架設網站的方法 (1):自己寫程式碼架站
架設網站的方法 (2):使用架站平台一鍵架設
架設網站的方法 (3):使用CMS – 內容管理系統架設網站

或是參考我的 WordPress 架站教學系列:

延伸閱讀:
如何用 WordPress 架設網站 (1):前置作業 ⏤ 購買網域與主機
如何用 WordPress 架設網站 (2):Cloudways 教學
如何用 WordPress 架設網站 (3):namecheap 教學與 Cloudflare 教學

看完這篇文章是不是想換工作了呢(咦?那就千萬別錯過 2024 職涯博覽會!想換工作的,有機會在博覽會遇見更好的另一半,不想換工作的,有機會在博覽會遇見更好的工作!趕快點擊下面的 banner,拯救你的人生!!!https://s.yourator.co/jimmy

如果覺得我的文章有幫助的話,歡迎幫我的粉專按讚哦~謝謝你!

2 thoughts on “網站原理 (5):網站運作原理 – 從瀏覽器到伺服器端發生了甚麼事?”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top