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

2021-09-11 10:03:46 字數 2505 閱讀 3156

在前端面試中,經常會被問到「乙個頁面從輸入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伺服器,還是高效能的反向 伺服...