为什么 Html img 标签只允许最多 6 个 src 到同一主机？答案

【问题标题】：Why does Html img tag only allow a maximum of 6 src to the same host?为什么 Html img 标签只允许最多 6 个 src 到同一主机？
【发布时间】：2020-12-04 22:14:20
【问题描述】：

我正在尝试使用 img 标签从同一主机请求 10 个流，但它最多只能达到 6 个，但如果我将 IP 地址与主机名结合起来，它确实可以工作。

下面是我使用的html。

<div class="container-fluid">
  <h1> Streams </h1>
  <div class="row">
    <div *ngFor="let idx of streams" class="col-md-3">
        <img [src]="idx" alt="">
      <br/>
    </div>
  </div>
</div>

工作解决方案： 如果我将 IP 地址与主机名结合起来，它就可以工作。

 streams = [
    'http://jetson1.local:8085/api/stream/accc8ee8f2c5',
    'http://jetson1.local:8085/api/stream/bcad28d47b1c',
    'http://jetson1.local:8085/api/stream/4447cc9d2a8714',
    'http://jetson1.local:8085/api/stream/0013e2fa6841',
    'http://192.168.51.76:8085/api/stream/48ea63a53318',
    'http://192.168.51.76:8085/api/stream/0013e2fa67dc',
    'http://192.168.51.76:8085/api/stream/08eded8744a1',
    'http://192.168.51.76:8085/api/stream/9c14633240be',
    'http://192.168.51.76:8085/api/stream/5804cb009268',
    'http://192.168.51.76:8085/api/stream/38af290fc271'
  ];

这些不起作用。 如果我像下面这样定义它是行不通的。

 streams = [
    'http://192.168.51.76:8085/api/stream/accc8ee8f2c5',
    'http://192.168.51.76:8085/api/stream/bcad28d47b1c',
    'http://192.168.51.76:8085/api/stream/4447cc9d2a8714',
    'http://192.168.51.76:8085/api/stream/0013e2fa6841',
    'http://192.168.51.76:8085/api/stream/48ea63a53318',
    'http://192.168.51.76:8085/api/stream/0013e2fa67dc',
    'http://192.168.51.76:8085/api/stream/08eded8744a1',
    'http://192.168.51.76:8085/api/stream/9c14633240be',
    'http://192.168.51.76:8085/api/stream/5804cb009268',
    'http://192.168.51.76:8085/api/stream/38af290fc271'
  ];

这是基于浏览器的某种限制。我在firefox和chrome上都试过了。如果是这样，如何克服这一点？

它只是显示待处理。

【问题讨论】：

你能量化“不起作用”的意思吗？图像是否加载过？我认为浏览器出于各种性能原因限制了同时网络请求的数量。

标签： html angular google-chrome firefox browser

【解决方案1】：

这与img 标签无关。浏览器本身将它们维护到任何给定域的连接数限制在 2 到 15 之间（所有现代浏览器都使用 6）。

如果是这样，如何克服这一点？

“不要这样做”将是最好的解决方案。

或者，您可以从多个子域提供服务，但您可能会遇到全局连接限制（现代浏览器上介于 10 到 20 之间）。另一种缓解技术是使用 HTTP/2，这样多个请求可以在单个连接上多路复用。最后的选择是使用 websocket 而不是更幼稚的流，websocket 的连接限制比 HTTP 高得多（200+，虽然 chrome 曾经有一个低得多的限制 30/主机）

【讨论】：