瀏覽器的資源併發親試

前幾天ali一個視頻面試，給問到一個問題 爲何圖片要分多個域名？  我開始覺得他問我cdn，而後他再強調了一遍，爲何要分多個域名？

而後我認真想了想 不知道爲何，以後找我師傅葉小釵問了一下，他回答說一個域名下載有限，因而乎，我抽空寫了一個demo。（只測試了pc和ios的 safari）

一、首先我準備了1張10M的圖片 ，一個5M的js 和一個4M的css， 各複製了10次 改了10個不同的名字。

二、準備了 a.com 和b.com 2個域名

同域名pc 和手機的併發狀況

pc(chrome)： 同一域名下 能同時併發6個 請求。

 

若是單純 js， 同一時間也只能發6個。

 

因而可知，圖片的請求，是會阻塞頁面js的請求的， 因此移動端須要控制好首屏的請求數量， 會請求文件的大小(例如若是框架太大會阻塞頁面渲染)

 

手機：

 

只請求js

只請求css

 

 

能夠看出手機上同一時間只能同時請求4個資源。

 

不一樣域名pc 和手機的併發狀況

pc：

css

 

 

手機：

 

css

 

 

能夠看出 pc上不一樣域名併發是各6個請求，2個域名一共加起來是12個請求。

手機上不一樣域名併發 各4個， 2個域名一共加起來是 8個請求。

 

總結：

控制好頁面初始加載請求數量，適當的合併，如項目首屏用到圖片，應該以懶加載的方式。還有若是網絡穩定流暢的狀況，能夠經過訪問不一樣域名的資源來提升請求的併發數量