你有沒有好奇過，當你在瀏覽器打開一個網頁的時候，從敲下回車的那一刻到看到網頁展現，中間短短的幾秒甚至幾百毫秒里，到底發生了什么？瀏覽器怎么就展現出了這么個網頁？來來來，讓我們一步步分析~
打開網頁的第一步肯定是輸入網址了，那么對於瀏覽器來說，這是它唯一的線索，也就是URL。URL全稱Unified Resource Locator，翻譯過來就是統一資源定位符，俗稱網址。打個比方，如果說網址是飯店店名，那瀏覽器就像外賣團隊，你告訴瀏覽器你想吃的是哪家，它就派人去店里拿了外賣再送到你面前。
當瀏覽器去找網頁的時候，首先需要去服務器上找網頁，那么網頁在哪里呢？ 存儲網頁的地方叫做服務器(Server)，服務器本身也是電腦，但是比個人電腦的性能要高很多。服務器也有多個，怎么找呢？就是根據給出的URL了。但其實，URL只是服務器地址的一個好記的名字而已，必須將URL解析為IP地址，才能找到相應的服務器。打個比方，URL好比是飯店的店名，那么IP地址就是是飯店的門牌地址。從URL到IP地址的過程叫做DNS查找，也就是DNS Lookup，這個過程所做的事情相當復雜，日后另起文章再詳細介紹。
Connect & Request
根據IP找到服務器后，就可以向服務器發送請求了，請求服務器將你需要的網頁發還給瀏覽器，瀏覽器和服務器傳輸信息的方式，就是建立連接。就像有個通道來供服務器和瀏覽器傳遞信息。
建立連接后，瀏覽器向服務器發起一個request請求，在請求中，需要告訴服務器想要的資源是什么，比如，我們請求google的首頁：http://google.com:80/path?q=a#hash
一個URL一般由6個部分組成：協議、主機名、端口號、資源位置、queryString、hashTag;不同的path代表不同的資源，一般指頁面，比較特殊的 / 是指根路徑，一般會是網站的首頁，和在電腦文件夾路徑是同樣的。
在前面所說的request請求中，包含一些數據：
GET / HTTP/1.1
Host: google.com
Accept:*/*
Pragma: no-cache
Cache-Control: no-cache
User-Agent:Mozilla/4.04[en](Win95;I;Nav)
GET / 指從服務器上請求一個資源，這個資源的位置是/。另外，Host: google.com代表請求的主機名是google.com。
Web Server
當服務器收到請求之后，經過Web Server對請求進行處理，最后將所請求的資源打包起來通過通道返回給瀏覽器。
每台服務器上都有Web Server用以處理請求，常見的有apache、nginx、IIS或Lighttpd等。
Web Server對於不同用戶發送的請求，會結合配置文件，把不同請求委托給服務器上處理對應請求的程序進行處理（如CGI腳本，JSP腳本，servlets，ASP腳本，服務器端JavaScript等），然后返回后台程序處理產生的結果作為Response返回給瀏覽器。
現有后台處理程序大部分都使用了MVC框架：模型(Model) - 視圖(View) - 控制器(Controller)；MVC是一種設計模式，三個部分的組件各自處理自己的任務，從而將輸入、處理和輸出分離。
控制器接收瀏覽器的請求，決定應該調用哪個模型來進行處理，然后模型用業務邏輯來處理用戶的請求並返回數據，最后控制器用相應的視圖格式化模型返回html字符串給瀏覽器，這個返回的數據，叫做響應(Response)。
Response和Request是對應的，響應也包含和請求類似的數據：
HTTP/1.0200OK
Date:Mon,31Dec200104:25:57GMT
Server:Apache/1.3.14(Unix)
Content-type:text/html
Last-modified:Tue,17Apr200106:46:28GMT
Etag:"a030f020ac7c01:1e9f"
Content-length:39725426
Content-range:bytes554554-40279979/40279980
響應分為兩個部分：響應頭和響應主體。其中網頁的代碼包含在響應主體中。
瀏覽器處理及渲染
瀏覽器收到Response后，首先對其進行加載，並根據其中的代碼繼續向服務器請求資源(css、javascript、img等)，加載完成后對頁面進行解析。
解析的過程，其實就是生成解析樹，即Dom樹。Dom樹是由Dom元素及屬性節點組成，加上css解析的樣式對象和js解析后的動作實現。
接下來對Dom樹進行可視化表示，也就是渲染，生成一顆渲染樹。
最后一步就是繪制網頁，瀏覽器根據渲染樹將元素繪制到屏幕上，同時執行js，完成整個頁面的展示。
More
以上，就是從打開網頁到看到網頁過程的簡要介紹，其中每個點拿出來說都是一本書。還需前行，還需努力！
作者：IrisYao
鏈接：https://www.jianshu.com/p/76d05329a420
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯系作者獲得授權並注明出處。