首页 > 解决方案 > http2 最大并发流

问题描述

我是一个关于 http2 的菜鸟,但我认为我的问题与此有关。首先,我有一个托管在我公司庞大集群中的 wordpress 网站https://anekitalia.com。这是一个启用了 lamp 和 http2 mod 的 lxc debian9 容器,我正在使用缓存插件 wp rocket。在主页中,我放置了两个 javascript 来随机化背景视频和背景图像(图像仅在移动设备上可见)。这是我正在使用的代码。

<script>
//random video only desktop
var isMobile = 
/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ? 
true : false;
jQuery(document).ready(function($){
  if(!isMobile) {
        var video = new Array ();
        video[0] = "/anek-ferry-traghetti-grecia-low.mp4";
        video[1] = "/anek-ferry-traghetti-grecia-v2-low.mp4";
        var randomvideo = Math.floor(Math.random() * video.length);
        $('#random-clip video').attr('src', '/wp-        
 content/uploads/media' + video[randomvideo]);
        $('#random-clip source').attr('src', '/wp- 
content/uploads/media' + video[randomvideo]);
    }
});
</script>
<script>
//random background only mobile
jQuery(document).ready(function($){

 var background = new Array ();
 background[0] = "/traghetti-italia-grecia-anek-fallback1.jpg";
 background[1] = "/traghetti-italia-grecia-anek-fallback5.jpg";
 background[2] = "/traghetti-italia-grecia-anek-fallback2.jpg";
 var randombackground = Math.floor(Math.random() * background.length); 

$("#random-clip.et_pb_fullwidth_header.et_pb_fullwidth_header_0").css({
  'background-image': 'url(/wp-content/uploads/media' + 
background[randombackground] + ')',
    'background-position-y': '35%' });
});
</script>

问题是,如果您删除 chrome 缓存并查看 waterfool,您会注意到这一点 瀑布 对背景视频 anek-ferry-traghetti-grecia-v2-low.mp4 的请求与 facebook 像素和 google 脚本一起开始,但停止并在一段时间后重新启动,然后再次停止并重新启动,之后随机请求背景开始。我对 http2 的期望是所有请求都在彼此附近开始,我无法理解这种碎片,所以我认为当所有 google 和 facebook 脚本启动时,它们会超载 maximux 流请求,这就是结果。我读到我可以增加一个设置 SETTINGS_MAX_CONCURRENT_STREAMS 可能可以解决这个问题,但正如我写的那样,我对 http2 很陌生,所以我不知道该指令放在哪里。希望有人至少可以为我指明一个方向。非常感谢

标签: javascriptwordpressapachehttp2

解决方案


您的图像被请求 3 次的原因不是因为 HTTP/2 最大并发流(您的屏幕截图中没有那么多),而是因为图像是部分下载的 - 这从响应状态代码 206 中可以明显看出。

您可以在此处阅读有关 206 状态的更多信息:https ://httpstatuses.com/206 。

你看到的是完全正常的行为。


推荐阅读