【達生科技】突破瀏覽器域名併發限制的解決方案

背景

拿Chrome瀏覽器來講，同域名下資源加載的最大併發鏈接數爲6，當資源文件大於6時，多於6個的文件就會進入待定，等第一批加載完纔會加載第二批的6個圖片資源，這樣就增長了等待時間。無形中就增長用戶加載網頁等待的時間。

思考

對於這種併發限制，能夠有什麼方法來解決這種問題呢？
既然最大併發數爲6，那咱們就把N個資源URL替換成N/6個不一樣域名，這樣就有N/6個最大併發能夠同時發生了。
先來看看咱們處理先後的比對狀況吧。

效果展現

本文拿圖片加載來舉例【具體的資源加載時間因不一樣設備不一樣網速而不一樣，僅供參考】

---

處理前

當一個網頁的圖片資源在同一個域名狀況下加載，如圖，30個圖片總用時【1.11s】

最後一個圖片資源鏈接開始後的停轉時間（即圖片資源加載的等待響應時間）【357ms】

---

處理後

一樣的運行環境，一樣的資源在多個域名（同一個ip）狀況下加載，如圖，30個圖片總用時【424ms】

最後一個圖片資源鏈接開始後的停轉時間【0.64ms】

---

對比結果：在本示例中，一樣的資源，同一個IP，處理資源加載域名限制後，速度能夠優化【60%】。用最後一張加載的圖片對比，鏈接開始後的停轉時間優化比也達到【99.8%】

---

實現方法

• 實現思路

  • 在DNS服務商中申請多個域名，指向同一個 IP 服務。
  • 對後臺返回的數據進行域名處理，對圖片連接，進行域名替換。
  • 域名替換完成後，經過 localStorage 進行 key / value 保存。以使得相同圖片在下一次展現時，能使用瀏覽器緩存，而非重複加載。

• 代碼實現【本方法僅用在ajax回調中】 =》 示例代碼以下：

  // 替換域名
      function replaceDomain(data) {
        let imgUrlObj = localStorage.getItem('imgUrlObj') || {} // 獲取本地保存的圖片連接，能正常使用緩存
        if (typeof(imgUrlObj) === 'string') { // 判斷是否爲JSON對象，不是則轉換
          imgUrlObj = JSON.parse(imgUrlObj)
        }
        let index = Math.floor(Math.random() * 4.99) // 隨機0-4的下標
        try {
          data = JSON.stringify(data)
          data = data.replace(/www\.baidu\.com\/image(.*?)(jpg|png|jpeg)/g, (...params) => { // 查找圖片的url並對其進行操做
            let sourceUrl = params[1] + params[2] // 圖片資源名稱，未包含域名。如：整條圖片連接爲：www.baidu.com/image/123.png; 現保存爲：/image/123.png
            if (!imgUrlObj[sourceUrl]) { // 未保存在本地，則新產生域名
              let imgUrl = `node${[1, 2, 3, 4, 5][index % 5]}.baidu.com/image/${sourceUrl}` // 域名替換，如：從 www.baidu.com 替換到 node1.baidu.com,node2.baidu.com
              imgUrlObj[sourceUrl] = imgUrl // 同時保存好新的域名，在這就體現了使用JSON對象的好處，圖片資源路徑名當key值，圖片完整連接當value值
              localStorage.setItem('imgUrlObj', JSON.stringify(imgUrlObj))
              index++
              return imgUrl
            } else { // 保存到了本地，則直接使用localStorage的url
              return imgUrlObj[sourceUrl]
            }
          })
          data = JSON.parse(data)
        } catch (e) {
          console.log('replaceDomain error')
          console.log(e)
        }
        return data
      }

• 另外，爲了加快DNS解析，能夠進行DNS預加載

  <!-- 配置 Mate 進行域名預加載 -->
  <!-- dns預加載 -->
  <link rel="dns-prefetch" href="//node1.baidu.com" />
  <link rel="dns-prefetch" href="//node2.baidu.com" />

完結，撒花