前端效能優化之http請求的過程
哆來咪er發表於2017-10-28
在前端面試中，經常會被問到“一個頁面從輸入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，我們還能在瀏覽器端做一些相關的快取策略。通過瀏覽器端的快取策略，對於一些相同的資源和介面，就可以去瀏覽器的快取端去讀取介面，這樣的話，我們的訪問速度又得到了一些提升。
除了快取和路徑選擇，頻寬也是很重要的一點。一個http請求的大小若能相對較小的話，返回的速度會相對快一些。如何減小http請求的大小，也是整個請求過程中非常重要的一點。另外，每一個http請求都會走一個網路環境到達伺服器，實際上，每次請求都會有一個網路環境的損耗，則能否將多次http請求合併為1次，從而減少相同的網路損耗呢？☞這也是我們思考的點。
3、在瀏覽器端的渲染過程，如大型框架，vue和react，它的模板其實都是在瀏覽器端進行渲染的，不是直出的html，而是要走框架中相關的框架程式碼才能去渲染出頁面，這個渲染過程對於首屏就有較大的損耗，這個是不利於前端效能的☞業界就會有相關框架的服務端渲染方案，在服務端進行整個html的渲染，從而將整個html直出到我們的瀏覽器端，而非在瀏覽器端進行渲染。--在渲染之前，可做一些服務端渲染以及渲染優化的方案。
以上所說的是http網路請求中細節的優化點。去了解一個http請求發生的詳細過程，在這個過程中就可發掘這樣一些優化點，從而來實現我們的前端效能優化。
請求過程中一些潛在的優化點：
1.DNS是否可通過快取減少DNS查詢時間？
2.網路請求的過程走最近的網路環境？
3.相同的靜態資源是否可快取？
4.能否減少http請求的大小？
5.減少http請求
6.服務端渲染
深入理解http請求的過程是前端效能優化的核心。當然，前提是需對業務及業務中所用技術棧的深入理解，針對業務中所真正請求的場景，然後才能去做相應的優化。