背景

在之前的一篇对于有限滚动优化的文章中，咱们应用了虚构列表来改善用户体验，并获得了不错的成果。

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

次要的解决：

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

下文次要是分享具体方法的实现，心愿对大家有所帮忙。

注释

咱们晓得，在虚构列表中，视区之外的节点是不会被渲染的，如图所示：

只有进入到视区，或者设定的某个阈值，比方高低一屏之内，才会挂载和渲染，以此来放弃总的结点数在一个正当的范畴内，以此较少浏览器的累赘，缩短屏幕响应工夫。

本地优化是针对列表中的图片，做了一些解决，来进步解决效率。

具体实现

页面接入

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

- <Avatar className="product-image" src={record.image} size={32} />
+ <AvatarWithZip className="product-image" src={record.image} size={32} openZip />

组件实现

// 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<PropTypes> = (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 (<Avatar src={localSrc} size={size} {...otherProps} />
  );
};

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<string>;

const MAX_IAMGE_SIZE = 1024;

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

const worker = new AvatarZipWorker();

const useAvatarZipper: (size?: number) => UseAvatarZipper = (size = 32) => {const offScreen = React.useRef<OffscreenCanvas>(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<string> = React.useCallback((src, max = MAX_IAMGE_SIZE) =>
    new Promise<string>((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<MessageData>) => {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 不熟的同学能够参考这篇文章。

内容就这么多，心愿对大家有所启发。

满腹经纶，如果谬误，欢送斧正，谢谢。