search

codeforamerica / resident-web-use-research

[work in progress] Digital Front Door survey tool for resident research
8 stars 4 forks source link

Performance Optimization: time based #23

Closed milafrerichs closed 8 years ago

milafrerichs commented 8 years ago

What does this PR do?

It optimizes the correlation process. Based on the work on #18

It adds a chunk and time approach to tackle the long correlation. It uses a method introduced here: https://www.nczonline.net/blog/2009/08/11/timed-array-processing-in-javascript/)

It is a chunk based approach but a time component is added. Loop through the array that is being proccessed and every 50 miliseconds set a timeout for 25 milliseconds to give the browser ui a chance to update.

once the process is complete call the callback function.

A couple of points from his article to reason the magic numbers 25 and 50.

Jakob Nielsen stated in his paper, Response Times: The Three Important Limits, that 0.1 seconds (100 milliseconds) is “is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.”

I’d actually take this one step further and say that no script should run continuously for more than 50 milliseconds. Above that, you’re trending close to the limit and could inadvertently affect the user experience. I’ve found 50 milliseconds to be enough time for most JavaScript operations and a good cut-off point when code is taking too long to execute.

Using a 100 millisecond delay on an array of 100 items means that processing takes at least 10,000 milliseconds or 10 seconds. The delay should really be decreased to 25 milliseconds. This is the minimum delay that I recommend to avoid browser timer resolution issues. Internet Explorer’s timer resolution is 15 milliseconds, so specifying 15 milliseconds will be either 0 or 15, depending on when the system time was set last. You really don’t want 0 because this doesn’t given enough time for UI updates before the next batch of JavaScript code begins processing. Specifying a delay of 25 milliseconds gives you a guarantee of at least a 15 millisecond delay and a maximum of 30.