From 08edfff13c3842578444dd38578a82c0c9ba18eb Mon Sep 17 00:00:00 2001 From: Marius Dornean Date: Thu, 19 May 2016 16:53:02 -0700 Subject: [PATCH 1/5] Added settings to increase performance on IE 11 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. --- nprogress.js | 40 ++++++++++++++++++++++++++++++++++------ 1 file changed, 34 insertions(+), 6 deletions(-) diff --git a/nprogress.js b/nprogress.js index 708bee1..fcdfd17 100644 --- a/nprogress.js +++ b/nprogress.js @@ -24,6 +24,8 @@ trickle: true, trickleSpeed: 250, showSpinner: true, + removeFromDOM: true, + forceRedraw: false, barSelector: '[role="bar"]', spinnerSelector: '[role="spinner"]', parent: 'body', @@ -71,7 +73,11 @@ speed = Settings.speed, ease = Settings.easing; - progress.offsetWidth; /* Repaint */ + + if(Settings.forceRedraw) + { + progress.offsetWidth; /* Repaint */ + } queue(function(next) { // Set positionUsing if it hasn't already been set @@ -86,7 +92,11 @@ transition: 'none', opacity: 1 }); - progress.offsetWidth; /* Repaint */ + + if(Settings.forceRedraw) + { + progress.offsetWidth; /* Repaint */ + } setTimeout(function() { css(progress, { @@ -118,6 +128,15 @@ * */ NProgress.start = function() { + + + if(NProgress.isRendered() && !Settings.removeFromDOM) + { + var progress= document.getElementById('nprogress'); + //Marius - set to visible after hiding + progress.style.visibility = "visible"; + } + if (!NProgress.status) NProgress.set(0); var work = function() { @@ -269,10 +288,19 @@ */ NProgress.remove = function() { - removeClass(document.documentElement, 'nprogress-busy'); - removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent'); - var progress = document.getElementById('nprogress'); - progress && removeElement(progress); + if(!Settings.removeFromDOM) + { + //Marius change - hide rather than remove from DOM, as this is super expensive in IE + var progress = document.getElementById('nprogress'); + progress.style.visibility = "hidden"; + } + else + { + removeClass(document.documentElement, 'nprogress-busy'); + removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent'); + var progress = document.getElementById('nprogress'); + progress && removeElement(progress); + } }; /** From 50501dd1d00b3ffdc85cda4517fc7f9e81943fdd Mon Sep 17 00:00:00 2001 From: Marius Dornean Date: Thu, 19 May 2016 16:59:39 -0700 Subject: [PATCH 2/5] Updated readme --- Readme.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index b0245e7..9230848 100644 --- a/Readme.md +++ b/Readme.md @@ -149,12 +149,28 @@ NProgress.configure({ showSpinner: false }); ~~~ #### `parent` -specify this to change the parent container. (default: `body`) +Specify this to change the parent container. (default: `body`) ~~~ js NProgress.configure({ parent: '#container' }); ~~~ +#### `forceRedraw` +Force redraw in the browser when the progress changes. Can have performance implications. (default: `false`) + +~~~ js +NProgress.configure({ forceRedraw: 'true' }); +~~~ + +#### `removeFromDOM` +Remove the component from the DOM when done, re-add when needed. This can have performance implications on complex apps in IE 11 as style calculations are slow. (default: `false`) + +~~~ js +NProgress.configure({ removeFromDOM: 'true' }); +~~~ + + + Customization ------------- From 8204c78fb3d386f7f1f3807c86e4d3f62a1fdc57 Mon Sep 17 00:00:00 2001 From: Marius Dornean Date: Thu, 19 May 2016 17:01:30 -0700 Subject: [PATCH 3/5] fix default --- nprogress.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/nprogress.js b/nprogress.js index fcdfd17..0abfe0b 100644 --- a/nprogress.js +++ b/nprogress.js @@ -24,7 +24,7 @@ trickle: true, trickleSpeed: 250, showSpinner: true, - removeFromDOM: true, + removeFromDOM: false, forceRedraw: false, barSelector: '[role="bar"]', spinnerSelector: '[role="spinner"]', From cac9ee7b5e11be64988484b6a2ce948814191ff3 Mon Sep 17 00:00:00 2001 From: Marius Dornean Date: Thu, 19 May 2016 17:21:10 -0700 Subject: [PATCH 4/5] Updated tests updates tests for new settings --- test/test.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/test/test.js b/test/test.js index a381b09..9e3ff72 100644 --- a/test/test.js +++ b/test/test.js @@ -41,7 +41,16 @@ assert.equal($("#nprogress").length, 1); setTimeout(function() { + + if(NProgress.settings.removeFromDOM) + { assert.equal($("#nprogress").length, 0); + } + else + { + $("#nprogress").visibility = "hidden"; + } + done(); }, 70); }); @@ -109,8 +118,17 @@ NProgress.remove(); var parent = $(NProgress.settings.parent); - assert.isFalse(parent.hasClass('nprogress-custom-parent')); - assert.equal(parent.find('#nprogress').length, 0); + + if(NProgress.settings.removeFromDOM) + { + assert.isFalse(parent.hasClass('nprogress-custom-parent')); + assert.equal(parent.find('#nprogress').length, 0); + } + else + { + $("#nprogress").visibility = "hidden"; + } + }); }); From a0cda7347c946126e12853b1cee6fa4ce57fa4fa Mon Sep 17 00:00:00 2001 From: Marius Dornean Date: Tue, 24 May 2016 13:50:20 -0700 Subject: [PATCH 5/5] Fix to reset progress to 0 if DOM removal is off --- nprogress.js | 1 + 1 file changed, 1 insertion(+) diff --git a/nprogress.js b/nprogress.js index 0abfe0b..dede924 100644 --- a/nprogress.js +++ b/nprogress.js @@ -135,6 +135,7 @@ var progress= document.getElementById('nprogress'); //Marius - set to visible after hiding progress.style.visibility = "visible"; + NProgress.status = null; } if (!NProgress.status) NProgress.set(0);