從URL輸入到頁面展現發生了什么

如果說我們通過計算機連入了世界,那么瀏覽器可以算是一個看世界的窗口。那么,這個多彩的世界是如何展現在我們的面前的呢?現在我們就來看看從我們在瀏覽器地址欄輸入一個網址到瀏覽器將頁面展示出來這個過程發生了什么。

URL是什么

首先認識URL(Uniform Resource Locator),統一資源定位符。統一資源定位符是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示,是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL,它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。基本URL包含模式(或稱協議)、服務器名稱(或IP地址)、路徑和文件名。以http://mail.163.com/index.html為例:

  1. http://:這個是協議,也就是HTTP超文本傳輸協議,也就是網頁在網上傳輸的協議。
  2. mail:這個是服務器名,代表著是一個郵箱服務器,所以是mail.
  3. 163.com:這個是域名,是用來定位網站的獨一無二的名字。
  4. mail.163.com:這個是網站名,由服務器名+域名組成。
  5. /:這個是根目錄,也就是說,通過網站名找到服務器,然后在服務器存放網頁的根目錄
  6. index.html:這個是根目錄下的默認網頁。

過程

從輸入URL到頁面展現,包含以下過程:

  1. 地址欄輸入URL地址。
  2. 域名解析。
  3. 服務器處理。
  4. 網站處理。
  5. 瀏覽器處理。

我們可以形象的認為瀏覽器拿著指定的購物券(URL)去買到相應的貨物,然后展示在窗口。詳細過程如下:

域名解析

為了便于記憶和辨識,人們使用域名來登錄網站。但是為了讓計算機理解這個地址還需要把它解析為IP地址。每個域名背后有對應的IP地址,每個網站就是靠IP來定位的。IP是因特網中的每臺連接到網絡的計算機為實現相互通信而遵循的規則協議。

在說明IP尋址之前,我們先了解DNS概念。DNS(Domain Name System,域名系統),因特網上作為域名和IP地址相互映射的一個分布式數據庫能夠使用戶更方便的訪問互聯網,而不用去記住能夠被機器直接讀取的IP數串。通過主機名,最終得到該主機名對應的IP地址的過程叫做域名解析。 DNS解析是瀏覽器的實際尋址方式

首先,我們在地址欄輸入URL。瀏覽器會依次按下面的方法進行DNS解析域名:

  1. 瀏覽器會去自己的DNS緩存地址查看是否有當前地址的緩存記錄在一定的時間之內、瀏覽器訪問具有緩存記錄的網址,瀏覽器直接使用緩存ip地址進行訪問。
  2. 瀏覽器會從電腦C盤(windows下一般保存在C:\Windows\System32\drivers\etc)的hosts文件查找是否有存儲DNS信息,查找是否有目標域名和對應的IP地址;
  3. 從路由器的緩存DNS信息中查找;
  4. ISP DNS緩存查找,從網絡服務商(比如電信)的DNS緩存信息中查找;
  5. 經由以上三種查找方法還沒查找到目標URL對應的IP的話,就會向根域名DNS服務器查找目標URL的對應IP,根域名服務器會向下級服務器轉送請求,層層下發,直至找到對應IP為止。

經過以上IP尋址的過程,目標URL查找到對應的IP地址之后,通過IP地址查找到對應的服務器,瀏覽器將用戶發起的HTTP請求發送給服務器。HTTP請求包括請求報頭和請求主體兩個部分,其中請求報頭包含了至關重要的信息,包括請求的方法(GET / POST)、目標url、遵循的協議(http / https / ftp…),返回的信息是否需要緩存,以及客戶端是否發送cookie等。下一步就到了服務器處理階段的工作。

服務器處理

服務器:是一臺安裝了系統的機器,常見的系統如linux,windows server2012,系統里安裝的處理請求應用叫 Web server,常用Web服務器有Apache Nginx IIS Lighttpd。對于不同用戶發送的請求,會結合配置文件,把不同請求委托給服務器上處理對應請求的程序進行處理,然后返回后臺程序處理產生的結果作為響應。

網站處理

網站處理,就是實際后臺處理的工作。后臺開發現在有很多框架,但大部分都還是按照MVC(view-model-controller)設計模式進行搭建的。

image.png
瀏覽器處理

通過后臺處理返回的HTML字符串結果會被瀏覽器讀取解析,對應就是HTML頁面加載、解析、渲染的工作。瀏覽器通過上面步驟計算得到渲染樹,是DOM樹的可視化表示,構建渲染樹使頁面以正確的順序繪制出來,遵循一定的渲染規則,經過一系列的渲染工作,實現網站頁面的繪制,由此最終完成了頁面展示。

后記

以上就是從URL輸入到頁面展示的全過程。由于時間以及學識有限,很多細節沒有鋪展開。繼續努力學習,以后慢慢完善。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,732評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,214評論 3 426
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,781評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,588評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,315評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,699評論 1 327
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,698評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,882評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,441評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,189評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,388評論 1 372
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,933評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,613評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,023評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,310評論 1 293
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,112評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,334評論 2 377

推薦閱讀更多精彩內容