SetTimeout time delay is 0 o'clock the difference between multiple browsers _javascript tips

Source: Internet
Author: User
Because it is not very familiar with the internal execution strategy of the browser, this article can only be through some of the front-end testing faintly guess some conclusions:
1) Test examples
Two examples were made:
1-1 the script executes directly in the page and looks at the result by refreshing
Copy Code code as follows:

<! DOCTYPE html>
<HTML>
<HEAD>
<script type= "Text/javascript" >
var t=new Date;
settimeout (function () {
Alert (' Cost time: ' + (new date-t))
},0);
</script>
</HEAD>
<BODY>
</BODY>
</HTML>


Test Results:  
 
In IE each version of browser, the resulting alert results are: 14 left, the interval between 8~21 milliseconds;
Chrome19, basically 1, the interval is between 1~5, but occasionally it will be about 15
firefox12, basically 3, the interval is between 2~7, but occasionally there are about 15 of the value
safari5.1, basically 4, the interval is between 1~7, but occasionally there are about 15 of the value
opera11.5, basically 5, the interval is between 2~8, but occasionally a large value

1-2) by clicking on the div to see the results

Copy Code code as follows:

<! DOCTYPE html>
<HTML>
<HEAD>
<script type= "Text/javascript" >
function Test () {
var t=new Date;
settimeout (function () {
Alert (' Cost time: ' + (new date-t))
},0);
}
</script>
</HEAD>
<BODY>
<div onclick= ' Test () ' id= ' div1 ' style= ' position:relative;width:200px;height:200px;background-color:green;left : 100px;top:100px; " >
</div>
</BODY>
</HTML>

Test results:
In IE each version of the browser, the resulting alert results are: 5 left, occasionally a large value;
Chrome19, basically 2, occasionally 3
firefox12, basically 1,0,2, but occasionally there are about 13 values
safari5.1, basically 1, occasionally 2 and 3
opera11.5, which is basically 4, 3, but occasionally has a value of around 12.
 
All of the above tests are tested in a single label that opens multiple pages that interfere with a complex page. The result is similar.
2 explain what?
In fact, there is no conclusion, but the test results basically reflect the current popular browser JS script efficiency rankings.
The reason, may come to some confirmation:
2-1 because the main execution of JS thread is single-threaded, so this value is generally greater than the 0,settimeout of the implementation of the time point is only to join JS main execution queue point of time, as to when the execution, is by the JS engine thread in order to execute the queue to decide. This conclusion is mentioned in many places. can be accessed by oneself (such as: JavaScript can multithreading?) Deep understanding of JavaScript timing mechanism);
This conclusion also confirms very hot time uses the settimeout to do the animation not to be fluent the reason and so on.
By the way, a picture of the backlight is a good illustration of the problem:

3-2 test occasionally a large value, there may be JS main execution thread to do other things, such as GC. Because large-value repetition occurs with few odds.
 
Summary: In fact, I did not draw a conclusion, just curious, and then guess, see may be the situation and results, I hope everyone criticized. Or answer me with a conclusion.
In addition: If the second argument in the Settimout function is a negative number, it will have the same effect as 0 if settimeout (function () {console.log (' test ')},-100); equivalent to settimeout (function () {console.log (' test ')},0).
I thought it would be an error, and all browsers did not complain.

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.