使用网络工作者预加载图像有优势吗？

Question

我目前正在研究更好的方法来完成图像的预加载，并且认为使用 web worker 可能是一种更理想的方法。但是，我不确定是不是。与经典风格的预加载相比，使用后台工作者在性能和用户体验方面有什么具体的好处吗？哪个更好？

function preloadBackground(a) {
    new d(window.URL.createObjectURL(
            new Blob([
            "(function () {" +
                "var x = new XMLHttpRequest();" +
                "x.responseType = 'blob';" +
                "x.open('GET', '" + a + "', true);" +
                "x.send();" +
            "}());\n"], { type: "text/javascript" })
            )
        )
}

function preloadClassic(a) {
    var i = new Image();
    i.src = a;
}

Answer 1

您可以使用 web-workers 轻松预加载图像并隐藏它们，直到您准备好显示它们。这会提高页面加载速度并减少卡顿，从而使点击和加载之间的流程无缝衔接。

预加载图像的主要好处通常体现在从菜单切换到包含所需内容的页面时，例如地图或幻灯片中的下一张图像或类似内容。如果您有一个将用户带到图片的点击事件，那么预加载是有益的。如果您使用 google 的页面速度洞察力进行测试，您会注意到在单击功能时预加载与传统加载相比，性能也有了巨大的提升。

在 Github 查看这段代码，我想你可能会发现它很有用。

如果图像是使用 web-worker 加载的，则可以避免阻塞 DOM 构造，因此分配 web worker 在图像准备就绪时加载图像而不是在页面其余部分加载时也会有所帮助，但这对我来说听起来不像是预加载，而是操作分配的顺序。如果图像不是内容而是背景，则没有必要使其 DOM 构建阻塞。在这种情况下使用网络工作者更好。

使用网络工作者预加载图像有优势吗？

Is there an advantage to using web workers to pre-load images?

javascript

image-preloader