Question

我目前正在研究更好的方法来完成图像的预加载，并认为使用网络工作者可能是一种更理想的方式。但是，我不确定是不是。使用后台工作者与经典式预加载相比，在性能和用户体验方面是否有任何特定的好处？哪个更好？

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

您可以使用网络工作人员轻松预加载图像并将其隐藏，直到您准备好显示它们为止。这会增加页面加载速度并减少抖动，以便在点击和加载之间无缝流动。

当在菜单到具有所需内容的页面之间转换时，通常会看到预加载图像的主要好处，例如地图或幻灯片中的下一个图像或类似内容。如果您有一个点击事件让用户看到图片，那么预加载是有益的。如果您使用谷歌的页面速度洞察进行测试，您会发现在点击功能时，预加载与传统加载相比会有巨大的性能提升。

在Github查看此代码，我认为您可能会发现它很有用。

如果使用Web工作程序加载图像，则可以避免阻止DOM构造，因此指定Web工作人员在图像准备就绪时加载图像，而不是在页面的其余部分也是有用的时候加载，但这不是听起来像是预加载给我，而是一个操作分配的顺序。如果图像不是内容而是背景，则不必使DOM构建阻塞。在这种情况下，使用网络工作者更好。

使用Web worker预加载图像是否有优势？

1 个答案: