Added settings to improve performance on IE 11 by allowing prevention of DOM object removal #142
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
On IE 11, adding DOM elements and forcing calculations of offsetWidth causes lag. In complex applications, this can have a negative performance impact. I've added two settings values to account for this: Settings.removeFromDOM (true by default) Settings this to true, just hides the progress div rather than removing it from the DOM. Calling Nprogress.Start shows it again. This has a significant performance benefit in IE 11 as it minimizes calculations for layout. Settings.forceRedraw (true by default) This removes the forced redraw from the progress bar as it is not needed in all cases, and has a performance impact.
updates tests for new settings
celeronpm
changed the title
|
@rstacruz can you pls review this PR? |
|
@celeronpm Thank you for this PR, It improved my app, I'm debugging a performance issue in my app, and looks like this solved the issue! |
|
This force repaint/reflow is introduced in 031c5dc#diff-a320ff3f25e8b7cc682b156f26a26c91b47309d8783eadaa4934ca5114adae44R50 and affecting all browsers other than IE11. |
n0099
added a commit
to n0099/open-tbm
that referenced
this pull request
Aug 31, 2024
…ss#142 (comment) @ layouts/default.vue + `stores/globalLoading.ts` $ yarn remove {,@types/}nprogress @ fe
n0099
added a commit
to n0099/open-tbm
that referenced
this pull request
Aug 31, 2024
…ss#142 (comment) @ layouts/default.vue + `stores/globalLoading.ts` $ yarn remove {,@types/}nprogress @ fe
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I've added two extra settings aimed at improving performance. This has a substantial effect on modern heavy AngularJS apps on IE 11. In my performance tests, I was seeing 600ms overhead due to the offsetWidth calculations when the component was added/removed from the DOM.
The new settings will prevent DOM manipulation and will only hide the progress when it is done, so it is ready to go for the next call on SPAs.