Решение для преодоления ограничения параллелизма доменных имен браузера

оптимизация производительности
Решение для преодоления ограничения параллелизма доменных имен браузера

задний план

Взяв в качестве примера браузер Chrome, максимальное количество одновременных подключений для загрузки ресурсов под одним и тем же доменным именем равно 6. Если файл ресурсов больше 6, файлы с более чем 6 файлами будут ожидать обработки, и будет отправлен второй пакет. загружаться после загрузки первого пакета 6 ресурсов изображений, что увеличивает время ожидания. Незаметно увеличить время ожидания пользователя для загрузки веб-страницы.

waiting.jpeg

думать

Что можно сделать для решения этой проблемы при таком ограничении параллелизма? Поскольку максимальный параллелизм равен 6, мы заменяем N URL-адресов ресурсов на N/6 разных доменных имен, чтобы максимальное количество параллелизма N/6 могло происходить одновременно. Давайте посмотрим на сравнение до и после нашего лечения.

Показать результаты

В этой статье в качестве примера используется загрузка изображений [время загрузки конкретного ресурса зависит от разных устройств и разных скоростей сети, только для справки]

Перед обработкой

Когда ресурсы изображений веб-страницы загружаются под одним и тем же доменным именем, как показано на рисунке, всего используется 30 изображений [1,11 с].

waitFinish.jpeg

Время остановки после начала последнего подключения к ресурсу изображения (то есть время ожидания ответа для загрузки ресурса изображения) [357 мс]

waitTime.png

После обработки

Одна и та же операционная среда, одни и те же ресурсы загружаются под несколькими доменными именами (один и тот же ip), как показано на рисунке, общее время для 30 изображений составляет [424 мс]

noWait.jpeg

Время остановки после начала последнего подключения к ресурсу изображения [0,64 мс]

noWaitTime.png

сравнить результаты:В этом примере, с тем же ресурсом и тем же IP, скорость может быть оптимизирована на [60%] после обработки ограничения доменного имени загрузки ресурса. По сравнению с последней загруженной картинкой коэффициент оптимизации времени остановки после начала соединения также достигает [99,8%]

Реализация

  • Реализовать идеи

    • Подайте заявку на несколько доменных имен у поставщика услуг DNS, чтобы они указывали на один и тот же IP-сервис.
    • Обработка доменного имени выполняется для данных, возвращенных из фона, а замена доменного имени выполняется для ссылок на изображения.
    • После замены доменного имени ключ/значение сохраняется через localStorage. Чтобы одно и то же изображение могло кэшироваться браузером, а не перезагружаться при следующем отображении.

  • Реализация кода [Этот метод используется только в обратных вызовах 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" />

готово, цветок

shuai.jpeg

Категории