1. 輸入url

2. DNS解析

DNS解析的過(guò)程就是尋找哪臺(tái)機(jī)器上有你需要資源的過(guò)程叫胁。當(dāng)你在瀏覽器中輸入一個(gè)地址時(shí)索抓，例如www.baidu.com，其實(shí)不是百度網(wǎng)站真正意義上的地址∷希互聯(lián)網(wǎng)上每一臺(tái)計(jì)算機(jī)的唯一標(biāo)識(shí)是它的IP地址怜校，但是IP地址并不方便記憶间影。用戶更喜歡用方便記憶的網(wǎng)址去尋找互聯(lián)網(wǎng)上的其它計(jì)算機(jī)，也就是上面提到的百度的網(wǎng)址韭畸。所以互聯(lián)網(wǎng)設(shè)計(jì)者需要在用戶的方便性與可用性方面做一個(gè)權(quán)衡宇智，這個(gè)權(quán)衡就是一個(gè)網(wǎng)址到IP地址的轉(zhuǎn)換，這個(gè)過(guò)程就是DNS解析胰丁。它實(shí)際上充當(dāng)了一個(gè)翻譯的角色随橘，實(shí)現(xiàn)了網(wǎng)址到IP地址的轉(zhuǎn)換。網(wǎng)址到IP地址轉(zhuǎn)換的過(guò)程是如何進(jìn)行的?

3. TCP連接

HTTP協(xié)議是使用TCP作為其傳輸層協(xié)議的锦庸，當(dāng)TCP出現(xiàn)瓶頸時(shí)机蔗，HTTP也會(huì)受到影響。

4. HTTP請(qǐng)求

這部分又可以稱為前端工程師眼中的HTTP甘萧，它主要發(fā)生在客戶端萝嘁。發(fā)送HTTP請(qǐng)求的過(guò)程就是構(gòu)建HTTP請(qǐng)求報(bào)文并通過(guò)TCP協(xié)議中發(fā)送到服務(wù)器指定端口(HTTP協(xié)議80/8080, HTTPS協(xié)議443)。HTTP請(qǐng)求報(bào)文是由三部分組成: 請(qǐng)求行, 請(qǐng)求報(bào)頭和請(qǐng)求正文扬卷。

5. 服務(wù)器處理請(qǐng)求并返回HTTP報(bào)文

自然而然這部分對(duì)應(yīng)的就是后端工程師眼中的HTTP牙言。后端從在固定的端口接收到TCP報(bào)文開始，這一部分對(duì)應(yīng)于編程語(yǔ)言中的socket怪得。它會(huì)對(duì)TCP連接進(jìn)行處理咱枉，對(duì)HTTP協(xié)議進(jìn)行解析卑硫，并按照?qǐng)?bào)文格式進(jìn)一步封裝成HTTP Request對(duì)象，供上層使用蚕断。這一部分工作一般是由Web服務(wù)器去進(jìn)行欢伏，我使用過(guò)的Web服務(wù)器有Tomcat, Jetty和Netty等等。

HTTP響應(yīng)報(bào)文也是由三部分組成: 狀態(tài)碼, 響應(yīng)報(bào)頭和響應(yīng)報(bào)文亿乳。

6. 瀏覽器解析渲染頁(yè)面

瀏覽器是一個(gè)邊解析邊渲染的過(guò)程硝拧。首先瀏覽器解析HTML文件構(gòu)建DOM樹，然后解析CSS文件構(gòu)建渲染樹葛假，等到渲染樹構(gòu)建完成后障陶，瀏覽器開始布局渲染樹并將其繪制到屏幕上。這個(gè)過(guò)程比較復(fù)雜桐款，涉及到兩個(gè)概念: reflow(回流)和repain(重繪)咸这。DOM節(jié)點(diǎn)中的各個(gè)元素都是以盒模型的形式存在，這些都需要瀏覽器去計(jì)算其位置和大小等魔眨，這個(gè)過(guò)程稱為relow;當(dāng)盒模型的位置,大小以及其他屬性媳维，如顏色,字體,等確定下來(lái)之后，瀏覽器便開始繪制內(nèi)容遏暴，這個(gè)過(guò)程稱為repain侄刽。頁(yè)面在首次加載時(shí)必然會(huì)經(jīng)歷reflow和repain。reflow和repain過(guò)程是非常消耗性能的朋凉，尤其是在移動(dòng)設(shè)備上州丹，它會(huì)破壞用戶體驗(yàn)，有時(shí)會(huì)造成頁(yè)面卡頓杂彭。所以我們應(yīng)該盡可能少的減少reflow和repain墓毒。
S的解析是由瀏覽器中的JS解析引擎完成的。JS是單線程運(yùn)行亲怠，也就是說(shuō)所计，在同一個(gè)時(shí)間內(nèi)只能做一件事，所有的任務(wù)都需要排隊(duì)团秽，前一個(gè)任務(wù)結(jié)束主胧，后一個(gè)任務(wù)才能開始。但是又存在某些任務(wù)比較耗時(shí)习勤，如IO讀寫等踪栋，所以需要一種機(jī)制可以先執(zhí)行排在后面的任務(wù)，這就是：同步任務(wù)(synchronous)和異步任務(wù)(asynchronous)图毕。JS的執(zhí)行機(jī)制就可以看做是一個(gè)主線程加上一個(gè)任務(wù)隊(duì)列(task queue)夷都。同步任務(wù)就是放在主線程上執(zhí)行的任務(wù)，異步任務(wù)是放在任務(wù)隊(duì)列中的任務(wù)予颤。所有的同步任務(wù)在主線程上執(zhí)行囤官，形成一個(gè)執(zhí)行棧;異步任務(wù)有了運(yùn)行結(jié)果就會(huì)在任務(wù)隊(duì)列中放置一個(gè)事件厢破；腳本運(yùn)行時(shí)先依次運(yùn)行執(zhí)行棧，然后會(huì)從任務(wù)隊(duì)列里提取事件治拿，運(yùn)行任務(wù)隊(duì)列中的任務(wù)，這個(gè)過(guò)程是不斷重復(fù)的笆焰，所以又叫做事件循環(huán)(Event loop)劫谅。

