Difference between multiple browsers when the latency of setTimeout is 0

Last Update:2018-12-08 Source: Internet

Author: User

Tags ranges

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Because I am not very familiar with the browser's internal execution policies, this article only uses some tests on the front-end to draw some conclusions:
1) test example
Two examples are provided:
1-1) execute the script directly on the page and refresh the result. Copy codeThe Code is 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 browsers, the result of alert is generally: 14 left behind, with a range of 8 ~ 21 ms;
Chrome19, which is 1 and ranges from 1 ~ Between 5, but occasionally around 15
Firefox12, which is 3 and ranges from 2 ~ Between 7, but occasionally there are about 15 values
Safari5.1, which is 4 and ranges from 1 ~ Between 7, but occasionally there are about 15 values
Opera11.5, which is 5 and ranges from 2 ~ Between 8, but occasionally there are very large

1-2) Click div to view the result.

Copy codeThe Code is 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 browsers of various ie versions, the result of alert is generally about 5, with a large value occasionally;
Chrome19, basically 2, occasionally 3
Firefox12, which is about 1, 0, and 2, but occasionally has about 13 values.
Safari5.1, basically 1, occasionally 2 and 3
Opera11.5, which is 4, 3, but occasionally has about 12 values.
　
All of the above tests are performed in the tags that open multiple complex pages with interference and one tag. The results are similar.
2) What is the description?
However, the test results basically reflect the efficiency ranking of popular browser js scripts.
The reason may be confirmed as follows:
2-1) because the main execution thread of js is a single thread, This value must be generally greater than 0. The execution time of setTimeout is only the time point added to the main execution queue of js, the execution time is determined by the queue in which the js engine thread executes in sequence. This conclusion is mentioned in many cases. You can check it yourself (for example, can JavaScript be multithreading? In-depth understanding of the JavaScript timing mechanism );
This conclusion also confirms the reason why setTimeout is not smooth.
By the way, a picture of the backlight is displayed here to illustrate the problem:

3-2) the test is occasionally fatal. It may be because other tasks, such as GC, are done in the main execution thread of the js. This is because the probability of repeated occurrence of a shard is very small.
　
Conclusion: I did not come to a conclusion, but I was just curious. I guess it may be the case and result. I hope you will criticize and correct it. Or reply to me with a conclusion.
In addition, if the second parameter in the setTimout function is negative, 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 an error was reported, but no error was reported in all browsers.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More