通过渐进式图像加载改进 Instagram 网络

asadul78

我的工作要求我远离手机和移动通知，以便每天尽可能高效地工作。我每天坐在办公桌前总共 12 个小时（我远程工作），其中有 4 个小时用于浏览互联网，这并不罕见。

据我观察，Instagram 网站始终处于开放状态，访问率为我每天工作时间的 2.4%。我不认为这只是我的情况，因为仅在美国，17% 的 Instagram 流量来自桌面。

作为一名工程师，我倾向于尝试 希腊电话号码表  改进我每天使用的工具（生产力或乐趣）。对我来说，它就是 Instagram。因此，我整理了一份我可以进行的Instagram Web改进的列表，构建了一个简单的 Instagram 克隆，然后对这些点进行了改进。在这篇文章中，我将更多地讨论我所做的事情，您甚至可能会看到更多改进的空间。

需要改变复制此标题的链接
也许 Instagram 团队想到了我将要讨论的观点，并有他们不进行此类更改的原因。或者，也许他们从来没有想过要做这些事情。谁知道？以下列出了我希望每次从计算机（而不是手机）访问 Instagram 时都能拥有的功能：

滚动到播放：我一直在问自己为什么这不是网络上的功能，而是移动设备上的功能。在 Instagram 移动设备上使用无限滚动进行了长时间的会话后，我忘记了您必须在 Instagram Web 上单击视频才能播放。大多数时候，我只是等待以为我的网络再次变慢，直到我恢复正常。Instagram 网站拒绝播放视频的具体原因是什么？谁知道？


悬停以静音和取消静音：是的，我可以悬停，你知道吗？我用的是台式机，不是手机。悬停事件是我购买大型计算机应得的权利。为什么不利用 Instagram 网站呢？哦，是的，我可以点击播放和暂停——我知道。但是如果我希望视频没有声音播放怎么办？悬停可以很好地做到这一点。

渐进式图像加载：我们都知道图像是经过优化的，并且 Web 应用程序可能使用分辨率切换来为浏览器视图端口提供最佳图像分辨率。我住在非洲，那里3G速度慢是常态，所以与其在网络较差的情况下向用户削减灰色背景，也许您可​​以借鉴 Medium 的一些想法并逐步加载图像。



我打算如何改进复制此标题的链接
当然，我没有很多时间，所以我无法想象从头开始构建其中一些功能。哦，除非你付钱给我……那我们就可以谈谈。我打算使用第三方服务——Cloudinary——来解决大部分问题。Cloudinary 是一种端到端、基于云的媒体管理解决方案。它提供媒体（图像和视频）存储、转换和交付。

以下是 Cloudinary 可以帮助改进应用程序的地方的列表：

视频/图片传输及上传
裁剪和填充变换
宽度和高度变换
渐进式加载
优化
媒体存储
滚动播放的视频播放器
设置应用程序复制此标题的链接
Instagram Web 是使用 React 构建的，因此，我将通过在示例中使用 React 来证明这些限制不是特定于工具的。运行以下命令来创建 React 应用程序：


# Install CRA
npm install -g create-react-app

# Create a New App
create-react-app <app-name>
代码语言： PHP  （php ）
使用简单的 API 服务器持久保存有效负载复制此标题的链接
我们需要一个简单的数据持久机制来存储帖子列表。每个帖子都有基本要求，包括昵称、头像、标题和帖子媒体网址。我们可以使用服务器上的文件存储将帖子保存为 JSON 文件并从中读取和写入。