大部分的高並發處理基本都是在后端處理,但是在部分特殊情況下,后端無法阻止用戶行為,需要前端做配合。例如在搶購、秒殺等場景。
高並發是什么?
對此,我們首先需要簡單的去了解一下,高並發是什么?
高並發是指在極短單位時間內,有很多用戶同時的訪問同一 API 接口或者 Url 地址,造成極多個請求同時發起到服務器。它經常會發生在有大活躍用戶量,用戶高聚集的業務場景中。
瀏覽器請求限制
瀏覽器在向后端發送http請求是,就會有高並發處理。使用HTTP/2.0,理論上HTTP/2.0協議支持在同一個TCP連接上發送無限個HTTP請求,且這些請求的生命期可以重疊。但是實際上,瀏覽器並不會同時將所有請求就發過去,還是會有時間間隔。
前端可以做些什么?
雖然瀏覽器已經對 http 請求並發設置了限制,但是並不能很好的處理掉不必要的請求。而且在部分情況下,用戶較多,並且在同一時間端多次請求,如圖:
(瀏覽器到服務器部分的請求會被后台拒掉甚至可能會導致后台崩潰)
瀏覽器並不會過濾掉一部分請求,只是會分批發送。這時候極有可能會造成卡頓,甚至崩潰。所以如果,在瀏覽器發送請求時,可以杜絕掉一部分非必要請求就好了。
處理方法
圖片方面
1.CSS sprites
俗稱 CSS 精靈、雪碧圖,雪花圖等。即將多張小圖片合並成一張圖片,達到減少 HTTP 請求的一種解決方案。可通過 CSS中的background 屬性訪問圖片內容。這種方案同時還可以減少圖片總字節數,節省命名詞匯量。
2.壓縮圖片
圖片占據資源極大,因此盡量避免使用多余的圖片,使用時選擇最合適的格式大小,然后使用智圖壓縮,同時在代碼中用Srcset來按需顯示。(切記不要過分壓縮 可能會導致圖片迷糊)
3.圖片使用Base64編碼
減少頁面請求數,采用Base64的編碼方式將圖片直接嵌入到網頁中。(但是這樣做會有一個弊端,就是base64解碼也是需要消耗時間的)
文件方面
1.合井腳本和樣式表
將部分js和css模塊合並,多個合並為單個。(無需過度合並,要考慮后期接你代碼的兄弟)減少請求次數。
代碼壓縮
1.js 代 碼 壓 縮
JavaScript 壓 縮 的 原 理 一 般 是 去 掉 多 余 的 空 格 和 回 車 、 替 換 長 變 量 名 、 簡 化 一 些 代 碼 寫 法 等 (有的時候簡化寫法性能可能會降低,這點按照實際情況來吧)。
2.css 代 碼 壓 縮
原理和JS壓縮原理類似,同樣是去除空白符、注釋井且優化一些css語義規則等。(去除注釋這種陰間操作的話,咱盡量不做昂)
過濾請求
1.減少訪問API或者不訪問
使用防抖節流等方式,降低請求次數。例如1秒只許點擊1次。
2.利用緩存存放數據
將一些實時性修改,但是不必須發送給后端存儲的數據,放在緩存中。例如修改頭像,但是還沒點確定修改時。
3.避免高頻刷新頁面獲取數據
做一個限定,避免高頻刷新帶給服務器的壓力。例如可以幾秒內刷新頁面中,只獲取一次頁面樣式或者列表等數據。