：點上面關注免費學習前端知識！

前言

        登入網站，是我們每個人每天都會做的事。從開啟瀏覽器，在地址輸入框輸入URL，按下enter鍵回車，網站頁面就展示在我們面前。而這背後發生了什麼，讓這個頁面得以展現在我們面前，是今天這篇文章想要說明的。

一、URL是什麼

        URL（Uniform Resource Locator），統一資源定位符，實際就是網站網址，又稱域名。在茫茫網路世界中，瀏覽器就是靠URL來查詢資源位置。URL包含協議部分，是瀏覽器和www全球資訊網之間的溝通方式，它會告訴瀏覽器正確在網路上找到資源位置。常見的協議有http、https、ftp、file、telnet等。其中http是最常見的網路傳輸協議，而https則是進行加密的網路傳輸。

       IP的意義

       為了便於記憶或辨識，人們使用域名來登入網站，每個域名背後有對應的IP地址。每個網站就是靠IP來定位的。IP是因特網中的每臺連線到網路的計算機為實現相互通訊而遵循的規則協議。IP分為區域網IP和全網IP。辦公中常用的飛秋工具，就是使用辦公室區域網IP進行通訊的典型表現。每臺計算機的本機IP都是127.0.0.1（即localhost）。瀏覽器並不能識別URL是什麼，因此從輸入URL開始，瀏覽器就要做域名解析，也就是IP定址的工作。

二、IP定址過程簡述

       這裡先說明DNS概念

       DNS（Domain Name System，域名系統）——記錄域名和IP地址相互對映的資訊，人們可以免於記住IP數串。全國DNS資訊可在網上查詢到，各省都有對應分配不同的IP網段。大型企業會有自己的DNS伺服器，專門儲存域名和IP的對映關係，例如為大多數人熟知的谷歌DNS伺服器，地址8.8.8.8。

       DNS解析是瀏覽器的實際定址方式。IP定址過程複雜，涉及多層裝置和概念知識。在此，我只簡單記錄兩種使用情況下的DNS解析方式，以作了解。

       情況1：對於瀏覽器首次登陸或者相隔一段時間內登陸某個網站

     （1）輸入URL地址後，瀏覽器會從電腦C盤的hosts檔案查詢是否有儲存DNS資訊，查詢是否有目標域名和對應的IP地址；

      （2）從路由器的快取DNS資訊中查詢；

      （3）ISP DNS快取查詢，從網路服務商（比如電信）的DNS快取資訊中查詢；

      （4）經由以上三種查詢方法還沒查詢到目標URL對應的IP的話，就會向根域名DNS伺服器查詢目標URL的對應IP，根域名伺服器會向下級伺服器轉送請求，層層下發，直至找到對應IP為止。

       情況2：對於近期內有在瀏覽器登入過的網站，本地瀏覽器會有DNS快取，可以直接查詢到IP地址。

       經過以上IP定址的過程，目標URL查詢到對應的IP地址之後，通過IP地址查詢到對應的伺服器，瀏覽器將使用者發起的http請求傳送給伺服器。下一步就到了伺服器處理階段的工作。

三、伺服器處理使用者請求

        每臺伺服器上都會安裝處理請求的應用——web server。常見的web server產品有apache、nginx、IIS或Lighttpd等。

       web server 擔任管控的角色，對於不同使用者傳送的請求，會結合配置檔案，把不同請求委託給伺服器上處理對應請求的程式進行處理（例如CGI指令碼，JSP指令碼，servlets，ASP指令碼，伺服器端JavaScript，或者一些其它的伺服器端技術等），然後返回後臺程式處理產生的結果作為響應。

        伺服器上程式處理使用者請求的這部分，就是下一步要講的網站處理階段的工作。

四、網站處理階段

      網站處理，就是實際後臺處理的工作。後臺開發現在有很多框架，但大部分都還是按照MVC設計模式進行搭建的。

       MVC是一個設計模式，將應用程式分成三個核心部件：模型（model）-- 檢視（view）--控制器（controller），它們各自處理自己的任務，實現輸入、

處理和輸出的分離。

      1、檢視（view）

      檢視是使用者看到並與之互動的介面。這是前端工作的主力部分。

       2、模型（model）

       模型是將實際開發中的業務規則和所涉及的資料格式模型化，應用於模型的程式碼只需寫一次就可以被多個檢視重用。在MVC的三個部件中，模型擁有最多的處理任務。一個模型能為多個檢視提供資料。

       3、控制器（controller）

       控制器接受使用者的輸入並呼叫模型和檢視去完成使用者的需求。Controller處於管理角色，從檢視接收請求並決定呼叫哪個模型構件去處理請求，然後再確定用哪個檢視來顯示模型處理返回的資料。

       總結而言，首先控制器接收使用者的請求，並決定應該呼叫哪個模型來進行處理，然後模型用業務邏輯來處理使用者的請求並返回資料，最後控制器用相應的檢視格式化模型返回html字串給瀏覽器，瀏覽器呈現網頁給使用者。因此，下一步就來到瀏覽器處理階段。

五、瀏覽器處理

       通過後臺處理返回的html字串結果會被瀏覽器讀取解析，對應就是html頁面載入、解析、渲染的工作。

       1、載入

       瀏覽器對一個html頁面的載入順序是從上而下的，並在載入過程並行進行解析渲染處理。在這個過程中遇到link標籤、image標籤、script標籤時，瀏覽器會再次向伺服器傳送請求獲取css檔案、圖片資源、js檔案，並執行js程式碼，同步進行載入解析。

        2、解析、渲染

        解析的過程，其實就是生成解析樹，即dom樹。dom樹是由dom元素及屬性節點組成，加上css解析的樣式物件和js解析後的動作實現。而渲染，就是將DOM樹進行視覺化表示。下一步就來到了繪製網頁的工作階段。

六、繪製網頁

       瀏覽器通過上面步驟計算得到渲染樹，是DOM樹的視覺化表示，構建渲染樹使頁面以正確的順序繪製出來，遵循一定的渲染規則，經過一系列的渲染工作，實現網站頁面的繪製，由此最終完成了頁面展示。

作者：huangyh_max
連結：http://www.jianshu.com/p/58e4597f9c7d
來源：簡書

完

看前端技術文章，就在Web前端精髓