时间戳

首页 > 解决方案 > 为什么为我的 SPA 下载我的图像需要很长时间？

javascript - 为什么为我的 SPA 下载我的图像需要很长时间？

问题描述

我正在构建一个反应 SPA，我想要一个图像作为我主页的背景。图像为1.2mb，首次加载时有明显延迟，甚至以黑白加载，然后轻弹彩色

所以我尝试了一些事情。我已经压缩了。现在是 700kb。我已将其添加到 s3 存储桶中，而不是在本地使用。我创建了一个云端发行版，我正在请求它。显然，下载后图像很好，我在我的应用程序的不同页面之间滑动并返回主页，因为大概浏览器已缓存。但是，当我硬重新加载时，它似乎总是有点延迟。哦，我还在我的存储桶中的对象中添加了一个缓存控制标签。无论如何我可以解决这个问题或让它加载得更快吗？

哦还有一些代码：

const Container = styled.div`
    background-image: url(cloudfront.net/beach.jpg);
    background-size: cover;
    height: 100%;
    position: absolute;

    width: 100%;

    &:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(to bottom right, #000, #fff);
        opacity: 0.2;
    }
`

我实际上是将它应用到组件本身而不是直接的 html 或 body 元素

标签： javascriptreactjsamazon-s3amazon-cloudfront

解决方案

在优化图像方面实际上有一些策略，但让我列出两个你可以采用的最直接的策略。

1）您可能要考虑使用webp ，而不是使用传统的图像格式，例如jpegand ，因为它提供比前者更好的压缩。png

但是，请注意浏览器支持，因为 Safari 仍然不支持它。您可以考虑为不支持的浏览器使用备用图像格式webp。

2) 根据视口大小获取图像。您可以存储各种大小的图像，并确保您的应用根据视口大小获取正确的图像。例如，在移动设备上，您应该获取较小的图像。

推荐阅读