在前端開發中，請求數和併發數是兩個重要的效能指標，它們影響著網頁的載入速度和使用者體驗。理解它們的區別和關係至關重要。
請求數 (Number of Requests): 指瀏覽器為了渲染一個頁面需要向伺服器傳送的 HTTP 請求的總數。這包括 HTML 文件本身，以及頁面中引用的所有資源，例如：
- JavaScript 檔案 (.js)
- CSS 樣式表 (.css)
- 圖片 (.jpg, .png, .gif, .webp 等)
- 字型檔案 (.woff, .ttf 等)
- Ajax 請求獲取的資料
- 其他嵌入式資源 (例如 SVG, 影片等)
請求數越多，瀏覽器需要建立的連線就越多，下載的資料量也就越大，從而導致頁面載入時間變長。
併發數 (Concurrent Requests): 指瀏覽器在同一時間可以同時傳送的 HTTP 請求的最大數量。現代瀏覽器通常會限制併發連線數，以避免對伺服器造成過大的壓力。這個限制通常在 6-8 個左右，具體數值取決於瀏覽器和伺服器的配置。
併發數限制了瀏覽器可以同時下載資源的數量。即使頁面需要載入很多資源，瀏覽器也只能同時下載有限數量的資源，其餘的請求需要排隊等待。
兩者的關係和影響：
- 高請求數 + 低併發數 = 長載入時間: 如果一個頁面需要載入大量的資源，但瀏覽器的併發連線數很低，那麼很多請求就需要排隊等待，導致頁面載入時間變長。
- 最佳化請求數和併發數可以提升頁面效能: 透過減少請求數和最佳化併發數，可以顯著提高頁面的載入速度和使用者體驗。
前端最佳化策略:
為了最佳化請求數和併發數，前端開發者可以採取以下策略：
- 減少 HTTP 請求:
- 合併 CSS 和 JavaScript 檔案：將多個小的 CSS 或 JavaScript 檔案合併成一個大的檔案，減少請求數量。
- 使用 CSS Sprites：將多個小圖示合併成一張圖片，透過 CSS background-position 來顯示不同的圖示，減少圖片請求數量。
- 內聯圖片和字型：對於非常小的圖片或字型，可以直接將其內聯到 HTML 或 CSS 中，避免額外的 HTTP 請求。
- 最佳化併發請求:
- 使用 CDN：將靜態資源放到 CDN 上，利用 CDN 的分散式網路加速資源下載，並突破瀏覽器的併發連線數限制。
- 域名分片：將資源分散到不同的域名下，可以繞過瀏覽器的同域名併發連線數限制。
- 延遲載入：對於非關鍵資源，可以使用延遲載入技術，等頁面載入完成後再載入這些資源，避免阻塞頁面渲染。
總而言之，理解請求數和併發數對於前端效能最佳化至關重要。透過減少請求數和最佳化併發數，可以有效提升網頁的載入速度和使用者體驗。