在瀏覽器地址欄輸入URL到頁面展示在用戶面前的這個過程大致有以下幾個階段
- 域名解析（找到該網(wǎng)站的服務(wù)器ip是什么）
- 服務(wù)器處理（從該服務(wù)器中找到域名的網(wǎng)站）
- 網(wǎng)站處理（從網(wǎng)站中找到該域名對應(yīng)的各種html，css，js文件）
- 瀏覽器處理與繪制（把文件返回用戶瀏覽器，頁面呈現(xiàn)）
URL是什么
URL(Uniform-Resource-Locator),中文名叫統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上的資源。
基本的url有協(xié)議、域名、端口號（如果省略，則為默認(rèn)端口號）、路徑和文件名組成，如http://www.domainname.com:80/myhtml/test.html 。
此url協(xié)議為http協(xié)議
域名為www.domainname.com
端口號為80
路徑為/myhtml/test.html，文件名為test.html。
URL常用的協(xié)議
- http 超文本傳輸協(xié)議
- https 加密的超文本傳輸協(xié)議
- ftp 文件傳輸協(xié)議
- file 訪問本地電腦上的文件
- mailto 電子郵件地址
具體過程介紹
一、域名解析
世界上所有互聯(lián)網(wǎng)訪問者的瀏覽器都有將域名轉(zhuǎn)化為IP地址的請求（瀏覽器必須知道數(shù)字化的IP地址才能訪問網(wǎng)站）互聯(lián)網(wǎng)上的每臺設(shè)備都有他自己的ip地址，ip地址由四組數(shù)字組成，之間用點(diǎn)“.”連接，如“127.0.0.1”，那么我們要訪問的網(wǎng)站所在的服務(wù)器也必然有對應(yīng)的ip地址，但是現(xiàn)實(shí)中我們不方便用數(shù)字記錄要訪問的網(wǎng)站，而具有語義化的域名很好的解決了這個問題。比如域名 www.baidu.com對應(yīng)的ip地址為202.108.22.5，這就引出了DNS（domain name service)域名系統(tǒng)，DNS是因特網(wǎng)上域名和ip地址相互映射的一個分布式數(shù)據(jù)庫，里面記錄了成千上萬對域名和ip地址的對應(yīng)關(guān)系。
域名解析的具體流程可以分為5步：
- 瀏覽器首先搜素自己的DNS緩存，如果沒有的話會執(zhí)行第二步
- 搜索系統(tǒng)上的hosts文件，看其中是否有域名和對應(yīng)ip，沒有的話執(zhí)行第三步
- 搜索路由器的DNS緩存，一般路由器也會緩存DNS一段時間，沒有的話執(zhí)行第四步
- 搜索ISP DNS緩存，ISP(Internet Service Provider)，互聯(lián)網(wǎng)服務(wù)提供商，比如到電信的DNS上查找緩存，如果都沒有找到，則向根域名服務(wù)器發(fā)送查找請求，根域名服務(wù)器會指引到該域名的權(quán)威域名服務(wù)器，直到找到 IP。
8.8.8.8是Google提供的免費(fèi)的DNS服務(wù)器的ip地址
114.114.114.114是國內(nèi)第一個，全球第三個開放的DNS服務(wù)器的ip地址
DNS劫持：是指一些刻意制造或無意中制造出來的域名服務(wù)器數(shù)據(jù)包，把域名指往不正確的IP地址
二、服務(wù)器處理
服務(wù)器是一臺安裝系統(tǒng)的機(jī)器，常見的系統(tǒng)如Linux、windows server2012等。
系統(tǒng)里安裝的處理請求的應(yīng)用叫Web server（web服務(wù)器）。
常見的web服務(wù)器有Apache、Nginx、IIS、Lighttpd。
web服務(wù)器接收用戶的請求，或者接受請求反向代理到其他 web服務(wù)器。
通常情況下，一臺服務(wù)器中有很多網(wǎng)站，web server可以根據(jù)請求的域名找到其對應(yīng)的網(wǎng)站，或者反向代理到其他web server，然后再把用戶的請求交給該網(wǎng)站的代碼進(jìn)行處理，如下圖所示：
三、網(wǎng)站處理流程
什么是MVC，M代表Model（模型）：是應(yīng)用程序中用于處理應(yīng)用程序數(shù)據(jù)邏輯的部分，通常模型對象負(fù)責(zé)在數(shù)據(jù)庫中存取數(shù)據(jù)。
V代表View（視圖）：是應(yīng)用程序中處理數(shù)據(jù)顯示的部分。，通常視圖是依據(jù)模型數(shù)據(jù)創(chuàng)建的。（前端工程師主要負(fù)責(zé)）
Controller（控制器）：是應(yīng)用程序中處理用戶交互的部分，通?？刂破髫?fù)責(zé)從視圖讀取數(shù)據(jù)，控制用戶輸入，并向模型發(fā)送數(shù)據(jù)。
四、瀏覽器處理與繪制
瀏覽器是一個邊解析邊渲染的過程，它首先解析HTML文件構(gòu)建DOM樹，然后解析CSS文件構(gòu)建渲染樹，待渲染樹構(gòu)建完成后，瀏覽器開始布局渲染樹并將它繪制到屏幕上
JS的解析是由瀏覽器的JS解析引擎完成的，JS是單線程運(yùn)行，也就是說，在同一時間內(nèi)只能做一件事，所有的任務(wù)都需要排隊，前一個任務(wù)結(jié)束，后一個任務(wù)才能開始。
瀏覽器在解析過程中，如果遇到請求外部資源時請求過程是異步的，并不會印象HTML文件的加載。但是當(dāng)文件加載過程中遇到JS文件，HTML文檔會暫停渲染過程，不僅要等待JS文件加載完畢，還要等待其執(zhí)行完畢，原因是JS文件有可能更改文檔的DOM結(jié)構(gòu)，也就是說JS文件執(zhí)行完畢前，后續(xù)所有資源的下載是沒有必要的，這就是JS阻塞后續(xù)資源下載的根本原因。CSS文件的加載不影響JS文件的加載，但是卻影響JS文件的執(zhí)行。JS代碼執(zhí)行前必須保證CSS文件已經(jīng)下載并加載完畢。
