在瀏覽器同域名并發請求都產生并發數限制，并發限制通常是4～8以內。那么我們將來了解瀏覽器請求并發限制的原因和優化手段。

瀏覽器并發數量統計

瀏覽器為什么要請求并發數限制？

在了解優化手段之前我們先了解瀏覽器限制并發請求的原因

1.對操作系統端口資源考慮

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

2.過多并發導致頻繁切換產生性能問題

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

3.避免同一客服端并發大量請求超過服務端的并發閾值

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

4.客戶端良知機制

為了防止兩個應用搶占資源時候導致強勢一方無限制的獲取資源導致弱勢一方永遠阻塞狀態。

優化手段

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

域名散發

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

cookie free

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

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

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

設置Cache-Control max-age

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

loading Image 懶加載

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

PWA（漸進式應用）

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。