在瀏覽器同域名并發(fā)請求都產(chǎn)生并發(fā)數(shù)限制，并發(fā)限制通常是4～8以內(nèi)，那么來了解瀏覽器請求并發(fā)限制的原因和優(yōu)化手段。

瀏覽器并發(fā)數(shù)量統(tǒng)計

瀏覽器為什么要請求并發(fā)數(shù)限制？

在了解優(yōu)化手段之前我們先了解瀏覽器限制并發(fā)請求的原因

1.對操作系統(tǒng)端口資源考慮

PC總端口數(shù)為65536，那么一個TCP（http也是tcp）鏈接就占用一個端口。操作系統(tǒng)通常會對總端口一半開放對外請求，以防端口數(shù)量不被迅速消耗殆盡。

2.過多并發(fā)導(dǎo)致頻繁切換產(chǎn)生性能問題

一個線程對應(yīng)處理一個http請求，那么如果并發(fā)數(shù)量巨大的話會導(dǎo)致線程頻繁切換。而線程的上下文切換有時候并不是輕量級的資源。這導(dǎo)致得不償失，所以請求控制器里面會產(chǎn)生一個鏈接池，以復(fù)用之前的鏈接。所以我們可以看作同域名下鏈接池最大為4～8個，如果鏈接池全部被使用會阻塞后面請求任務(wù)，等待有空閑鏈接時執(zhí)行后續(xù)任務(wù)。

3.避免同一客服端并發(fā)大量請求超過服務(wù)端的并發(fā)閾值

在服務(wù)端通常都對同一個客戶端來源設(shè)置并發(fā)閥值避免惡意攻擊，如果瀏覽器不對同一域名做并發(fā)限制可能會導(dǎo)致超過服務(wù)端的并發(fā)閥值被BAN掉。

4.客戶端良知機制

為了防止兩個應(yīng)用搶占資源時候?qū)е聫妱菀环綗o限制的獲取資源導(dǎo)致弱勢一方永遠阻塞狀態(tài)。

優(yōu)化手段

那么我們知道了瀏覽器并發(fā)限制的原因我們可以從下面幾方面入手優(yōu)化

域名散發(fā)

將請求通過多個域名分開請求，比如 100A請求 -> (25A + 25B + 25C + 25D)。但是建議4個左右。因為過多域名會導(dǎo)致dns解析性能問題。

cookie free

cookie free其實是區(qū)分主站點請求與其他次要請求的cookie存儲和攜帶。當網(wǎng)站的cookie大小5kb，發(fā)送150個請求全部攜帶上cookie就是750kb，在1024 Kbps的常見上行帶寬下，需要長達7.5秒左右才能全部發(fā)送完畢。盡管這些請求可能存在并發(fā)執(zhí)行，但是在靜態(tài)資源請求上幾乎沒必要攜帶cookie信息。所以我們可以啟用主站點域名和其他域名進行請求區(qū)分cookie的攜帶。

小圖片合并成大圖（雪碧圖）

把多張小圖片合并成一張大圖，通過css的background背景精靈定位顯示。減少圖片資源的請求數(shù)量，雪碧圖就是常見的一種手段

設(shè)置Cache-Control max-age

當我們確定項目那些資源是長久不變化的我們對其設(shè)置版本號控制和Cache-Control max-age 進行長時間緩存，減少瀏覽器對資源重新請求。

loading Image 懶加載

懶加載其實是大型網(wǎng)站通常必備對一個手段，為了防止無意義加載場景。通常用戶在進來對第一屏對內(nèi)容不會全部查看，可能在瀏覽過程中已經(jīng)跳轉(zhuǎn)到其他頁面。那么在用戶瀏覽到的地方?jīng)]必要進行圖片加載、節(jié)點創(chuàng)建等操作，可以等用戶滾動到節(jié)點內(nèi)容區(qū)域再進行顯示和加載內(nèi)容。

PWA（漸進式應(yīng)用）

近幾年比較火的一個優(yōu)化手段，通過web Service 對當前應(yīng)用請求過的請求進行緩存到客戶端，用戶下次訪問頁面或刷新頁面都是直接從客戶端本機直接讀取之前的response。可以細化控制緩存靜態(tài)資源、api請求等。但是pwa緩存有限制條件：只能緩存https協(xié)議、主站點域名的請求。并且之前緩存過的請求需要在下次PWA機制啟動時候進行清除和刷新，這樣會導(dǎo)致緩存的資源需要兩次訪問頁面才能發(fā)生更新。

總結(jié)

以上是生活随笔為你收集整理的前端性能优化篇——浏览器同域名并发请求对限制的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。