为什么 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 个/主机的低得多的限制)
我正在尝试使用 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 个/主机的低得多的限制)