Performance Issues

Author: xjustleooCreated May 9, 2023Updated Apr 3, 2026

Labelsbug

I'm using this library to create thumbnails for a slide creator (like a web powerpoint basically) This is my code, im using a debounce logic to keep the thumbnail refreshes low. On my Mac the performance is good, but my windows computer lags like crazy.

export

  const hasBeenCalled = useRef(false);
  useEffect(() => {
    if (hasBeenCalled.current) return;
    const handler = setTimeout(() => {
      effect();
      hasBeenCalled.current = false;
    }, delay);

    return () => {
      clearTimeout(handler);
      hasBeenCalled.current = false;
    };
  }, [...dependencies, hasBeenCalled]);
};

export const updateThumbnail = async (page: WorkbenchPage) => {
  const { updatePageThumbnail } = useWorkbench.getState();

  const node = document.getElementById(`document-${page.id}-workbench`);
  if (!node) return;

  function filter(node) {
    return node.tagName !== 'i';
  }

  const options = {
    filter: filter,
    cacheBust: true,
    includeQueryParams: true,
    quality: 0.01,
  };

  await toJpeg(node, options);
  await toJpeg(node, options);

  const dataUrl = await toJpeg(node, options);
  updatePageThumbnail(page.id, dataUrl);
};```

Source: bubkoo/html-to-image

View original on GitHub View discussion on GitHub