如何处理大的原始图片重渲染导致React应用滞后的问题？

Question

我正在使用CSS修改用户刚上传的背景图片的背景位置（所以是一个原始的Data URI），但如果图片是>1mb，重渲染就开始滞后。

对于较小的图片则不存在这个问题。

有什么办法可以解决这个问题，除了优化渲染？我已经不重新渲染了，除非背景位置变化至少1%（即重新渲染之间的变化是1%或更大）。

当我托管同一图片，然后从一个URL加载图片时，这个问题就不存在了。

你可以在一个小的网站上看到这个问题 CodeSandBox 我做的。在默认的URL中使用图片效果很好，但取文件上传时却非常滞后。

我能否以某种方式缓存数据？这似乎是因为原始数据没有被缓存，而图片却被缓存了，所以才会滞后。

Answer 1

我稍微修改了一下逻辑，并改变了以下内容 styles.backgroundPositionY 以直接通过 ref 元素进行样式操作。我看不出有什么大的改进。上传的图片在移动的时候确实很滞后，而默认的图片却很灵活。

const imageDivRef = useRef(null);

  const onUpload = e => {
    new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = onLoadEvent => {
        const dataUri = onLoadEvent.target.result;
        let image = new Image() // try to cache that
        image.src = dataUri;
        image.onload = () => {
          resolve(dataUri);
        }
      };

      reader.readAsDataURL(e.target.files[0])

  }).then(dataUri => {
    updateBackgroundImage(dataUri)
  })
};

  const onPan = e => {
    const y = position.y;
    const delta = (e.deltaY / CONTAINER_HEIGHT) * -100;
    requestAnimationFrame(() => {
      imageDivRef.current.style.backgroundPositionY = `${Math.min(
        Math.max(y + delta, 0),
        100)}%`
    })

  };

  const onPanEnd = e => {
    const y = position.y;
    const delta = (e.deltaY / CONTAINER_HEIGHT) * -100;
    requestAnimationFrame(() => {
    imageDivRef.current.style.backgroundPositionY = `${Math.min(
      Math.max(y + delta, 0),
      100)}%`
    })
  };

还有一个疯狂的想法。抛弃 backgroundPositionY，使包装div的溢出隐藏并固定大小，在它里面放入img元素，并用 transform: translateY(unit) 财产。不知道能不能更快...