在瀏覽器輸入網址,按下Enter後,發生了什麼事?

更新於 2020/10/09閱讀時間約 3 分鐘
以瀏覽www.google.com為例,瀏覽器需先找到www.google.com對應的ip地址,才能得到網頁資料,顯示在瀏覽器中。

那要如何才能找到ip呢? 這邊就要提到DNS(Domain Name System),他是一個資料庫,裡面紀錄了域名跟IP的對應,瀏覽器透過DNS可以找到IP。

查找ip地址的動作則稱為域名解析,查找步驟如下:
1. 查找瀏覽器緩存
瀏覽器曾經到訪過的網站,會緩存DNS記錄一段時間。
若有找到則結束,沒找到則進行下一步查找。
2. 查找作業系統緩存
從作業系統中的 hosts 檔案查找有沒有紀錄對應的ip。
若有找到則結束,沒找到則進行下一步查找。

windows 10 在這個位置:
裡面內容類似這樣:
3. 查找路由器緩存
路由器也會緩存DNS記錄。
若有找到則結束,沒找到則進行下一步查找。
4. 查找 ISP DNS 緩存
向網際網路服務供應商 (Internet Service Provider, ISP),如中華電信, 查找有沒有DNS記錄。
若有找到則結束,沒找到則進行下一步查找。
5. 查找根域名伺服器(root name server)
ISP DNS會向根域名伺服器進行查詢。
(1) ISP DNS向根域名伺服器詢問.com域名的IP。
(2) ISP DNS向.com域名伺服器詢問.google域名的IP。
(3) ISP DNS向.google域名伺服器詢問www域名的IP。
(4) ISP DNS將最終查到的www.google.com對應IP記錄在緩存中。
(5) 告訴瀏覽器www.google.com ip位址。

查到ip地址後,瀏覽器會向伺服器發送連線請求:
(1) TCP 三次握手,建立連線。
(2) 開始發送http request。
(3) 伺服器處理請求,並返回http response。
(4) 瀏覽器解析並呈現網頁。
(5) TCP 四次揮手,斷開連線。
為什麼會看到廣告
avatar-img
21會員
161內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Vic Lin的沙龍 的其他內容
結構化資料: 事先定義好每個欄位可以存放什麼資料,這種儲存的資料就是結構化資料。 像是關聯式資料庫中的資料,需要先把table欄位定義好,之後才能儲存資料。 半結構化資料: 無需事先定義好資料欄位,每一筆資料能夠根據需求儲存不同的欄位,因此很有彈性,如JSON, XML等等。 非結構化資料: 未整理
OAuth 2.0 是一個開放標準,允許user授權第三方應用存取該user的私有資料,而無需提供帳密資料給第三方應用。
想從javascript拿到不同源的資料,除了上一篇介紹的CORS,其實還有一個東西叫JSOP,是指透過script tag src的方式繞過同源政策來實現cross origin。
Cross-Origin Resource Sharing 簡稱 CORS,中文為跨來源資源共享。 上一篇提到web瀏覽器有同源政策的限制,而CORS則是一種安全確認機制,讓瀏覽器和伺服器之間能確保安全的進行cross origin資源共享,即若伺服器同意,即可達成跨來源資源共享。
同源政策是瀏覽器基於安全性考量而存在的一個政策,針對瀏覽器指令碼的限制。
REST全名為Representational State Transfer,它是一種軟體架構風格,不是一種標準。 以REST架構設計的系統就可以稱為 RESTful,就像是美麗 (Beauty) 的事物可以稱為 Beautiful。
結構化資料: 事先定義好每個欄位可以存放什麼資料,這種儲存的資料就是結構化資料。 像是關聯式資料庫中的資料,需要先把table欄位定義好,之後才能儲存資料。 半結構化資料: 無需事先定義好資料欄位,每一筆資料能夠根據需求儲存不同的欄位,因此很有彈性,如JSON, XML等等。 非結構化資料: 未整理
OAuth 2.0 是一個開放標準,允許user授權第三方應用存取該user的私有資料,而無需提供帳密資料給第三方應用。
想從javascript拿到不同源的資料,除了上一篇介紹的CORS,其實還有一個東西叫JSOP,是指透過script tag src的方式繞過同源政策來實現cross origin。
Cross-Origin Resource Sharing 簡稱 CORS,中文為跨來源資源共享。 上一篇提到web瀏覽器有同源政策的限制,而CORS則是一種安全確認機制,讓瀏覽器和伺服器之間能確保安全的進行cross origin資源共享,即若伺服器同意,即可達成跨來源資源共享。
同源政策是瀏覽器基於安全性考量而存在的一個政策,針對瀏覽器指令碼的限制。
REST全名為Representational State Transfer,它是一種軟體架構風格,不是一種標準。 以REST架構設計的系統就可以稱為 RESTful,就像是美麗 (Beauty) 的事物可以稱為 Beautiful。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
這篇文章分享我如何透過使用瀏覽器內建的編輯文字工具,大幅提高我的工作效率
Thumbnail
與多數瀏覽器相同,Brave 同樣基於 Chromium,與 Chrome 有相同的核心。Brave 由 Javascript 創始人及 Mozilla 前 CTO 、共同創始人,Brendan Eich, 於 2015 年創立。
Thumbnail
保護專注力:請關閉多餘的瀏覽器分頁 除了少數天縱英明的天才,平凡人如我等,其實少有一目十行、一心多用的本事。但說來莞爾,有時候我們還是戒不掉貪心的習慣! 哦,不信嗎?看看您電腦上正開著的瀏覽器,不管是Chrome、Firefox、Safari、Opera或者是微軟的Edge或IE瀏覽器,是否也跟我一
Thumbnail
用了微軟的新瀏覽器「Edge」十分鐘,就看到幾個翻譯相關的問題。簡單講,就是做中文化的人/單位「會翻譯,但是不太用腦」。那麼,想做這類工作的人該注意些什麼呢?
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
這篇文章分享我如何透過使用瀏覽器內建的編輯文字工具,大幅提高我的工作效率
Thumbnail
與多數瀏覽器相同,Brave 同樣基於 Chromium,與 Chrome 有相同的核心。Brave 由 Javascript 創始人及 Mozilla 前 CTO 、共同創始人,Brendan Eich, 於 2015 年創立。
Thumbnail
保護專注力:請關閉多餘的瀏覽器分頁 除了少數天縱英明的天才,平凡人如我等,其實少有一目十行、一心多用的本事。但說來莞爾,有時候我們還是戒不掉貪心的習慣! 哦,不信嗎?看看您電腦上正開著的瀏覽器,不管是Chrome、Firefox、Safari、Opera或者是微軟的Edge或IE瀏覽器,是否也跟我一
Thumbnail
用了微軟的新瀏覽器「Edge」十分鐘,就看到幾個翻譯相關的問題。簡單講,就是做中文化的人/單位「會翻譯,但是不太用腦」。那麼,想做這類工作的人該注意些什麼呢?