使Instagram.com更快的三个步骤:预取数据、推送数据和使用缓存 -Instagram Engineering

19-10-12 banq
                   

近年来,instagram.com发生了许多变化-我们推出了故事,过滤器,创建工具,通知和直接消息传递,以及许多其他功能和增强功能。但是,随着产品的增长,副作用是我们的网络性能开始下降。在过去的一年中,我们做出了有意识的努力来改善这一状况。到目前为止,这项持续不断的工作已使我们的Feed页面加载时间累计提高了近50%。这一系列博客文章将概述我们所做的一些工作,这些工作导致了这些改进。

第1部分中,我们讨论了使用JavaScript,XHR和图像预取数据:

<link rel="preload" href="/static/FeedPageContainer.js" as="script" type="text/javascript" />

第2部分中,我们讨论了通过直接将数据推送给客户端而不是等待客户端请求数据来提高性能。使用早期刷新和渐进HTML推送数据

在第3部分(点击标题进入)使用缓存:

  • 在页面加载时,我们发送对新数据的请求(或等待其推送)
  • 创建Redux状态的分段子集
  • 在请求/推送未决期间,我们存储所有调度的动作
  • 请求解决后,我们会将操作与新数据以及所有待处理的操作一起应用到暂存状态
  • 提交暂存状态后,我们只需用暂存状态替换当前状态即可。

第4部分中,将介绍如何通过代码大小和执行优化来减少代码库的大小并提高其性能。