High-performance JavaScript Learning Note Series (5)-Quick-response user interface

Source: Internet
Author: User
Tags file url

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.