當在瀏覽器地址欄輸入網址，如：www.XXX.com后瀏覽器是怎么把最終的頁面呈現出來的呢？
㈠經歷的步驟
★第一部分：網絡通信
⑴在瀏覽器中輸入url
⑵應用層DNS解析域名
⑶應用層客戶端發送HTTP請求
⑷傳輸層TCP傳輸報文
⑸網絡層IP協議查詢MAC地址
⑹數據到達數據鏈路層
⑺服務器接收數據
⑻服務器響應請求
⑼服務器返回相應文件
★第二部分：頁面渲染
㈡涉及基本知識點
第一部分：計算機網絡
⑴五層因特爾協議棧：
①應用層（dns、http）：DNS解析成IP並完成http請求發送；
②傳輸層（tcp、udp）：三次握手四次揮手模式建立tcp連接；
③網絡層（IP、ARP）：IP尋址；
④數據鏈路層（PPP）：將請求數據封裝成幀；
⑤物理層：利用物理介質傳輸比特流（傳輸的時候通過雙絞線、電磁波等）
OIS七層框架:多了兩層即，會話層（處理兩個通信系統中交換信息的表示方式）和表示層（管理不同用戶和進程之間的對話）。
⑵get和post的區別：
①get產生一個tcp數據包，post產生兩個
②get請求時會把headers和data數據一起發送出去；
③post請求時，瀏覽器先發送headers，服務器100繼續，瀏覽器再發送data。
⑶DNS查詢得到IP
①請求信息：首先查看域名的本地DNS緩存，該緩存存儲計算機最近檢索到的信息，如果計算機不知道答案，那么就需要執行一個DNS查詢來查找答案；
②詢問遞歸式DNS服務器：
☀如果信息不存儲在本地，計算機會聯系您的ISP（網絡提供商）的遞歸DNS服務器；
☀這些專用計算機會為你執行一個DNS查詢工作；
☀遞歸服務器有自己的緩存，所以這個查詢過程通常在這里完成，並將信息還回給用戶；
③詢問根域名服務器
☀如果遞歸服務器沒有答案，他們會查詢根域名服務器；
☀根域名服務器是一種計算機，它扮演着一種DNS的電話接線員的角色，他們不知道答案，但可以將我們的疑問指向知道在哪里可以找到答案的人。
④詢問TLD域名服務器：
☀根域名服務器將查看請求的第一部分，按從右到左的順序，從www.dyn.com中找到.com，並將請求指向.com對應的頂級域名服務器（TLD）.com;
☀每個TLD，如（.com,.org,.us）都有自己的頂級域名服務器，
☀這些服務器沒有我們需要的信息，但他們可以直接將我們引導到有信息的服務器。
⑤詢問權威的DNS服務器
☀TLD域名服務器會繼續檢查請求的下一部分（dyn）www.dyn.com，並將查詢指向負責此特定域名的服務器；
☀這些權威的服務器將負責了解關於特定域的所有信息，並將信息存儲在DNS記錄。
⑥找回記錄：
-遞歸服務器從權威服務器中檢索dyn.com的記錄，並將記錄存儲在本地緩存；
☀如果其他任何人請求dyn.com的主機記錄，遞歸服務器已經有答案了，並不需要再次進行查找；
☀所有記錄都有一個期限，一段時間后，遞歸服務器將需要要求一個新的記錄副本，以確保信息不回過時。
⑦接收答案：
☀有了答案，遞歸服務器將記錄返回到計算機，
☀您的計算機將記錄存儲在緩存中，從記錄中讀取IP地址，然后將這些信息傳遞給瀏覽器；
☀然后瀏覽器就可以根據IP地址和服務器進行連接建立。
⑷TCPIP請求
①http的本質就是TCPIP請求；
②需要經歷3次握手建立連接，4次揮手斷開連接；
③TCP將http長報文划分為短報文，通過三次握手與服務器端建立連接，進行可靠傳輸。
★三次握手：
⒈客戶端：你是XXX服務端嗎？
⒉服務端： 我是XXX服務端，你是客戶端嗎？
⒊客服端： 是的，我是客戶端
⒋建立連接成功后，接下來就可以進行正式的傳輸數據。
★四次揮手斷開連接
⒈主動方：我已經關閉了向你那邊的信息發送通道，只能被動接受信息了；
⒉被動方： 收到通道關閉的信息；
⒊被動方： 我現在也關閉了向你那邊發送信息的通道
⒋主動方： 左后收到信息，連接斷開，之后雙方無法通信
⑸TCP/IP的並發限制：
①瀏覽器對同一個域名下並發的TCP連接是有限制的（2-10個不等）
②而且在http1.0中往往一個資源的下載就需要一個tcp/ip請求
第二部分：瀏覽器機制
⑴進程和線程的概念
①進程是CPU資源分配的最小單位，是能擁有資源和獨立運行的最小單位；
②線程是CPU調度的最小單位，線程是建立在進程的基礎上的一次程序運行單位，一個進程可以擁有多個線程；
③通俗的講：進程是一個工廠，工廠有它獨立的資源，工廠之間相互獨立->進程之間相互獨立，線程是工廠中的工人，多個工人之間可以協作完成任務，工廠內有一個或多個工人，工人之間共享空間。
⑵多進程的瀏覽器
瀏覽器是多進程的，有一個主控進程，以及每一個tab頁面都會開一個進程（某些情況下多個tab由於優化策略會合並）
★瀏覽器主要進程：
①Browser進程：瀏覽器的主進程，負責協調、主控，只有一個，作用：
☀負責瀏覽器界面的顯示、與用戶交互（如前進、后退等）
☀負責各個頁面的管理，創建和銷毀其他進程；
☀將Renderer進程得到的內存中的Bitmap繪制到用戶界面上
☀網絡資源的管理和下載等
②第三方插件進程： 每種類型的插件對應一個進程，僅當該插件使用時才創建；
③GPU進程： 最多一個，用於3D繪制等；
④瀏覽器渲染進程（Renderer進程、瀏覽器內核、內部是多線程）：
☀默認沒打開一個tab頁面，就會啟動一個Renderer進程；
☀負責頁面的渲染，腳本的執行，事件的處理。
★瀏覽器多進程的優勢
①避免單個page crash影響整個瀏覽器；
②避免第三方插件crash影響整個瀏覽器
③多進程充分利用多核優勢；
④方便使用沙盒模型隔離插件等進程，提高瀏覽器穩定性
第三部分：瀏覽器內核（渲染進程）
瀏覽器渲染進程內部是多線程，包含主要線程有：
⑴GUI渲染線程：
①負責瀏覽器界面的渲染，解析HTML、CSS，構建DOM樹和RenderObject樹，布局和繪制等；
②當界面需要重繪（Repaint）或由於某種操作引發回流（reflow）時該線程會執行；
注意：GUI渲染線程和JS引擎線程是互斥的，當JS引擎執行時GUI線程會被掛起，GUI更新會保存在一個隊列中等JS引擎空閑時立即執行。
⑵JS引擎線程
①JS內核，負責處理JavaScript腳本程序（V8引擎）
②負責解析JavaScript腳本，運行代碼；
③JS引擎一直等待着任務隊列中的任務到來，然后加以處理，一個tab頁面（renderer進程）中無論什么時候都只有一個JS線程在運行JS程序；
注意：由於GUI渲染線程和JS引擎線程是互斥的，所以如果JS程序運行時間過長，這樣會導致頁面渲染不連貫，導致頁面渲染加載阻塞；
⑶事件觸發線程：
①歸屬於瀏覽器，而不是JS引擎，用來控制事件循環；
②當JS引擎執行代碼塊如setTimeOut時（也可以來自瀏覽器內核的其他線程，如鼠標單擊事件、AJAX異步請求等），會將對應的任務添加到事件線程中；
③當對應的事件符合觸發條件被觸發時，該線程就會把事件添加到JS的待處理隊列的隊尾，等待JS引擎的處理；
注意：由於JS的單線程的關系所以這些待處理隊列中的事件都得排隊等待JS引擎處理（當JS引擎空閑時才會去執行）。
⑷定時觸發器線程：
①setTimeOut與setInterval所在的線程；
②瀏覽器的定時計數器並不是由JavaScript引擎計數的，（因為JavaScript是單線程，如果處於阻塞狀態就會影響計時的准確）因此通過單獨的線程來計時並觸發定時（計時完畢后，添加到事件隊列，等待JS引擎空閑時執行）
⑸異步http請求線程：
①在XMLHttpRequest在連接后是通過瀏覽器新開一個線程請求的
②將檢測到狀態變更時，如果設置有回調函數，異步線程就將產生狀態變更事件，將這個回調在放到事件隊列中，再由JavaScript引擎執行。
以下內容轉自：https://www.cnblogs.com/kongxy/p/4615226.html
㈢步驟詳細解釋
第一部分：網絡通信
互聯網內各網絡設備間的通信都遵循TCP/IP協議，利用TCP/IP協議族進行網絡通信時，會通過分層順序與對方進行通信。分層由高到低分別為：應用層、傳輸層、網絡層、數據鏈路層。發送端從應用層往下走，接收端從數據鏈路層網上走。如圖所示：
⑴在瀏覽器中輸入url
用戶輸入url，例如http://www.baidu.com。其中http為協議，www.baidu.com為網絡地址，及指出需要的資源在那台計算機上。一般網絡地址可以為域名或IP地址，此處為域名。使用域名是為了方便記憶，但是為了讓計算機理解這個地址還需要把它解析為IP地址。
⑵應用層DNS解析域名
①客戶端先檢查本地是否有對應的IP地址，若找到則返回響應的IP地址。若沒找到則請求上級DNS服務器，直至找到或到根節點。
②DNS中遞歸查詢和迭代查詢的區別：
☀遞歸查詢： 一般客戶機和服務器之間屬遞歸查詢，即當客戶機向DNS服務器發出請求后，若DNS服務器本身不能解析，則會向另外的DNS服務器發出查詢請求，得到結果后轉交客戶機。
☀迭代查詢（反復查詢）： 一般DNS服務器之間屬迭代查詢，如：若DNS2不能響應DNS1的請求，則它會將DNS3的IP給DNS2，以便其再向DNS3發出請求。
以一個DNS請求解析為例：
1）用戶發起域名請求到dnsA，這時dnsA有這個記錄，將結果返回給用戶，這個過程是遞歸查詢。
2）用戶發起域名請求到dnsA，這時dns沒有這個記錄，它去向dnsB問有沒有這個記錄，以此類推，直到把結果返回給用戶，這個過程是遞歸查詢。
3）用戶發起域名請求到dnsA，這時dnsA沒有這個記錄，它告訴用戶，我沒有這個記錄，你去問dnsB吧，這個過程是迭代查詢。
⑶應用層客戶端發送HTTP請求
HTTP請求包括請求報頭和請求主體兩個部分，其中請求報頭包含了至關重要的信息，包括請求的方法（GET / POST）、目標url、遵循的協議（http / https / ftp…），返回的信息是否需要緩存，以及客戶端是否發送cookie等。
⑷傳輸層TCP傳輸報文
①位於傳輸層的TCP協議為傳輸報文提供可靠的字節流服務。它為了方便傳輸，將大塊的數據分割成以報文段為單位的數據包進行管理，並為它們編號，方便服務器接收時能准確地還原報文信息。TCP協議通過“三次握手”等方法保證傳輸的安全可靠。
②三次握手”的過程是，發送端先發送一個帶有SYN（synchronize）標志的數據包給接收端，在一定的延遲時間內等待接收的回復。接收端收到數據包后，傳回一個帶有SYN/ACK標志的數據包以示傳達確認信息。接收方收到后再發送一個帶有ACK標志的數據包給接收端以示握手成功。在這個過程中，如果發送端在規定延遲時間內沒有收到回復則默認接收方沒有收到請求，而再次發送，直到收到回復為止。
1）第一次握手：主機A發送位碼為syn＝1,隨機產生seq number=x的數據包到服務器，客戶端進入SYN_SEND狀態，等待服務器的確認；主機B由SYN=1知道，A要求建立聯機；
2）第二次握手：主機B收到請求后要確認聯機信息，向A發送ack number(主機A的seq+1),syn=1,ack=1,隨機產生seq=y的包，此時服務器進入SYN_RECV狀態；
3）第三次握手：主機A收到后檢查ack number是否正確，即第一次發送的seq number+1,以及位碼ack是否為1，若正確，主機A會再發送ack number(主機B的seq+1),ack=1，主機B收到后確認seq值與ack=1則連接建立成功。客戶端和服務器端都進入ESTABLISHED狀態
⑸網絡層IP協議查詢MAC地址
IP協議的作用是把TCP分割好的各種數據包傳送給接收方。而要保證確實能傳到接收方還需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一對應的關系，一個網絡設備的IP地址可以更換，但是MAC地址一般是固定不變的。ARP協議可以將IP地址解析成對應的MAC地址。當通信的雙方不在同一個局域網時，需要多次中轉才能到達最終的目標，在中轉的過程中需要通過下一個中轉站的MAC地址來搜索下一個中轉目標。
⑹數據到達數據鏈路層
在找到對方的MAC地址后，就將數據發送到數據鏈路層傳輸。這時，客戶端發送請求的階段結束
⑺服務器接收數據
接收端的服務器在鏈路層接收到數據包，再層層向上直到應用層。這過程中包括在運輸層通過TCP協議講分段的數據包重新組成原來的HTTP請求報文。
⑻服務器響應請求
服務接收到客戶端發送的HTTP請求后，查找客戶端請求的資源，並返回響應報文，響應報文中包括一個重要的信息——狀態碼。狀態碼由三位數字組成，其中比較常見的是200 OK表示請求成功。301表示永久重定向，即請求的資源已經永久轉移到新的位置。在返回301狀態碼的同時，響應報文也會附帶重定向的url，客戶端接收到后將http請求的url做相應的改變再重新發送。404 not found 表示客戶端請求的資源找不到。
⑼服務器返回相應文件
請求成功后，服務器會返回相應的HTML文件。接下來就到了頁面的渲染階段了。
第二部分：頁面渲染
⑴現代瀏覽器渲染頁面的過程是這樣的：jiexiHTML以構建DOM樹 –> 構建渲染樹 –> 布局渲染樹 –> 繪制渲染樹。
⑵DOM樹是由HTML文件中的標簽排列組成，渲染樹是在DOM樹中加入CSS或HTML中的style樣式而形成。渲染樹只包含需要顯示在頁面中的DOM元素，像<head>元素或display屬性值為none的元素都不在渲染樹中。
⑶在瀏覽器還沒接收到完整的HTML文件時，它就開始渲染頁面了，在遇到外部鏈入的腳本標簽或樣式標簽或圖片時，會再次發送HTTP請求重復上述的步驟。在收到CSS文件后會對已經渲染的頁面重新渲染，加入它們應有的樣式，圖片文件加載完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。
參考：https://segmentfault.com/a/1190000014872028
https://www.cnblogs.com/yuanzhiguo/p/8119470.html
http://www.360doc.com/content/17/0330/14/11277047_641420560.shtml