前端性能優化之http請求的過程

在前端面試中，常常會被問到「一個頁面從輸入URL到頁面加載顯示完成，這個過程都發生了什麼」，這是前端的經典面試題之一。這個過程涉及的東西不少，區分度很高。

大體分爲這幾個過程：

1.DNS解析

2.TCP鏈接

3.發送HTTP請求

4.服務器處理請求並返回HTTP報文

5.瀏覽器解析渲染頁面

6.鏈接結束

簡要回答：

瀏覽器據請求的URL交給DNS域名解析，找到對應的IP地址，向服務端發起請求；

服務器交給後臺處理完成後返回數據，瀏覽器接收文件(html、css、js、圖像等)；

瀏覽器對加載到的資源進行解析，創建相應的內部數據結構(如html和dom)；

載入解析到的資源文件，完成頁面渲染。

咱們是否想過，瞭解這個過程的意義何在？

☞其實，咱們瞭解這個過程對前端的性能優化是有意義的，在這個過程當中找到優化點，去縮短請求的時間，從而去加快web前端的訪問速度，提高性能。

這裏寫圖片描述

先大體看一下請求的整個流程：

一、用戶首先在瀏覽器中去輸入一個url，瀏覽器內部的核心代碼會將url進行拆分、解析，最終會將用戶的domain發送到dns服務器上，dns服務器會據domain去查詢相關host對應的ip地址，從而將ip地址返回給瀏覽器，瀏覽器持有ip地址就知道這個請求要發送到哪裏去，伴隨協議，在協議中攜帶將ip地址信息和請求相關的參數，最終發送到咱們的網絡中去。

二、通過局域網、交換機、路由器、主幹網絡，這麼一個請求會到達服務端，服務端是一個MVC架構，請求會首先進入到controller中，在controller中會進行相關的邏輯處理以及請求的分發，而後去調用咱們的model層(負責和數據進行交互的)，和數據進行交互的過程當中，model層會去讀取redis+db裏的數據，獲取到數據以後，最終將咱們渲染好的頁面經過View層返回給咱們的網絡，此時，一個http請求的response就從服務端回到了瀏覽器，瀏覽器主要是作一個render的過程(瀏覽器據請求回來的html以及這個html所關聯的css和js去進行渲染的過程--在渲染的過程當中，瀏覽器會據html去造成相關的dom樹以及對應的css樹，而後將css樹和dom樹進行整合，最終知道某個dom節點須要渲染什麼樣式，從而在頁面上進行樣式的渲染，在樣式渲染完成後，瀏覽器會進一步執行js腳本，即動態的頁面效果，從而將最終的頁面展示在瀏覽器中)。

對於前端開發而言，在這個過程當中可針對哪些點進行性能優化呢？

一、減小請求的時間。

☞DNS這部分進行緩存，瀏覽器訪問DNS服務器的時間就可縮短。

二、網絡請求的過程，涉及到帶寬、網絡的選擇、緩存，優化點？

☞不少公司會選擇CDN，解決了網絡選擇和緩存的問題。但在訪問CDN的過程當中還會出現問題--CDN是請求靜態資源用的，對靜態資源來講，實際上在請求過程當中攜帶的cookie是無用的，因此，咱們是但願在咱們請求靜態資源過程當中能將咱們的cookie從httpRequest header中去掉，但不少時候，咱們的CDN的域名會和咱們自己網站的域名相同，就會將咱們主站的cookie經過咱們的網絡去攜帶到CDN的服務端，這個實際是對網絡無謂的損耗。因此，CDN的域名不要和主站的域名同樣，這樣會防止訪問CDN時還攜帶主站cookie的問題。

-->使用CDN能解決靜態資源網絡選擇以及緩存的問題，但對於一些接口是無法使用CDN的，那麼對於這樣的一些接口，可否作一些緩存呢？

除了CDN，咱們還能在瀏覽器端作一些相關的緩存策略。經過瀏覽器端的緩存策略，對於一些相同的資源和接口，就能夠去瀏覽器的緩存端去讀取接口，這樣的話，咱們的訪問速度又獲得了一些提高。

除了緩存和路徑選擇，帶寬也是很重要的一點。一個http請求的大小若能相對較小的話，返回的速度會相對快一些。如何減少http請求的大小，也是整個請求過程當中很是重要的一點。另外，每個http請求都會走一個網絡環境到達服務器，實際上，每次請求都會有一個網絡環境的損耗，則可否將屢次http請求合併爲1次，從而減小相同的網絡損耗呢？☞這也是咱們思考的點。

三、在瀏覽器端的渲染過程，如大型框架，vue和react，它的模板其實都是在瀏覽器端進行渲染的，不是直出的html，而是要走框架中相關的框架代碼才能去渲染出頁面，這個渲染過程對於首屏就有較大的損耗，這個是不利於前端性能的☞業界就會有相關框架的服務端渲染方案，在服務端進行整個html的渲染，從而將整個html直出到咱們的瀏覽器端，而非在瀏覽器端進行渲染。--在渲染以前，可作一些服務端渲染以及渲染優化的方案。

以上所說的是http網絡請求中細節的優化點。去了解一個http請求發生的詳細過程，在這個過程當中就可發掘這樣一些優化點，從而來實現咱們的前端性能優化。

請求過程當中一些潛在的優化點：

1.DNS是否可經過緩存減小DNS查詢時間？

2.網絡請求的過程走最近的網絡環境？

3.相同的靜態資源是否可緩存？

4.可否減小http請求的大小？

5.減小http請求

6.服務端渲染

深刻理解http請求的過程是前端性能優化的核心。固然，前提是需對業務及業務中所用技術棧的深刻理解，針對業務中所真正請求的場景，而後才能去作相應的優化。