图片视频瀑布流长列表性能优化实践

5,499 阅读7分钟

先说需求

需求定义很简单,本来有一个这样的瀑布流页面,滚动加载更多卡片,在此基础上,增加视频支持,也就是说可能是图片也可能是短视频。视频要求在Wi-Fi时内联静音自动循环播放,不需要其他交互。

是不是非常简单的一句需求,要求也不高。

瀑布流

调研了视频内联播放的兼容性,问题不大。

静音播放也就一个muted属性的事情。

自动播放只需要mounted之后play一下,或者用autoplay属性。

循环播放就是loop属性啦。

判断Wi-Fi环境可以通过桥与客户端通信,这个涉及到具体业务,就不细说了,总之,调个API完事。

看起来已经实现了。

开始踩坑。

遇到性能问题

按照需求,后端会控制视频出现的频率,至少5个卡片才允许出一个视频,不然满屏幕视频,效果不好。但这是一个瀑布流,理论上可以滚动加载成百上千个卡片,假设每5个卡片放一个视频,效果会如何呢?

CPU占用情况

大概也就是这样吧,CPU温度可以上90,占用率300%+(四核八线程),用上那什么iphone-inline-video插件兼容iOS 9的话,可以上600%+。

表现在移动端就是滚都滚不动,即使是iPhone X,滑动起来也是非常无比卡顿。

尝试优化

现实世界中,用户一个屏幕最多看到几个卡片,基本不可能超过10个,但可能已经加载了上百张卡片,里面的视频都还在自动播放,CPU根本吃不消。

所以优化思路是,停止掉不需要的视频。但我的做法靴微激进了点,参考点评APP首页的效果,滚到下面再滚回去图片都是重新加载的,至少看起来是的,也许图片、视频资源都被GC了,而不仅仅是暂停视频。

我的实践是,不在可视区域的图片和视频直接替换成空div,用户滚回来的时候再替换回来。至于图片会不会被GC,交给容器去做。

那么,怎么实现这个效果呢?

一开始我在钻牛角尖的纠结,如何在父组件list中监听滚动,判断屏幕显示了哪些子组件card,并通知某些子组件你被优化了

好像不是很好做,那要不在每个子组件里自己监听一下滚动,判断自己的位置在不在可视区域?感觉性能会很差,毕竟滚动事件本身就会触发很多很多次,还要搞这么多监听器。

后来,我参考了lazysizes的实现,它是通过在全局window挂了一个lazyElements列表,在初始化的时候直接querySelectorAll('.custom-class-name')…… 大致思路就是:首先把所有元素加了个特殊的类名,初始化时取出来存在window对象下,然后监听滚动,forEach直接遍历所有元素,根据该元素的位置(是否在可视区域内)来判断是否需要加载。

考虑到我们频繁使用的lazysizes也不过就这样处理的,那我也可以这么做吧。主要实现的代码如下:

export default {
  mounted() {
    this.addOptimizeScrollListener();
  },
  beforeDestroy() {
    document.removeEventListener('scroll', this._optimizeListener, false);
  },
  methods: {
    addOptimizeScrollListener() {
      const windowHeight = window.innerHeight;
      const TOLERANCE_HEIGHT = 300;

      this._optimizeListener = throttleByRAF(() => {
        if (this.$refs.cards) {
          this.$refs.cards.forEach(card => {
            const rect = card.$el.getBoundingClientRect();

            if (rect.top > windowHeight + TOLERANCE_HEIGHT || rect.bottom < 0 - TOLERANCE_HEIGHT) {
              card.isOptimized = true;
            } else {
              card.isOptimized = false;
            }
          });
        }
      });
      document.addEventListener('scroll', this._optimizeListener, false);
    },
  }
};

简单解释一下:在mounted的时候添加滚动监听器。监听器做的事情就是通过$refs拿到cards组件列表,然后类似lazysizes的操作,直接forEach判断是否在视窗内,然后给该card组件实例的isOptimized赋值。这里有一些优化,比如throttleByRAF用来限流执行,TOLERANCE_HEIGHT用来容错,不要这么严格的按照视窗边界来优化,减少用户轻微滚动导致的重复加载。

主要的实现就是这里了,card组件内部只需要根据isOptimized的值来决定渲染图片视频还是空白就可以了。

值得注意的是,必须要获取到原有的图片视频的高度,否则就会有抖动,甚至瀑布流布局错乱。这里比较特殊的一点是,后端的接口里提供了宽高,可以提前预知高度,所以只需要按照给的高度填充空白即可。

其实也可以把整个card替换成空白占位(当然我这里说的空白不是纯白色,是五颜六色的占位,如果有想法,还可以设计一些占位图,提高视觉效果)。那怎么拿到高度呢?

答案就是window.getComputedStyle! 在mounted的时候获取一下存起来,被优化的时候用这个高度即可。

性能对比

首先,来个直观的体验对比,那就是CPU占用没这么夸张了,移动端滚起来也很快乐了,用起来和之前仅有图片时没有太多差别。

在Performance面板能观察到Nodes数量大幅减少,未优化时大约16000+,优化后3000~6000个。

由于之前被误导可能是内存占用过大导致的,所以我详细的对比了一下不同策略的内存使用情况。

内存快照对比

果然……没什么区别。。。可以看到优化掉整个卡片还是能省一点内存的。粗略看了一下细节,未优化的情况下,其中VueComponents的数量为632,占用8.9MB,优化后数量仅343个,占用5.1MB。两者的数量差值为289,可以说明当前只渲染11个卡片,符合预期。

然而这点差别相对来说还OK,因为我直接用了线上的图片300张,每张只有20KB左右。主要还是解决了CPU占用过高的问题,而回收DOM带来的内存优化算是赠送的吧。

其他问题

判断Wi-Fi导致卡顿

在较为古老的OPPO手机上测试该页面,发现还是有些卡顿,尝试把getNetworkType调用干掉,就继续丝滑了。

原因是每加载一个有视频的卡片时,我都会去判断一下网络类型,以应对用户切换Wi-Fi到4G之类的操作。因为APP的桥没有提供相应的监听函数,只好这样操作。但显然,不是很值得。

于是找到了一个在线和离线事件,可以监听浏览器上线和下线。如果用户从Wi-Fi切换到4G时会经历下线和上线,那真是完美了。当然,没有这么完美,切换网络过程中并没有触发这两个事件……

最终的解决方案是,每10秒调用一次getNetworkType,用轮询折衷一下。

静音播放Bug

静音播放视频似乎没有问题,但是当我点进一个详情页,打开新的webview,再返回到当前页面时,诡异的播出了声音…… 并且,还没有找到原因。

结果不做了

然后发现点评APP首页用的是WebP格式的动图,而不是视频。。。

改方案。。。

改接口。。。

优化基本是白写了,或者说,可以优化,但没必要。。。

(还是学到了点东西的)

最后的结局

平台对WebP支持的稀烂,动图直接没处理,暂时无法支持动图……

所以还是要使用视频。

好消息是这个优化没白做,坏消息是我必须要解决静音变成非静音的bug。

直接提了工单给平台,得知是对方手滑实现的“特性”,目前可以通过监听webview appear事件手动再设置一下muted即可。

这…算是happy ending吧。