Fast Response User Interface for js Performance Optimization

The processes used to execute JavaScript and update the user interface are commonly referred to as "browser UI threads." JavaScript and UI updates run in the same process, so you can handle only one thing at a time.

Any JavaScript task should not be executed for more than 100 milliseconds. Too long running time leads to obvious delay in UI update, which will affect the user experience.

Browsers have two types of mechanisms to limit the running time of JavaScript tasks. Call stack size limit (that is, record the number of statements executed since the script started) and long-running script limit (record the total length of script execution, and pop-up box will prompt the user when it timeout [chrome does not have a separate Cheng Yunxia script limit, instead, it relies on its universal crash detection system to deal with such problems]).

Some common practices for optimizing JavaScript task time:

① Make the timer give up the time segment

1. Use a timer to process arrays. When the processing process does not need to be synchronized and the data does not need to be processed in sequence. Consider using a timer to decompose tasks.

Such as:

function processArray(items,process,callback){
 var todo = items.concat();
 setTimeout(function(){
 process(todo.shift());
 
 if(todo.length > 0){
 setTimeout(arguments.callee,25);
 } else {
 callback(items);
 }
 },25);
}
var items = [1,2,3];
function output(value){
 console.log(value);
} 
processArray(items,outputValue,function(){
 console.log('finished output!')
});

② Segmentation task

If the running time of a function is too long, it can be split into a series of sub-functions that can be completed in a short time.

Such as:

function multistep(steps,args,callback){
 var tasks = steps.concat();
 setTimeout(function(){
 var task = tasks.shift();
 task.apply(null,args||[]);
 
 if(tasks.length > 0){
 setTimeout(arguments.callee,25);
 } else {
 callback();
 }
 },25);
}
function saveDocument(id){
 var tasks = [open,write,close];
 multistep(tasks,[id],function(){
 console.log('finished!');
 })
} 

③ Record the running time of the code

Sometimes it is inefficient to perform only one task at a time, and it is even worse to have a delay of 25ms between two times. Therefore, a time detection mechanism can be added to improve the processArray () method.

Such as:

function timeProcessArray(items,process,callback){
 var todo = items.concat();
 setTimeout(function(){
 var start = +new Date();
 do{
 process(todo.shift());
 }while(todo.length > 0 &&(+new Date() - start < 50)) ;
 if(todo.length > 0){
 setTimeout(arguments.callee,25);
 } else {
 callback(items);
 }
 },25);
}

Note that although timers can improve performance, overuse will backfire. It is necessary to control the number of uses in web applications.

④ Use Worker

Web Worker is a feature supported by the new browser, which allows JavaScript code to be executed outside the UI thread, thus avoiding locking UI.

Reference: http://www.alloyteam.com/2015/11/deep-in-web-worker/

Remarks:

Personally, there are still too many defects in Worker. It can't be used, and it should be used with caution.