Feed流产品的重用机制


作为一名产品经理,在体验产品时经常会遇到一些bug,这时开发会说能否录屏复现一下bug。


以最常用的新闻feed流为例,同一个feed你之前发现有问题(比如UI错位、数据错乱)等,再刷回这个feed却没有问题了。


[步骤一]发现Feed 1有bug

[步骤二]下滑看其他内容

[步骤三]刷回Feed1,发现bug不见了


这时场面就会很尴尬,开发觉得你找事,而你刚才确实发现有bug...


出现上面问题,我们需要学习一下feed流本身是怎么实现的。


首先,我们有一个基本的共识:每一个feed要想展示出来,都是需要被创建的。

其次,我们思考一下,既然feed需要被创建,那它被创建的时机有哪几种可能呢?


第一种:当我刷到n条内容时,页面立马就创建n个feed,这种最直观也最简单。

但是一次性创建的操作是不可取的。要知道每创建一个feed都需要消耗内存(可以理解成每买一个包包放家里,家里的空间都会少很多)。


那么类似今日头条、知乎、视频号这种产品,刷了半小时后很可能你已经看了上百个内容,如果手机这时也创建了上百个feed,那么随着你使用时间越长,手里机创建的feed会越多(包包买得越来越多),手机内存空间会渐渐不够用(家里可用房间会越来越少),而手机会越来越卡,直到内存完全被占用而卡死(家里的空间被用完)。


但实际上我们刷feed流类的产品时,并没有出现所描述的随着使用时间变长而越来越卡顿的情况,所以"刷到n条内容时,页面立马就创建n个feed"这种创建方式不可取。


第二种:只有当我即将看到某条内容时,才创建feed来进行展示。

这种方案可以有效避免创建太多feed导致系统内存用光的问题。以知乎为例,平时我们使用的手机最多展示5-10条知乎的内容,所以系统最多只需要占用5-10条feed的空间。用包包来理解就是:家里只有一面墙可以放包包,放包包的上限是10个,每次我们买来新的包包,然后把旧的包包给扔掉,这样就可以始终保持家里有足够的放包空间。


对价格敏感的产品已经发现了方案二的问题,为啥我每次买到新的包包,都要买旧的包包给扔掉呀?那岂不是太浪费钱了... 类比到手机App上就是太浪费手机的计算能力了,尤其是当你快速滑动手机屏幕时,就会出现上百条feed被创建,同时上百条feed被销毁,暴殄天物啊...


所以,第二种"只有当我即将看到某条内容时,才创建feed来进行展示"实际上也不是最可行的方案,那么怎么样既省内存空间,又避免重复的计算开销呢?


第三种:重用机制

还以买包包为例,实际上每个包包的主要区别是表面上的区别(比如纹理、颜色等),包包的主要功能基本上都是相似的。遂在方案二的基础上,当我买够了超过一面墙的包包后,此时如果我又看上了新包包,如果"再花钱买一个新的,然后把之前旧的给扔掉"(方案二)就太浪费了。

所以我们灵机一动发现 新包包 和 旧包包,主要功能基本一样,那么我只要请人来帮我把旧包包的颜色、纹理改装成和新包包的样式一样,这样用最小的成本获取了新的包包。


实际上,Feed流背后也有着类似重用的机制,系统会先创建足够屏幕展示的feed,而当你再向下滑动手机时,会把旧feed拿过来进行重用,把数据更新即可。


明白feed流有重用机制,我们就可以解答最开始的问题:"以最常用的新闻feed流为例,同一个feed你之前发现有问题(比如UI错位、数据错乱)等,再刷回这个feed却没有问题了。"


之前看到错位的feed A,和你重新刷回的feed A,其样式虽然一样,但其本质已经变了。


你第一次看到的feed A,是系统最开始创建的feed A,而你重新刷回看到的feed A,已经是重用了别人的feed,只是更新了feed A的数据而已。


还是用包包举例:

房间里一共可以放下三个包包,按时间线于是你最初买了LV、Gucci、PRADA这三个包包。

当你想拥有Chanel包包时,这时因为LV包包是最先买的,所以会把LV包包改装成Chanel包包,现在柜子里就变成:Gucci、PRADA、Chanel这三个包包。

过了几天你又想要之前的LV包包了,于是按时间线这时会把Channel包包给改装回LV包包,重新变成:LV、Gucci、PRADA这三个包包。

虽然这时还是LV、Gucci、PRADA这三个包包,但实际上第一个LV包包已经不是最新的了,它已经从新品变成了二手货。


