Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ngx-text-diff slow when comparing files bigger than a few thousand lines #55

Open
kalras opened this issue Oct 16, 2020 · 4 comments
Open

Comments

@kalras
Copy link

kalras commented Oct 16, 2020

Thank you for such a useful component. The UI is very good, and its pretty performant until the files being compared are less than a few thousand lines.

Once the file size goes above 5000 lines, it starts taking on an average of 1 second per 1K lines. I have files of size 200K lines in my system, but then it takes almost 3-4 minutes to diff them. The bad part is that the browser freezes and user cannot even click on anything or cancel the diff operation. Same files take a few seconds to compare in Notepad++.

This can be easily reproduced by pasting a file of size 20K lines in the demo app at https://ngx-text-diff.herokuapp.com/home and clicking on "Compare" button.

Has anyone seen this issue? Is there any known workaround/fix? Any help/fix is appreciated.

@kalras
Copy link
Author

kalras commented Oct 19, 2020

I looked into the code. And here is what I found that can be of help here.

If the slowdown is in the diff, then Google diff-match-patch has a "Diff Timeout" option as shown in their demo page at https://neil.fraser.name/software/diff_match_patch/demos/diff.html If you are using values other than the default (which is probably just 1 second) , then please can we have a support for that option in your component.

But, seems like most probably the slowdown is due to the large table that is being created in the html/DOM. May be we can:

  1. Set the table to display: none; initially and once the document is ready set it back to display: table;
  2. For the table insertRows and appendChild using JS/TS code and add the table to the DOM when its done.

@kalras
Copy link
Author

kalras commented Nov 3, 2020

Switching between "Only Show Lines with Differences" option after the diff is done is even slower.

The provided "loading" option does not work for the component, so I added my own loading message for the initial diff, but once the diff completes (after a few minutes), switching between "Only Show Lines with Differences" option is even slower. It takes 3 to 4 times longer and the browser seems to be frozen without any loading message/indication.

@riccardotreagles
Copy link

@kalras how did you add your loading? how do you know when loading is finished to hide your indicator?

@Lstylezz
Copy link

Lstylezz commented Aug 2, 2021

I'm having the same problem as written above. I need to compare files with around 15k lines each and it takes more than 3 minutes to load/render the tables, once its all loaded/rendered the scrolling is "laggy" and if i want to switch the display options it takes again more than 3 minutes to load/render.

Are there any suggestions or workarounds to improve the performance?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants