什么是高并發(fā)

高并發(fā)是指在極短的時間內，大數(shù)量的用戶同時訪問同一API接口或者資源，造成極多的請求同時發(fā)起到服務器。

高并發(fā)的場景（）

大部分的高并發(fā)是在后端進行處理的，然而在一些情況下，后端無法阻止用戶的行為，就需要前端的配合，例如搶購、秒殺等用戶活躍度較高的場景。

一個完整的 HTTP 請求需要經(jīng)歷 DNS 查找，TCP 握手，瀏覽器發(fā)出 HTTP 請求，服務器接收請求，服務器處理請求并發(fā)回響應，瀏覽器接收響應等過程。接下來看一個具體的例子幫助理解 HTTP ：

一.首頁數(shù)據(jù)緩存

? ? 1）多次請求的接口數(shù)據(jù)請放在全局 例如vuex? ?組件用的時候 判斷vuex中有沒有這個值 沒有則調用 （vuex頁面刷新會丟失）

? ? 2）如果不是加載頁面就需要請求的接口請分離 例如多個tab 列表 or 彈框內如下拉框list數(shù)據(jù)接口。（應在點擊的時候再去調用）

二.避免發(fā)送重復請求

?????1）在axios二次封裝文件中提前定義一個map，在請求攔截器中把url+參數(shù)作為鍵存進去，在請求攔截器中判斷是否存在，如果存在取消這次請求（注意:需要在響應攔截器中刪除存進的數(shù)據(jù)）

? ? ?2）?防抖節(jié)流

三.圖片處理

?????1）雪碧圖：CSS雪碧圖是以前非常流行的技術，把網(wǎng)站上的一些圖片整合到一張單獨的圖片中，可以減少網(wǎng)站的HTTP請求數(shù)量，但是當整合圖片比較大時，一次加載比較慢。隨著字體圖片、SVG圖片的流行，該技術漸漸退出了歷史舞臺

? ? ?2）Base64:將圖片的內容以Base64格式內嵌到HTML中，可以減少HTTP請求數(shù)量。但是，由于Base64編碼用8位字符表示信息中的6個位，所以編碼后大小大約比原始值擴大了 33%

? ? ?3）使用字體圖標來代替圖片

四.js 處理

?????1）少用location.reload()使用location.reload() 會刷新頁面，刷新頁面時頁面所有資源（css，js，img等）會重新請求服務器。

? ? ?2）?合并腳本和樣式表模塊化的原則是好，便于開發(fā)，但是每個文件都會導致一個單獨HTTP請求，將這些文件合并到一個文件中，即可減少HTTP請求的數(shù)量并縮短最終用戶響應時間。在理想的情況下，一個頁面應該使用不多于一個的腳本和樣式表。

五.css處理

?????1）提取公共css

? ? ?2）合理的使用less/scss

? ? ?3）?盡量少用style屬性，用class重繪比重排的效率高

? ? ?4）有動畫效果的元素設置絕對定位和固定定位

? ? ?5） 權衡速度的平滑。比如實現(xiàn)一個動畫，以1個像素為單位移動這樣最平滑，但reflow就會過于頻繁，CPU很快就會被完全占用。如果以3個像素為單位移動就會好很多。

? ? ?6）?減少不必要的dom層級，不要頻繁操作dom

6. 避免高頻刷新頁面

給請求接口加上限定條件，若n秒內刷新頁面只發(fā)起一次請求，減少刷新頁面發(fā)起的請求數(shù)量。