20170809-從URL輸入到頁面展現(xiàn)

shiguibiao 發(fā)布于2019-08-02 15:57 / 3455人閱讀

摘要：本地域名服務器在查找域名后，把對應的地址放在回答報文中返回。若本地域名服務器查找不到對應的，則此域名服務器就暫時成為中的另一個客戶，并向其他域名服務器發(fā)出查詢請求。這種過程直至找到能夠回答該請求的域名服務器為止。

從URL輸入到頁面展現(xiàn) 1.輸入URL

URL:統(tǒng)一資源定位符，是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示。

URL包含以下幾部分：協(xié)議、服務器名稱(或IP地址)、路徑、參數(shù)和查詢。

舉例說明：

常用協(xié)議：

協(xié)議	中文名稱	默認端口號
http	超文本傳輸協(xié)議	80
https	用安全套接字層傳送的超文本傳輸協(xié)議	443
ftp	文件傳輸協(xié)議	21
TELNET	遠程終端協(xié)議	23

如果地址不包含端口號，根據(jù)協(xié)議的默認端口號確定一個。

2.根據(jù)URL，在本地DNS緩存中查找域名對應的IP地址

瀏覽器和操作系統(tǒng)在獲取網(wǎng)站域名的實際IP地址后會對其IP進行緩存，在短時間內(nèi)重復訪問同一域名時，會直接在DNS緩存中讀取域名對應的IP地址，以減少網(wǎng)絡請求的損耗（先在瀏覽器DNS緩存中查找，如果沒有找到，則會在操作系統(tǒng)DNS緩存中查找）。瀏覽器和操作系統(tǒng)都有一個固定的DNS緩存時間，其中Chrome的過期時間是1分鐘，在這個期限內(nèi)不會重新請求DNS。Chrome瀏覽器看本身的DNS緩存時間比較方便，在地址欄輸入:

chrome://net-internals/#dns

就可以查看本地DNS緩存：

3.查詢hosts文件

如果在本地DNS緩存中沒有找到域名對應的IP地址，則會查詢hosts文件，看其中是否已經(jīng)有與當前域名對應的 IP 地址，如果有就會直接采用，如果沒有，那么就得由DNS服務器進行域名解析完成域名與IP的轉(zhuǎn)換工作。

4.域名解析

域名系統(tǒng)DNS(Domain Name System)：用來把人們使用的域名轉(zhuǎn)換為IP地址的系統(tǒng)。它是一個聯(lián)機分布式數(shù)據(jù)庫系統(tǒng)，采用客戶服務器方式。

域名到IP地址的解析：當瀏覽器需要把域名解析為IP地址時，會調(diào)用解析程序，并成為DNS的一個客戶，把帶解析的域名放在DNS請求報文中，以UDP用戶數(shù)據(jù)報方式發(fā)送給本地域名服務器可以是路由器或者是運營商服務器）。本地域名服務器在查找域名后，把對應的IP地址放在回答報文中返回。瀏覽器在獲取相應的IP地址后即可進行下一步的通信。

若本地域名服務器查找不到對應的IP，則此域名服務器就暫時成為DNS中的另一個客戶，并向其他域名服務器發(fā)出查詢請求。這種過程直至找到能夠回答該請求的域名服務器為止。

5.瀏覽器與服務器建立連接，并發(fā)送請求給服務器

當瀏覽器得到域名對應的IP地址后，則會使用TCP協(xié)議，和服務器建立連接（三次握手）。

和服務器建立連接后，瀏覽器則會使用相關協(xié)議(http或https)，向服務器發(fā)送請求。

HTTP協(xié)議請求方法主要有：get、post、put、delete等幾種方式。

6.服務器收到請求并處理，最后返回結果

服務器是一臺安裝系統(tǒng)的機器，常見的系統(tǒng)如Linux、windows server 2012，系統(tǒng)中安裝的處理請求的應用叫Web server。常見的Web服務器有 Apache、Nginx、IIS、Lighttpd，Web服務器接收用戶的請求，或者接受請求反向代理到其他Web服務器。

(以MVC框架為例)當服務器收到來自用戶的請求后，首先Controller(控制器)根據(jù)用戶的請求調(diào)用相應的Model(模型)去處理用戶請求相關的業(yè)務邏輯(包括對數(shù)據(jù)庫的增刪改查)，然后將處理結果傳遞給對應的View(視圖)，構造顯示頁面(HTML文件)。最后服務器使用HTTP響應返回相應的資源(HTML文件)。

7.瀏覽器處理響應

瀏覽器收到來自服務器的響應后，會將響應中的HTML字符串一句句讀取解析，解析到link標簽后重新發(fā)送請求下載css文件，解析到script標簽后重新發(fā)送請求下載js文件，并執(zhí)行代碼，解析到img標簽后重新發(fā)送請求獲取圖片資源。

瀏覽器根據(jù)html、css計算得到渲染樹，結合相關js的執(zhí)行結果，最終將網(wǎng)頁繪制到屏幕上，。

在查找資料的過程中，看到一篇簡單易懂還挺有趣的文章：

