search

ABenassi87 / ngx-text-diff

A Text Diff component for Angular
https://ngx-text-diff.herokuapp.com/home
50 stars 44 forks source link

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

Open kalras opened 3 years ago

kalras commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

Lstylezz commented 2 years ago

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?