是否使用React JS-从数据库加载图像的非交互式页面？

Question

我有一个登陆页面，其中从数据库中加载了图像，它不是用户交互的。它主要用于SEO。

当前加载页面大约需要5秒钟的时间。目前，该页面是在ERB模板中创建的，用于红宝石，并且在轨道上工作。

我们要提高它的加载速度。

使用React JS作为前端会减少页面的加载时间吗？如果没有，另一种选择是什么？

Answer 1

如果您需要使用最快的JS框架，请​​尝试使用Vanilla JS。绝对比React和Angular快

Answer 2

添加任何库都会（稍微）降低页面速度，假设此时您使用的是原始Javascript。如果您只需要在页面上创建一个响应页面大小的图像网格，则只需使用香草Javascript和Bootstrap网格CSS。检查您的开发人员工具以查看对后端的实际请求花费了多长时间，这可能是您的页面运行缓慢的原因是因为您正在从数据库/ API返回实际图像（大量数据！）（取决于您的后端）设置）请求，而不是指向提供这些图像的链接。

Answer 3

很有可能，您不需要做出反应。

缓慢的原因可能是图像尺寸。您可以尝试优化网络图像（例如，使用WebP：https://developers.google.com/speed/webp/和https://css-tricks.com/using-webp-images/），也可以使用延迟加载，例如：https://github.com/verlok/lazyload。

要了解页面为什么变慢的原因，可以使用Chrome或Firefox devtools瀑布，或者更深入地了解，Google Chrome在devtools下具有“ Audits”。

我将从“网络”选项卡下的devtools瀑布开始。

Answer 4

我建议使用Amazon S3存储桶来存储您的图像，并实施AWS的CDN Cloudfront以将您的内容缓存到更靠近用户的位置。

我还要补充一点，5s的加载时间几乎肯定不是由您的框架引起的，并且更可能与硬件有关。

您可能还需要考虑预加载图像。