这种机制可以用古希腊哲学家赫拉克利特所说“人不能两次踏进同一条河流”进行概括,下次当你遇到feed流产品bug不可复现时,可以从feed流的重用机制进行思考。


#产品经理#
全部评论
感谢参与牛客创作者计划!欢迎更多牛友来写干货,瓜分5000元奖励~~技术场活动链接:https://www.nowcoder.com/link/czztlqjs
点赞 回复 分享
发布于 2020-11-20 14:04

相关推荐

03-27 01:58
已编辑
西北工业大学 Java
在平静中度过当下:如果这个bg也简历挂的话可能他们现在不缺人了吧,我也是这两天投的,阿里和快手投的岗都是简历秒挂
点赞 评论 收藏
分享
1. 自我介绍2. 项目都是自己写的吗?3. 我看你用 koa2 写后端,为什么选择它,能讲讲吗?4. 那你提到 koa2 它是不提供中间件的,你是怎么解决的?5. 中间件的原理是什么?(洋葱模型)6. 你刚刚说碰到 next() 就进入下一个中间件,那 next 只能执行同步,如果是异步的话,你是怎么处理的?(async/await,但是我发现,有的中间件需要在异步中间件之前执行,所以我用 try/catch 来处理异步中间件的异常)7. JS 异步发展史,以及它们的优缺点说一下 (回调函数--Promise--Generator--async/await)8. 你刚刚说 Promise 状态不能更改,那如果我要设计一个能修改 Promise 状态的函数,你会怎么设计?9. CSS 水平垂直居中的方法(flex、grid、绝对定位 + margin:auto、绝对定位 + 负 margin、绝对定位 + transform、table-cell)10. 你刚刚说到 flex 布局,那 flex:1 是什么意思?(flex: flex-grow  flex-shrink  flex-basis;等价 flex:1 1 0%表示元素可以均分剩余空间,可拉伸、可压缩,不依赖内容宽度,自动自适应填充布局。)11. 父容器宽是 500px,然后它左右各有两个子容器是 100px,如果设置 flex: 1,那它的宽度是多少?(500-100-100=300px)12. 说说你对浏览器缓存的理解(强缓存、协商缓存)13. 如果一个用户,他怎么去刷新都无法刷到最新版的代码,你能说下可能的原因吗?(版本号、hash等)还有吗?(我说我不知道了,面试官说还有 CDN 没有同步,我说企业才会这么干,自己写项目一般不会,我知道 cdn 是用来解决高并发的手段)14. React你熟吗?说下 React 函数组件和类组件的区别15. 怎么避免 Hooks 导致组件重新渲染?(使用 useCallback、useMemo、React.memo、useRef等等)16. 谈一下我对 React 的状态管理的理解(Redux、Mobx、Zustand,我说 Zustand 用的最多)17. React 常见的 hooks 有哪些?(useState、useEffect、useRef、useCallback、useMemo、useReducer、useContext、useImperativeHandle、useLayoutEffect、useDebugValue)18. TS 你熟吗?我们引进 TS 的目的是为什么?19. interface 和 type 的区别20. 说下 TS 里的泛型21. 我现在有十个字段,比如十个字段就要 A B C D E F G 这种。那我现在另有另外一个方法,这个方法接受的参数呢,必须是这个 interface A 里面的这个 K。就比如说你可以是 A B C 可以 A B C D 任何组合都可以,但是必须是这个 interface 里面的 A 里面的定义的。这个 K 这种类型的话是怎么去定义呢?(说实话我有点不太理解啥意思,反正我说了 keyof)``` TypeScriptinterface Obj {A: stringB: stringC: stringD: stringE: string// 其他字段...}```22. vite 用过吗?说说和 webpack 的区别。vite 的优缺点是什么23. 说说 Tree shaking(树摇) 和 Code Splitting (代码分割)的区别24. Git 你熟吗?说说 git merge 和 git rebase 的区别,什么时候用 git merge,什么时候用 git rebase?25. web3 你熟吗?(不太熟,听说过而已)26. 我看你自我介绍说了 AI,你是怎么用的?27. 除了提示词,还有什么能让 AI 更聪明?28. AI 的优缺点你说一下29. AI 发展这么快,你觉得我们以后会扮演什么角色?30. 反问基本都答上来了。面了我80分钟,我还以为稳过的
查看29道真题和解析
点赞 评论 收藏
分享
评论
2
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务