While working on a CI/CD web app, I needed to render code diffs in the browser.
Using libraries works well for typical cases, but performance degrades significantly with very large files. In our case (mostly Golang projects), generated files like go.sum can easily exceed 50k lines, which leads to noticeable UI freezes and poor scrolling performance due to the number of DOM nodes rendered.
To address this, I tried combining diffing with list virtualization. Instead of rendering the entire diff, only the visible rows are mounted using react-virtuoso, while the diff itself is computed using diff.
This approach significantly reduces DOM size and improves rendering and scrolling performance for large files.
I also ran some simple benchmarks comparing this approach with existing diff viewers to validate the impact of virtualization. The results show that virtualization makes a noticeable difference as file size increases.
If you’ve run into similar performance issues when rendering large diffs, this approach might be helpful.
Feedback, issues, and contributions are welcome — I plan to actively maintain and improve the project.
While working on a CI/CD web app, I needed to render code diffs in the browser.
Using libraries works well for typical cases, but performance degrades significantly with very large files. In our case (mostly Golang projects), generated files like go.sum can easily exceed 50k lines, which leads to noticeable UI freezes and poor scrolling performance due to the number of DOM nodes rendered.
To address this, I tried combining diffing with list virtualization. Instead of rendering the entire diff, only the visible rows are mounted using react-virtuoso, while the diff itself is computed using diff.
This approach significantly reduces DOM size and improves rendering and scrolling performance for large files.
I packaged this into a small library: https://github.com/Zhang-JiahangH/react-virtualized-diff
I also ran some simple benchmarks comparing this approach with existing diff viewers to validate the impact of virtualization. The results show that virtualization makes a noticeable difference as file size increases.
If you’ve run into similar performance issues when rendering large diffs, this approach might be helpful.
Feedback, issues, and contributions are welcome — I plan to actively maintain and improve the project.