一个控件应该知道自己有没有被显示在屏幕里面吗?

#1

很久之前看到Discourse是使用这样的技巧来降低内存占用:
列表中的元素(例如这个论坛里面的帖子)在列表滚动时随时注意自己有没有被显示出来。如果没有被显示,就把DOM内容设置为空。对滚动加载的应用而言很有用。

现在在研究web框架,重新想到了这个问题。React要实现同样的效果似乎比Ember还要容易一些,而且好像可以把这个功能放到框架级别,针对所有控件实现。
但是要实现响应式布局就难一些。
各位觉得这样的功能有没有价值?缺陷是什么呢?

#2

理论上是dom元素越少性能越高。使用频率低的元素可以这样设计。

#3

react 是 virtual dom。virtual dom 对于这个 issue 意味着什么?

举例来说,airbnb 开源过 infinite scroll 原理大致就是看 dom element 是不是在 viewport 里,然后相应的 move in/out。

但是 react 在 dom 渲染之前就做 check,是在 virtual dom 里,也就是 javascript 做的(而非 dom 操作)。

然后进一步优化,当然可以优化为 viewport 上下边缘外各留部分 list item。

#4

不仅是这个问题
如果一个控件使用了后端的实时数据,就可以利用它是否实际显示来节省带宽和连接
例如,视频在没有被显示的时候可以只传输音频部分
实现很难所以我放弃了,不过觉得这想法还是有价值的。会带来什么问题就不清楚了。

#5

可以关注一下:https://github.com/bvaughn/react-virtualized

1 Like