Reference high-performance JavaScript
The process of understanding that the browser UI thread is used to execute JavaScript and update the user interface is often referred to as the browser UI thread's working mechanism that can be understood as a simple queuing system in which tasks in the queue are executed sequentially
<button onclick= "Handleclick ()" >click</button><script type= "Text/javascript" > function Handleclick () { var div = document.createelement (' div '); = "AAA"; Document.body.appendChild (div); }
In the example above, when the button is clicked, it triggers two tasks created by the UI thread and is added to the queue, updating the UI of the clicked button, and executing the JavaScript code (Handleclick) if the queue is idle at this moment ( The number of cases where a user action cannot be added to the queue is the first task is immediately executed and then the JavaScript code is extracted and executed, and a div is created during the execution of the JavaScript code, and another UI update is triggered when JS runs out. Display the created Div)
Since the length of the JS script will cause the newly created task to fail to join the queue, it is necessary to limit the execution time of the script or let the browser's UI thread make the new task add to the queue during the execution of the script.
Understanding timer Reference My previous blog timer related settimeout setinterval requestanimationframe
Through some of the above point timers can be called long-running scripts for cross browser solutions
replacing loops with timers
- Whether the process must be synchronized
- Whether the data must be processed sequentially
If the above two answers are not, then we can use a timer instead of the loop.
function Processarray (items,process,callback) { var todo = items.concat (); SetTimeout (function() { process (Todo.shift ()); if (Todo.length > 0) { setTimeout (Arguments.callee); } Else { callback (items); }},); }
The function callback function that takes an array item to handle an array item is guaranteed to have no missing code fragments in the queue and ensures that the code executes at least 25ms at the same interval.
The drawback of the above method is to prolong the total length of the processing array (time interval is added) but given a certain interval of time left to the UI thread, can avoid the long-running code causes the browser to lock the dead
Improved version of timers instead of loops
functionTimedprocessarray (items,process,callback) {varTodo =Items.concat (); SetTimeout (function(){ varStart = +Newdate ();//plus converts a Date object to a number Do{process (Todo.shift ()); } while(Todo.length > 0 && (+NewDate ()-start) < 50)//The current processing time interval is short without the decomposition of the cycleif(Todo.length > 0) {setTimeout (Arguments.callee,25); } Else{callback (); } }); }
Split task
dividing a task into multiple atomic tasks, using a timer to perform the corresponding atomic task, with the same idea as the above loop-processing array
function multistep (steps,args,callback) { var tasks = Steps.concat (); SetTimeout ( function () { var task = Tasks.shift (); Task.apply ( null , args | | []); if (tasks.length > 0 25 else {callback (); }}, 25
Understanding Web Workers You can create a new thread in a Web page by defining a file that contains worker code through the new worker ("JS file url"), which interacts with the main thread in a specific way and does not affect the execution of the main thread
Main Thread var New Worker ("Worker.js"function(event) { alert (event.data);}// The Worker.postmessage ("Hello"function(event) { self.postmessage () that the page code receives data Event.data+ "World");} handler function for the worker receiving the Web page code data
Only specific data can be passed through postmessage such as raw values (string numeric boolean null undefined) can also be passed object and array instance data will be serialized into and out of the worker and then deserialized
Useful: Web workers for long-running scripts that handle pure data or are not related to the browser UI
High-performance JavaScript Learning Note Series (5)-Quick-response user interface