HTML頁面加載和解析流程

用戶輸入網(wǎng)址（假設是個html頁面，并且是第一次訪問），瀏覽器向服務器發(fā)出請求，服務器返回html文件；

瀏覽器開始載入html代碼，發(fā)現(xiàn)＜head＞標簽內(nèi)有一個＜link＞標簽引用外部CSS文件；

瀏覽器又發(fā)出CSS文件的請求，服務器返回這個CSS文件；

瀏覽器繼續(xù)載入html中＜body＞部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了；

瀏覽器在代碼中發(fā)現(xiàn)一個＜img＞標簽引用了一張圖片，向服務器發(fā)出請求。此時瀏覽器不會等到圖片下載完，而是繼續(xù)渲染后面的代碼；

服務器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分代碼；

瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的＜script＞標簽，趕快運行它；

Javascript腳本執(zhí)行了這條語句，它命令瀏覽器隱藏掉代碼中的某個＜div＞（style.display=”none”）。突然少了這么一個元素，瀏覽器不得不重新渲染這部分代碼；

終于等到了＜/html＞的到來，瀏覽器淚流滿面……

等等，還沒完，用戶點了一下界面中的“換膚”按鈕，Javascript讓瀏覽器換了一下＜link＞標簽的CSS路徑；

瀏覽器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞們，“大伙兒收拾收拾行李，咱得重新來過……”，瀏覽器向服務器請求了新的CSS文件，重新渲染頁面。

其他相關資料：《how browsers work》

云服務器 GPU云服務器輸入url php從頁面抓取信息從域名到網(wǎng)站 spark從入門到

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/54400.html

20170809-從URL輸入到頁面展現(xiàn)

摘要：本地域名服務器在查找域名后，把對應的地址放在回答報文中返回。若本地域名服務器查找不到對應的，則此域名服務器就暫時成為中的另一個客戶，并向其他域名服務器發(fā)出查詢請求。這種過程直至找到能夠回答該請求的域名服務器為止。從URL輸入到頁面展現(xiàn) 1.輸入URL URL:統(tǒng)一資源定位符，是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示。 URL包含以下幾部分：協(xié)議、服務器名稱(或I...

Sanchi 2019-08-21 11:50 評論0 收藏0
20170809-從URL輸入到頁面展現(xiàn)

摘要：本地域名服務器在查找域名后，把對應的地址放在回答報文中返回。若本地域名服務器查找不到對應的，則此域名服務器就暫時成為中的另一個客戶，并向其他域名服務器發(fā)出查詢請求。這種過程直至找到能夠回答該請求的域名服務器為止。從URL輸入到頁面展現(xiàn) 1.輸入URL URL:統(tǒng)一資源定位符，是對可以從互聯(lián)網(wǎng)上得到的資源的位置和訪問方法的一種簡潔的表示。 URL包含以下幾部分：協(xié)議、服務器名稱(或I...

alighters 2019-08-29 13:09 評論0 收藏0
2017-08-11 前端日報

摘要：前端日報精選專題之函數(shù)柯里化前端可用性保障實踐入門指南頁面布局這個屬性你可能都不知道如何監(jiān)聽頁面變動并高效響應發(fā)布中文深入理解筆記集合與集合第期介紹譯系統(tǒng)設計入門之面試題解答設計一個網(wǎng)頁爬蟲掘金基于構建的移動端微應用個人文章 2017-08-11 前端日報精選 JavaScript專題之函數(shù)柯里化前端可用性保障實踐CSS入門指南-4：頁面布局這5個CSS屬性你可能都不知道！如何監(jiān)聽...

FullStackDeveloper 2019-08-21 11:52 評論0 收藏0
Web 前置知識——老生常談的從 URL 輸入到頁面展現(xiàn)背后發(fā)生的事

摘要：學前端后，谷歌算是重新為我打開了認識新世界的大門。作用可以讓人們免于記住那些繁瑣的數(shù)串全國信息可以在網(wǎng)上查找到，各省都有對應分配的網(wǎng)段大型企業(yè)都有自己的服務器，專門用來存儲域名和的映射關系如谷歌的服務器地址國內(nèi)知名服務器地址。本知識學習用時：1小時showImg(https://cdn.nlark.com/yuque/0/2019/png/229413/1554687733759-9...

Joonas 2019-08-02 16:12 評論0 收藏0
Web 前置知識——老生常談的從 URL 輸入到頁面展現(xiàn)背后發(fā)生的事

摘要：學前端后，谷歌算是重新為我打開了認識新世界的大門。作用可以讓人們免于記住那些繁瑣的數(shù)串全國信息可以在網(wǎng)上查找到，各省都有對應分配的網(wǎng)段大型企業(yè)都有自己的服務器，專門用來存儲域名和的映射關系如谷歌的服務器地址國內(nèi)知名服務器地址。本知識學習用時：1小時showImg(https://cdn.nlark.com/yuque/0/2019/png/229413/1554687733759-9...

GitChat 2019-08-23 16:49 評論0 收藏0