Question

我的页面底部有一个功能，用于检查我的页面是否加载了所有资源。在Chrome和Firefox上它运行良好，但在Edge上它需要很长时间才能“令人难以置信”。例如，如果我的网站上有很多html5音频源，那么在我的document.readyState达到“完成”之前需要很长时间。但是，删除那些html5媒体元素（普通音频标签）会使脚本立即达到“完整”状态。

视频也是如此。其他浏览器中的加载，甚至是移动chrome都非常快，在Edge中它似乎预装了整个东西，就像字面上的资源一样，即使我目前还不需要它。

以下是我的页面加载脚本的骨骼：

   function initLoader() {
        var pageLoading;

        // Does some stuff

        document.onreadystatechange = function() {
            pageLoading = document.readyState;

            if (pageLoading == 'interactive') {
                // Loading

            } else if (pageLoading == 'complete') {
                // Loading done
            }
        }
    }

我使用的媒体：

  // Full screen, video is 1920 x 1080. 4 MB. 30 seconds long.

  <video playsinline autoplay muted loop>
    <source src='MyVideo.mp4' type='video/mp4'>
  </video>

  // MP3 audio with max quality. I have like 20 of those audio tags on my page. All around 4-6 MB. 3 minutes long.

  <audio>
    <source src='MyAudio.mp3' type='audio/mpeg'>
  </audio>

我知道有问题的文件真的很大，但这不应该是一个问题，在chrome和firefox中它的工作速度非常快，它实际上只是微软边缘失败了。

为什么Edge表现得如此奇怪，让我的页面加载需要多长时间？我该如何解决这个问题？

Edge在Windows 10上运行。

Answer 1

就像它的前辈Edge不支持预加载属性一样。似乎无论在什么情况下，Edge都会下载它看到的所有内容。因此，如果您有100个媒体元素，则边缘会全部下载。如果你问我就疯了。

我的解决方案是删除src或向其添加一个空字符串，并在需要时动态地将url应用于媒体。

Answer 2

某些元素支持async=true属性。此外，您可以通过javascript在页面加载后花费很长时间放置元素：首先有一个容器 <div id='videocontainer1'></div> 并在页面加载时替换它 window.addEventListener('load',function(){ document.getElementById("videocontainer1").outerHTML = "<video playsinline autoplay muted loop> <source src='MyVideo.mp4' type='video/mp4'> </video>"; }); 和你的音频一样。

边缘预加载所有HTML媒体资源？页面加载速度慢

2 个答案: