在前端面試中，經常會被問到「乙個頁面從輸入url到頁面載入顯示完成，這個過程都發生了什麼」，這是前端的經典面試題之一。這個過程涉及的東西很多，區分度很高。
大致分為這幾個過程：
1.dns解析
2.tcp連線
3.傳送http請求
4.伺服器處理請求並返回http報文
5.瀏覽器解析渲染頁面
6.連線結束
簡要回答：
瀏覽器據請求的url交給dns網域名稱解析，找到對應的ip位址，向服務端發起請求；
伺服器交給後台處理完成後返回資料，瀏覽器接收檔案(html、css、js、影象等)；
瀏覽器對載入到的資源進行解析，建立相應的內部資料結構(如html和dom)；
載入解析到的資源檔案，完成頁面渲染。
我們是否想過，了解這個過程的意義何在？
☞其實，我們了解這個過程對前端的效能優化是有意義的，在這個過程中找到優化點，去縮短請求的時間，從而去加快web前端的訪問速度，提公升效能。
這裡寫描述
先大致看一下請求的整個流程：
1、使用者首先在瀏覽器中去輸入乙個url，瀏覽器內部的核心**會將url進行拆分、解析，最終會將使用者的domain傳送到dns伺服器上，dns伺服器會據domain去查詢相關host對應的ip位址，從而將ip位址返回給瀏覽器，瀏覽器持有ip位址就知道這個請求要傳送到**去，伴隨協議，在協議中攜帶將ip位址資訊和請求相關的引數，最終傳送到我們的網路中去。
2、經過區域網、交換機、路由器、主幹網路，這麼乙個請求會到達服務端，服務端是乙個mvc架構，請求會首先進入到controller中，在controller中會進行相關的邏輯處理以及請求的分發，然後去呼叫我們的model層(負責和資料進行互動的)，和資料進行互動的過程中，model層會去讀取redis+db裡的資料，獲取到資料之後，最終將我們渲染好的頁面通過view層返回給我們的網路，此時，乙個http請求的response就從服務端回到了瀏覽器，瀏覽器主要是做乙個render的過程(瀏覽器據請求回來的html以及這個html所關聯的css和js去進行渲染的過程--在渲染的過程中，瀏覽器會據html去形成相關的dom樹以及對應的css樹，然後將css樹和dom樹進行整合，最終知道某個dom節點需要渲染什麼樣式，從而在頁面上進行樣式的渲染，在樣式渲染完成後，瀏覽器會進一步執行js指令碼，即動態的頁面效果，從而將最終的頁面展現在瀏覽器中)。
對於前端開發而言，在這個過程中可針對哪些點進行效能優化呢？
1、減少請求的時間。
☞dns這部分進行快取，瀏覽器訪問dns伺服器的時間就可縮短。
2、網路請求的過程，涉及到頻寬、網路的選擇、快取，優化點？
☞很多公司會選擇cdn，解決了網路選擇和快取的問題。但在訪問cdn的過程中還會出現問題--cdn是請求靜態資源用的，對靜態資源來說，實際上在請求過程中攜帶的cookie是無用的，所以，我們是希望在我們請求靜態資源過程中能將我們的cookie從httprequest header中去掉，但很多時候，我們的cdn的網域名稱會和我們本身**的網域名稱相同，就會將我們主站的cookie通過我們的網路去攜帶到cdn的服務端，這個實際是對網路無謂的損耗。所以，cdn的網域名稱不要和主站的網域名稱一樣，這樣會防止訪問cdn時還攜帶主站cookie的問題。
-->使用cdn能解決靜態資源網路選擇以及快取的問題，但對於一些介面是沒法使用cdn的，那麼對於這樣的一些介面，能否做一些快取呢？
除了cdn，我們還能在瀏覽器端做一些相關的快取策略。通過瀏覽器端的快取策略，對於一些相同的資源和介面，就可以去瀏覽器的快取端去讀取介面，這樣的話，我們的訪問速度又得到了一些提公升。
除了快取和路徑選擇，頻寬也是很重要的一點。乙個http請求的大小若能相對較小的話，返回的速度會相對快一些。如何減小http請求的大小，也是整個請求過程中非常重要的一點。另外，每乙個http請求都會走乙個網路環境到達伺服器，實際上，每次請求都會有乙個網路環境的損耗，則能否將多次http請求合併為1次，從而減少相同的網路損耗呢？☞這也是我們思考的點。
3、在瀏覽器端的渲染過程，如大型框架，vue和react，它的模板其實都是在瀏覽器端進行渲染的，不是直出的html，而是要走框架中相關的框架**才能去渲染出頁面，這個渲染過程對於首屏就有較大的損耗，這個是不利於前端效能的☞業界就會有相關框架的服務端渲染方案，在服務端進行整個html的渲染，從而將整個html直出到我們的瀏覽器端，而非在瀏覽器端進行渲染。--在渲染之前，可做一些服務端渲染以及渲染優化的方案。
以上所說的是http網路請求中細節的優化點。去了解乙個http請求發生的詳細過程，在這個過程中就可發掘這樣一些優化點，從而來實現我們的前端效能優化。
請求過程中一些潛在的優化點：
1.dns是否可通過快取減少dns查詢時間？
2.網路請求的過程走最近的網路環境？
3.相同的靜態資源是否可快取？
4.能否減少http請求的大小？
5.減少http請求
6.服務端渲染
深入理解http請求的過程是前端效能優化的核心。當然，前提是需對業務及業務中所用技術棧的深入理解，針對業務中所真正請求的場景，然後才能去做相應的優化。
前端效能優化之減少Http請求
前言 乙個頁面的 開啟速度是其 效能最直觀的體現，那麼影響其開啟速度的因素有什麼呢？此處不再展開。本文主要聊聊關於減少http請求以達到節省時間的目的 問 減少http請求為什麼能節省時間？頁面資源的請求，80 的時間耗費在http請求上，由於tcp請求是基於連線的請求，其連線與釋放需要一定的時間。...
前端效能優化之http請求的過程
在前端面試中，經常會被問到 乙個頁面從輸入url到頁面載入顯示完成，這個過程都發生了什麼 這是前端的經典面試題之一。這個過程涉及的東西很多，區分度很高。大致分為這幾個過程 1.dns解析 2.tcp連線 3.傳送http請求 4.伺服器處理請求並返回http報文 5.瀏覽器解析渲染頁面 6.連線結束...
前端效能優化之HTTP伺服器篇
因tomcat處理靜態資源的速度比較慢，所以首先想到的就是把所有靜態資源 js,css,image,swf 提到單獨的伺服器，用更加快速的http伺服器，這裡選擇了nginx了，nginx相比apache，更加輕量級，配置更加簡單，而且nginx不僅僅是高效能的http伺服器，還是高效能的反向 伺服...