【发布时间】：2019-12-12 17:40:24
【问题描述】：
我正在使用 chrome devtools 查看 Instagram 反应元素。 我观察到一个父 div（大父）保持我到目前为止滚动浏览的所有文章的高度。在这个父内部还有一个 div（flex 父），它是一个只有 8 个子（文章）的 flex 列。为 flex 父级计算 padding top 和 padding bottom， big parent height = flex parent 的 top-padding + flex parent height + flex parent' bottom-padding。
我的问题是为什么将 flex 列限制为只有 8 个项目。为什么我们不能将每篇新文章都添加到 fex 列并摆脱 felx 列的 padding-top padding-bottom 逻辑。 我们是否通过在 flex parent 中仅维护 8 项新闻提要来获得一些性能？
【问题讨论】：
-
滚动时会发生什么？它不断添加更多内容。所以他们有无限滚动
-
我的问题是为什么 flex 中只有 8 个子项。为什么要维护另一个名为 cGcGK 的父级。为什么我们不能在 flex 中包含整个子项？我很好奇为什么在 flex 中保持有限的物品数量。他们也在 Twitter 上做同样的事情。
-
我没有 Instagram，但我知道 twitter 有无限滚动。所以你在这里问错了问题。由于他们每天有超过一百万的用户，他们不想在你甚至不看他们的时候加载 100 个帖子。假设您有 10.000 个用户，并且他们都打开了 twitter 页面。如果每个人都加载了 100 个帖子，那么显示的帖子将是 10.000 x 100 = 1.000.000 个。
-
说没有用户想看到任何帖子，但他们想更改他们的个人资料。那是 1.000.000 个帖子一无所获。因此，他们没有显示 1.000.000 个帖子，而是选择显示 8 个帖子。即 10.000 x 8 = 80.000 个帖子一无所获。如果您想查看更多帖子，请开始滚动，它将加载更多帖子。所以这就是为什么他们显示 8 个帖子而不是所有帖子的原因。他们不希望服务器执行不必要的请求。你应该这样想
-
这是有道理的，我有不同的看法，谢谢