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

Why does Html img tag only allow a maximum of 6 src to the same host?

我正在尝试使用 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 上都试过了。如果是这样,如何克服这一点?

它只是显示待处理。

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

If so, how can one overcome this?

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

或者您可以从多个子域提供服务,但这样您就有可能达到 全局 连接限制(在现代浏览器中为 10 到 20)。另一种缓解技术是使用 HTTP/2,这样多个请求可以在单个连接上 多路复用 。最后的选择是使用 websocket 而不是更简单的流,websocket 的连接限制比 HTTP 高得多(200+,尽管 chrome 曾经有 30 个/主机的低得多的限制)