當(dāng)我們在瀏覽器地址欄中輸入網(wǎng)址時鼎文，頁面會很快展現(xiàn)出來，這其中到底發(fā)生了什么解取？
總的來說分為如下幾個過程：
1.輸入url
2.域名解析
3.服務(wù)器處理請求
4.瀏覽器解析渲染頁面
1.輸入url
什么是url尾膊？
URL（Uniform Resource Locator）瞻凤，統(tǒng)一資源定位符，用于定位互聯(lián)網(wǎng)上的資源觉既，實(shí)際上就是網(wǎng)站網(wǎng)址惧盹。url的格式一般為：
協(xié)議類型://<主機(jī)名>:<端口>/<路徑>/文件名
其中協(xié)議類型可以是http（超文本傳輸協(xié)議）、https瞪讼、ftp（文件傳輸協(xié)議）钧椰、telnet（遠(yuǎn)程登錄協(xié)議）、file等等符欠。而http是最常見的網(wǎng)絡(luò)傳輸協(xié)議嫡霞，https則是進(jìn)行加密的網(wǎng)絡(luò)傳輸。
例如希柿，以http://www.reibang.com/u/hello.jpg诊沪，其中养筒，“http”表示與web服務(wù)器通訊采用http協(xié)議，簡書web服務(wù)器域名為www.reibang.com端姚，u/hello.jpg表示所訪問的文件存在于web服務(wù)器上的路徑晕粪。
IP是什么?
IP是因特網(wǎng)中的每臺連接到網(wǎng)絡(luò)的計算機(jī)為實(shí)現(xiàn)相互通信而遵循的規(guī)則協(xié)議。每個處于互聯(lián)網(wǎng)中的設(shè)備都有IP 地址寄锐，形如 192.168.0.1兵多，而127.0.0.1代表本機(jī)的 IP。IP又分為局域網(wǎng)IP和公網(wǎng)IP橄仆。而局域網(wǎng) IP 和公網(wǎng) IP 是有差別的剩膘。每個網(wǎng)站就是靠IP來定位的。
為了便于記憶或辨識盆顾，人們使用域名來登錄網(wǎng)站怠褐，每個域名背后有對應(yīng)的IP地址。
比如對于http://www.reibang.com的URL您宪，瀏覽器實(shí)際上不知道www.reibang.com到底是什么東西奈懒，需要查找www.reibang.com網(wǎng)站所在服務(wù)器的IP地址，才能找到目標(biāo)宪巨，這就是下文要說的域名解析即DNS解析磷杏。
2.DNS解析
DNS充當(dāng)了一個翻譯的角色，實(shí)現(xiàn)了網(wǎng)址到實(shí)際ip地址的轉(zhuǎn)換捏卓，那么它是如何進(jìn)行轉(zhuǎn)換的极祸，
過程如下，
當(dāng)用戶在瀏覽器中輸入url后,你使用的電腦會發(fā)出一個DNS請求到本地DNS服務(wù)器怠晴。本地DNS服務(wù)器一般都是你的網(wǎng)絡(luò)接入服務(wù)器商提供遥金，比如中國電信，中國移動,DNS請求到達(dá)本地DNS服務(wù)器之后會有以下幾個步驟：
1.本地 DNS服務(wù)器將該請求轉(zhuǎn)發(fā)到互聯(lián)網(wǎng)上的根域（根域沒有名字蒜田，在DNS系統(tǒng)中就用一個空字符串來表示稿械。例如www.baidu.com.現(xiàn)在的DNS系統(tǒng)都不會要求域名以.來結(jié)束，即www.baidu.com就可以解析了冲粤，但是現(xiàn)在很多DNS解析服務(wù)商還是會要求在填寫DNS記錄的時候以.來結(jié)尾域名美莫。
2.根域?qū)⑺樵冇蛎械捻敿売颍ū热缫樵僿ww.baidu,com，該域名的頂級域就是com）的服務(wù)器IP地址返回到本地DNS色解。
3.本地DNS根據(jù)返回的IP地址茂嗓，再向頂級域（就是com域）發(fā)送請求， com域服務(wù)器再將域名中的二級域（即www.baidu.com中的baidu.com）的IP地址返回給本地DNS科阎。
4.本地DNS再向二級域發(fā)送請求進(jìn)行查詢述吸。
5.之后不斷重復(fù)這樣的過程，直到本地DNS服務(wù)器得到最終的查詢結(jié)果，并返回到主機(jī)蝌矛。這時候主機(jī)才能通過域名訪問該網(wǎng)站道批。
DNS優(yōu)化
如果每次都經(jīng)過這么多步驟，是否太耗時間入撒？如何減少該過程的步驟呢隆豹？那就是DNS緩存。
DNS緩存
DNS存在著多級緩存茅逮，從離瀏覽器的距離排序的話璃赡，有以下幾種: 瀏覽器緩存，系統(tǒng)緩存献雅，路由器緩存碉考，IPS服務(wù)器緩存，根域名服務(wù)器緩存挺身，頂級域名服務(wù)器緩存侯谁，主域名服務(wù)器緩存。
3.服務(wù)器處理請求
當(dāng)瀏覽器得到相應(yīng)的ip地址之后章钾，會向服務(wù)器發(fā)送http請求墙贱，我們的web-server收到請求之后，會響應(yīng)請求http? response,有可能響應(yīng)的就是一個HTML文本贱傀，來讓瀏覽器可以瀏覽惨撇。
4.瀏覽器解析渲染頁面
瀏覽器在收到HTML,CSS,JS文件后，它是如何把頁面呈現(xiàn)到屏幕上的府寒？下圖對應(yīng)的就是WebKit渲染的過程串纺。
瀏覽器是一個邊解析邊渲染的過程。首先瀏覽器解析HTML文件構(gòu)建DOM樹椰棘，然后解析CSS文件構(gòu)建渲染樹，等到渲染樹構(gòu)建完成后榄笙，瀏覽器開始布局渲染樹并將其繪制到屏幕上邪狞。這個過程比較復(fù)雜，涉及到兩個概念: reflow(回流)和repain(重繪)茅撞。DOM節(jié)點(diǎn)中的各個元素都是以盒模型的形式存在帆卓，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為relow;當(dāng)盒模型的位置,大小以及其他屬性米丘，如顏色,字體,等確定下來之后剑令，瀏覽器便開始繪制內(nèi)容，這個過程稱為repain拄查。頁面在首次加載時必然會經(jīng)歷reflow和repain吁津。reflow和repain過程是非常消耗性能的，尤其是在移動設(shè)備上，它會破壞用戶體驗(yàn)碍脏，有時會造成頁面卡頓梭依。所以我們應(yīng)該盡可能少的減少reflow和repain。
JS的解析是由瀏覽器中的JS解析引擎完成的典尾。JS是單線程運(yùn)行役拴，也就是說，在同一個時間內(nèi)只能做一件事钾埂，所有的任務(wù)都需要排隊河闰，前一個任務(wù)結(jié)束，后一個任務(wù)才能開始褥紫。但是又存在某些任務(wù)比較耗時姜性，如IO讀寫等，所以需要一種機(jī)制可以先執(zhí)行排在后面的任務(wù)故源，這就是：同步任務(wù)(synchronous)和異步任務(wù)(asynchronous)污抬。JS的執(zhí)行機(jī)制就可以看做是一個主線程加上一個任務(wù)隊列(task queue)。同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)绳军，異步任務(wù)是放在任務(wù)隊列中的任務(wù)印机。所有的同步任務(wù)在主線程上執(zhí)行，形成一個執(zhí)行棧;異步任務(wù)有了運(yùn)行結(jié)果就會在任務(wù)隊列中放置一個事件门驾；腳本運(yùn)行時先依次運(yùn)行執(zhí)行棧射赛，然后會從任務(wù)隊列里提取事件，運(yùn)行任務(wù)隊列中的任務(wù)奶是，這個過程是不斷重復(fù)的楣责，所以又叫做事件循環(huán)(Event loop)。
瀏覽器在解析過程中聂沙，如果遇到請求外部資源時秆麸，如圖像,iconfont,JS等。瀏覽器將重復(fù)1-6過程下載該資源及汉。請求過程是異步的沮趣，并不會影響HTML文檔進(jìn)行加載，但是當(dāng)文檔加載過程中遇到JS文件坷随，HTML文檔會掛起渲染過程房铭，不僅要等到文檔中JS文件加載完畢還要等待解析執(zhí)行完畢，才會繼續(xù)HTML的渲染過程温眉。原因是因?yàn)镴S有可能修改DOM結(jié)構(gòu)缸匪，這就意味著JS執(zhí)行完成前，后續(xù)所有資源的下載是沒有必要的类溢，這就是JS阻塞后續(xù)資源下載的根本原因凌蔬。CSS文件的加載不影響JS文件的加載，但是卻影響JS文件的執(zhí)行。JS代碼執(zhí)行前瀏覽器必須保證CSS文件已經(jīng)下載并加載完畢龟梦。