瀏覽器在解析過(guò)程中，如果遇到請(qǐng)求外部資源時(shí)嚷掠，如圖像,iconfont,JS等捏检。瀏覽器將重復(fù)1-6過(guò)程下載該資源。請(qǐng)求過(guò)程是異步的不皆，并不會(huì)影響HTML文檔進(jìn)行加載贯城，但是當(dāng)文檔加載過(guò)程中遇到JS文件，HTML文檔會(huì)掛起渲染過(guò)程霹娄，不僅要等到文檔中JS文件加載完畢還要等待解析執(zhí)行完畢能犯，才會(huì)繼續(xù)HTML的渲染過(guò)程。原因是因?yàn)镴S有可能修改DOM結(jié)構(gòu)犬耻，這就意味著JS執(zhí)行完成前踩晶，后續(xù)所有資源的下載是沒(méi)有必要的，這就是JS阻塞后續(xù)資源下載的根本原因枕磁。CSS文件的加載不影響JS文件的加載渡蜻，但是卻影響JS文件的執(zhí)行。JS代碼執(zhí)行前瀏覽器必須保證CSS文件已經(jīng)下載并加載完畢计济。

7. Web優(yōu)化

上面部分主要介紹了一次完整的請(qǐng)求對(duì)應(yīng)的過(guò)程茸苇，了解該過(guò)程的目的無(wú)非就是為了Web優(yōu)化。在談到Web優(yōu)化之前沦寂，我們回到一個(gè)更原始的問(wèn)題学密，Web前端的本質(zhì)是什么。我的理解是: 將信息快速并友好的展示給用戶并能夠與用戶進(jìn)行交互凑队≡蚬快速的意思就是在盡可能短的時(shí)間內(nèi)完成頁(yè)面的加載，試想一下當(dāng)你在淘寶購(gòu)買東西的時(shí)候漩氨，淘寶頁(yè)面加載了10幾秒才顯示出物品西壮，這個(gè)時(shí)候你還有心情去購(gòu)買嗎？怎么快速的完成頁(yè)面的加載呢叫惊？?jī)?yōu)雅的學(xué)院派雅虎給出了常用的一些手段款青，也就是我們熟悉的雅虎34條軍規(guī)。這34軍規(guī)實(shí)際上就是圍繞請(qǐng)求過(guò)程進(jìn)行的一些優(yōu)化方式霍狰。
如何盡快的加載資源抡草？答案就是能不從網(wǎng)絡(luò)中加載的資源就不從網(wǎng)絡(luò)中加載饰及，當(dāng)我們合理使用緩存，將資源放在瀏覽器端康震，這是最快的方式燎含。如果資源必須從網(wǎng)絡(luò)中加載，則要考慮縮短連接時(shí)間腿短，即DNS優(yōu)化部分;減少響應(yīng)內(nèi)容大小屏箍，即對(duì)內(nèi)容進(jìn)行壓縮。另一方面橘忱，如果加載的資源數(shù)比較少的話赴魁，也可以快速的響應(yīng)用戶。當(dāng)資源到達(dá)瀏覽器之后钝诚，瀏覽器開始進(jìn)行解析渲染颖御，瀏覽器中最耗時(shí)的部分就是reflow，所以圍繞這一部分就是考慮如何減少reflow的次數(shù)凝颇。