React 中使用 worker 和 decode 优化 image 的加载

图片加载占据了一个 web 应用的较多资源。

这篇文章中，咱们实现一个 ImgWorker 组件，知足如下功能：

• image 可选择的 worker 加载，而且作好优雅降级
• decode 解码，而且作好优雅降级
• miniSrc 和 src 竞速加载

注意，在性能较低的机器，开启 worker 进程下载的开销大于直接使用主进程下载的开销; 使用 worker 须要主动传递 worker 属性为 true 开启

组件代码

先上代码，后续对关键代码作一些解释：

src/react-img-worker.js :

import * as React from 'react';

const blobUrl = new Blob(
  [
    ` self.addEventListener('message', event => { const [url, type] = event.data; fetch(url, { method: 'GET', mode: 'no-cors', cache: 'default' }).then(response => { return response.blob(); }).then(_ => postMessage([url, type])).catch(console.error); }) `,
  ],
  { type: 'application/javascript' }
);

interface IImgWorkerProps
  extends React.DetailedHTMLProps<
    React.ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
  > {
  boxProps?: React.DetailedHTMLProps<
    React.ImgHTMLAttributes<HTMLImageElement>,
    HTMLImageElement
  >;
  miniSrc?: string;
  objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
  renderLoading?: any;
  worker?: boolean;
}

interface IImgWorkerState {
  isLoading: boolean;
  src: string;
}

export class ImgWorker extends React.Component< IImgWorkerProps, IImgWorkerState > {
  public static defaultProps = {
    objectFit: 'cover',
  };

  public div: any = null;
  public image: HTMLImageElement = new Image();
  public isLoadedSrcLock = false;
  public state = {
    isLoading: true,
    src: '',
  };
  public worker: Worker = null as any;
  public constructor(props: IImgWorkerProps) {
    super(props);
    this.image.style.width = '100%';
    this.image.style.height = '100%';
    this.image.style.display = 'none';
    this.image.style.objectFit = this.props.objectFit!;

    // 若是使用 worker 而且浏览器支持 worker
    if (this.props.worker && typeof Worker !== 'undefined') {
      this.worker = new Worker(URL.createObjectURL(blobUrl));
      this.worker.addEventListener('message', event => {
        const [url, type] = event.data;

        this.loadImage(url, type);
      });
    }
  }

  public componentDidMount() {
    this.div.appendChild(this.image);
    this.postMessage(this.props);
  }

  public componentWillReceiveProps(nextProps: IImgWorkerProps) {
    if (nextProps.objectFit !== this.props.objectFit) {
      this.image.style.objectFit = nextProps.objectFit!;
    }
    let isPostMessage = false;
    if (nextProps.miniSrc !== this.props.miniSrc) {
      isPostMessage = true;
    }
    if (nextProps.src !== this.props.src) {
      isPostMessage = true;
    }

    // 若是 src 或 miniSrc 更新，从新请求
    if (isPostMessage) {
      this.isLoadedSrcLock = false;
      this.postMessage(nextProps);
    }
  }

  public componentWillUnmount() {
    if (this.image) {
      this.image.onload = null;
      this.image.onerror = null;
    }
    if (this.worker) {
      this.worker.terminate();
    }
  }

  public loadImage = (url: string, type: string) => {
    // 若是 src 已经被设置，拦截后续的更新
    if (this.isLoadedSrcLock) {
      return;
    }
    if (type === 'src') {
      this.isLoadedSrcLock = true;
    }

    this.image.src = url;
    this.image.decoding = 'async';
    this.image.decode !== undefined
      ? this.image
          .decode()
          .then(this.onLoad)
          .catch(this.onLoad)
      : (this.image.onload = this.onLoad);
  };

  public onLoad = () => {
    this.image.style.display = 'block';
    this.setState({
      src: this.image.src,
      isLoading: false,
    });
  };

  public postMessage = (props: IImgWorkerProps) => {
    if (props.miniSrc) {
      if (this.worker) {
        this.worker.postMessage([props.miniSrc, 'miniSrc']);
      } else {
        this.loadImage(props.miniSrc, 'miniSrc');
      }
    }

    if (props.src) {
      if (this.worker) {
        this.worker.postMessage(this.worker.postMessage([props.src, 'src']));
      } else {
        this.loadImage(props.src, 'miniSrc');
      }
    }
  };

  public render() {
    const { boxProps, renderLoading: Loading, src: _src, ...rest } = this.props;
    const { isLoading } = this.state;

    return (
      <div ref={r => (this.div = r)} {...rest}> {Loading && isLoading && ( <Loading key="img-worker-loading" isLoaing={isLoading} /> )} </div> ); } } 复制代码

代码是 typescript 编写的，这是为了组件发版能够更简便的生成.d.ts 文件，内容很简单，其中关键在于两处：

1. 建立一个 worker

this.worker = new Worker(URL.createObjectURL(blobUrl));
复制代码

2. 使用 decode

decode 的功能网上有许多文章，这里不展开

const image = new Image();
image.src = url;
image.decoding = 'async';
image.decode !== undefined
  ? image
      .decode()
      .then(this.onLoad)
      .catch(this.onLoad)
  : (image.onload = this.onLoad);
复制代码

使用

使用默认 image loader, ImgWorker 保留了 <img /> 标签原有的全部 api

import { ImgWorker } from './react-img-worker';

export default () => {
  return <ImgWorker src="http://example.png" />;
};
复制代码

使用 worker loader:

import { ImgWorker } from './react-img-worker';

export default () => {
  return <ImgWorker worker src="http://example.png" />;
};
复制代码

支持 mini 图片，若是 设置了 miniSrc 会并行加载 miniSrc 和 src；若 miniSrc 优先加载完，显示 miniSrc；若 src 优先加载完会拦截这次后续的图片更新。

使用 worker + miniSrc + src：

import { ImgWorker } from './react-img-worker';

export default () => {
  return (
    <ImgWorker
      worker
      miniSrc="http://example.mini.png"
      src="http://example.png"
    />
  );
};
复制代码

直接使用 react-img-worker 库

为了方便使用，以上代码已发布至 npm，能够直接使用

$ yarn add react-img-worker
复制代码

但愿有对君有帮助：）