[性能优化] 为虚拟列表增加离屏渲染和缓存

背景

在之前的一篇关于无限滚动优化的文章中， 我们使用了虚拟列表来改善用户体验，并取得了不错的效果。

本篇是后续，在虚拟列表中的图片缩略图增加离屏渲染和压缩缓存的能力， 作为功能增强。

主要的处理：

1. 增加一个用离屏渲染压缩图片的 Avatar 组件， 并替换原有的 Avatar 组建；
2. 增加了 LRU Cache 来缓存压缩过后的图片；
3. 实验性的加入 Web worker 防止压缩图片时主线程卡顿；

下文主要是分享具体方法的实现， 希望对大家有所帮助。

正文

我们知道， 在虚拟列表中， 视区之外的节点是不会被渲染的， 如图所示：

只有进入到视区， 或者设定的某个阈值， 比如上下一屏之内， 才会挂载和渲染， 以此来保持总的结点数在一个合理的范围内， 以此较少浏览器的负担， 缩短屏幕响应时间。

本地优化是针对列表中的图片， 做了一些处理， 来提高处理效率。

详细实现

页面接入

// view
import AvatarWithZip from '../molecules/AvatarWithZip';

- 
+ 

组件实现

// AvatarWithZip
import React, { useState } from 'react';
import Avatar, { AvatarProps } from 'antd/lib/avatar';
import useAvatarZipper from '@/hooks/use-avatar-zipper';

interface PropTypes extends AvatarProps{
  openZip: boolean;
}

const AvatarWithZip: React.FC = (props) => {
  const { openZip, src, size, ...otherProps } = props;
  const [localSrc, setLocalSrc] = useState(openZip ? '' : src);
  const resize = useAvatarZipper(size as number);
  React.useEffect(() => {
    if (!openZip) {
      return;
    }
    if (typeof src === 'string') {
      resize(src).then(url => {
        setLocalSrc(url);
      });
    } else if (typeof src === 'object') {
      setLocalSrc(src);
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [src, openZip]);

  return (
    
  );
};

export default React.memo(AvatarWithZip);

对应封装的 hooks

import React from 'react';
import LRU from 'lru-cache';
import AvatarZipWorker from '@/workers/avatar-zip.worker.ts';

type UseAvatarZipper = (src: string) => Promise;

const MAX_IAMGE_SIZE = 1024;

const zippedCache = new LRU({
  max: 500,
});

const worker = new AvatarZipWorker();

const useAvatarZipper: (size?: number) => UseAvatarZipper = (size = 32) => {
  const offScreen = React.useRef(new OffscreenCanvas(size, size));
  const offScreenCtx = React.useRef(offScreen.current.getContext('2d'));

  React.useEffect(() => {
    offScreen.current = new OffscreenCanvas(size, size);
    offScreenCtx.current = offScreen.current.getContext('2d');
    worker.postMessage({ type: 'init', payload: size });
  }, [size]);

  const resize: (src: string, max?: number) => Promise = React.useCallback((src, max = MAX_IAMGE_SIZE) =>
    new Promise((resolve, reject) => {
      const messageHandler = (event: MessageEvent) => {
        const { type, payload } = event.data;
        if (type === 'error') {
          reject(payload);
        }
        const { origin, dist } = payload;
        if (origin === src) {
          zippedCache.set(src, dist);
          resolve(dist);
        }
      };
      if (zippedCache.has(src)) {
        resolve(zippedCache.get(src) as string);
        return () => {};
      }
      worker.postMessage({ type: 'zip', payload: { src, max } });
      worker.addEventListener('message', messageHandler);
      return () => {
        worker.removeEventListener('message', messageHandler);
      };
    }),
  []);

  return resize;
};

export default useAvatarZipper;

worker 实现

const ctx: Worker = self as any;

interface MessageData {
  type: string;
  payload: any;
}

export interface MessageReturnData {
  type: string;
  payload: any;
}

let offScreen: OffscreenCanvas;
let offScreenCtx: OffscreenCanvasRenderingContext2D | null;

// Respond to message from parent thread
ctx.addEventListener('message', async (event: MessageEvent) => {
  const { data } = event;
  const { type, payload } = data;
  
  if (type === 'init') {
    offScreen = new OffscreenCanvas(payload, payload);
    offScreenCtx = offScreen.getContext('2d');
  }
  
  if (type === 'zip') {
    const { src, max } = payload;
    try {
      if (!offScreenCtx) {
        throw Error();
      }
      const res = await fetch(src);
      const srcBlob = await res.blob();
      const imageBitmap = await createImageBitmap(srcBlob);

      if (Math.max(imageBitmap.width, imageBitmap.height) <= max) {
        ctx.postMessage({
          origin: src,
          dist: src,
        });
      }

      const size = offScreen.width;
      offScreenCtx.clearRect(0, 0, size, size);
      offScreenCtx.drawImage(imageBitmap, 0, 0, size, size);
      
      const blobUrl = await offScreen.convertToBlob().then(blob => URL.createObjectURL(blob));
      ctx.postMessage({
        type: 'success',
        payload: {
          origin: src,
          dist: blobUrl,
        }
      });
    } catch (err) {
      ctx.postMessage({
        type: 'error',
        payload: err,
      });
    }
  }
});

相关配置修改

  // webpack 增加配置：
  {
    test: /\.worker\.ts$/,
    loader: 'worker-loader',
    options: {
      chunkFilename: '[id].[contenthash].worker.js',
    },
  }

  // types 

  declare module '*.worker.ts' {
    class WebpackWorker extends Worker {
      constructor();
    }

    export default WebpackWorker;
  }

总结

总的来说， 实现思路并不复杂， 主要是 worker 的实现，以及边界异常处理， 比如降级处理等。

对 worker 不熟的同学可以参考这篇文章。

内容就这么多， 希望对大家有所启发。

才疏学浅，如果错误， 欢迎指正， 谢谢。