Javascript引擎单线程机制及setTimeout执行原理说明

setTimeout用法在实际项目中还是会时常遇到。比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何改变而忽略这两句话,因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了(虽然速度很快可能无法被察觉)。

  总之,setTimeout增加了Javascript函数调用的灵活性,为函数执行顺序的调度提供极大便利。

然后,我们从基础的层面来看看:理解JavaScript的定时器是如何工作的是非常重要的。

计时器的执行常常和我们的直观想象不同,那是因为JavaScript引擎是单线程的。我们先来认识一下下面三个函数是如何控制计时器的。

var id = setTimeout(fn, delay); - 初始化一个计时器,然后在指定的时间间隔后执行。该函数返回一个唯一的标志ID(Number类型),我们可以使用它来取消计时器。

var id = setInterval(fn, delay); - 和setTimeout有些类似,但它是连续调用一个函数(时间间隔是delay参数)直到它被取消。

clearInterval(id);, clearTimeout(id); - 使用计时器ID(setTimeout 和 setInterval的返回值)来取消计时器回调的发生

 

有一个基本的概念你得记住了:

时间延迟不能被保证。什么意思,就是说你这样写setTimeout(fn, 500)并不代表fn肯定在500毫秒之后马上就执行,延迟很可能会更长。因为 JavaScript 是单线程语言,所有的异步事件(包括计时器、鼠标事件或者一个 XMLHttpRequest 完成)仅仅当程序执行期间有缺口的时候才会执行,不是你规定了什么时候就什么时候执行,要知道程序员不是万能的,你写的东西最终还是要看浏览器脸色的。

 

用一个很好的图表加以说明:

 

 

JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化.

那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?
下面结合浏览器内核处理方式简单说明.

浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线 程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产 生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的.虽然每个浏览器内核实现细节不同,但这其中的 调用原理都是大同小异.

由图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自 JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发 器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线 程关系,这些任务得进行排队,一个接着一个被引擎处理.

 

 

IE8及其之前的IE版本更新间隔为15.6毫秒。假设你设定的setTimeout延迟为16.7ms,那么它要更新两个15.6毫秒才会该触发延时。这也意味着无故延迟了 15.6 x 2 - 16.7 = 14.5毫秒。

           16.7ms
DELAY: |------------|

CLOCK: |----------|----------|
         15.6ms    15.6ms

所以即使你给setTimeout设定的延时为0ms,它也不会立即触发。目前Chrome与IE9+浏览器的更新频率都为4ms(如果你使用的是笔记本电脑,并且在使用电池而非电源的模式下,为了节省资源,浏览器会将更新频率切换至于系统时间相同,也就意味着更新频率更低)。

退一步说,假使timer resolution能够达到16.7ms,它还要面临一个异步队列的问题。因为异步的关系setTimeout中的回调函数并非立即执行,而是需要加入等待队列中。但问题是,如果在等待延迟触发的过程中,有新的同步脚本需要执行,那么同步脚本不会排在timer的回调之后,而是立即执行

 

让我们用一个例子来阐明setTimeout和setInterval之间的区别:

  setTimeout(function(){
    /* Some long block of code... */
    setTimeout(arguments.callee, 10);
  }, 10);
  
  setInterval(function(){
    /* Some long block of code... */
  }, 10);

 

这两句代码乍一看没什么差别,但是它们是不同的。setTimeout回调函数的执行和上一次执行之间的间隔至少有10ms(可能会更多,但不会少于10ms),而setInterval的回调函数将尝试每隔10ms执行一次,不论上次是否执行完毕。

在这里我们学到了很多知识,总结一下:

JavaScript引擎是单线程的,强制所有的异步事件排队等待执行

setTimeout 和 setInterval 在执行异步代码的时候有着根本的不同

如果一个计时器被阻塞而不能立即执行,它将延迟执行直到下一次可能执行的时间点才被执行(比期望的时间间隔要长些)

如果setInterval回调函数的执行时间将足够长(比指定的时间间隔长),它们将连续执行并且彼此之间没有时间间隔。

 

参考:

一家之言:说说 JavaScript 计时器的工作原理_大前端

 

http://www.daqianduan.com/1112.html  

JavaScript的单线程性质以及定时器的工作原理 - Rain man - PHP博客

 

http://www.phpweblog.net/rainman/archive/2009/01/05/6267.html 

JavaScript可否多线程? 深入理解JavaScript定时机制 - 前端交互 - PHP5研究室

 

http://www.phpv.net/html/1700.html 
 

转载于:https://www.cnblogs.com/answercard/p/3852795.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/432445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java实现c语言的函数_C语言实现返回字符串函数的四种方法

前言C语言返回字符串函数共有四种方式,分别如下:使用堆空间,返回申请的堆地址,注意释放函数参数传递指针,返回该指针返回函数内定义的静态变量(共享)返回全局变量下面来看看详细的介绍其实就是要返回一个有效的指针&am…

解决VS命令提示符 “Setting environment for using Microsoft Visual Studio. 此时不应有“系列错误

一、起因 最近在玩Boost库。当然首先是要进行Boost库的安装和配置。于是浅墨Google了一下boost库的安装配置攻略,下载了最新版1.55的boost库,就愉悦地开始进行配置了。 当进行到第五步,要在VS命令提示符中运行bootstrap.bat的时候&#xff0c…

yii2多语言设置

yii2的多语言切换功能 1.页面添加语言切换按钮&#xff0c;如下图&#xff1a; 代码如下&#xff1a; <ul> <li> <a href"javascript:;" οnclick"changeLanguage(en_US);"> <span><?php echo …

php 字符串 大括号,PHP中的字符串大括号

复杂(卷曲)语法这并不是因为语法复杂&#xff0c;而是因为它允许使用复杂表达式。任何具有字符串表示的标量变量、数组元素或对象属性都可以通过此语法包括在内。只需将表达式以与字符串外显示的方式相同的方式写入&#xff0c;然后将其包装在{和}..自{无法转义&#xff0c;只有…

bat

1. 打印变量 set a 123echo %a%2. if errorlevel 测试前一程序的返回状态。如果该程序的返回状态大与或等于所说明的值就执行所说明的DOS命令 if errorlevel 命令让批处理文件测试一程序的返回状态值&#xff0c;然后根据测试结果作相应的进一步处理&#xff0c;当MS-DOS遇到…

APP安全环节缺失,手游运营商怎样应对APP破解困境

2013年手游行业的规模与收入均实现了大幅增长&#xff0c;发展势头强劲。然而&#xff0c;在手游快速发展的同一时候&#xff0c;因为监管、审核等方面存在着漏洞&#xff0c;手机游戏软件被破解后注入恶意代码、盗取用户財产、窃取用户设备信息的现象屡见不鲜。手游被破解后黑…

UE4版本和vs版本的对应关系

查找UEBuildWindows.cs文件&#xff0c;里面记录了此版本的UE4可以用哪个版本的VS编译 比如 4.19.1版本 public enum WindowsCompiler {/// <summary>/// Use the default compiler. A specific value will always be used outside of configuration classes./// </su…

linux php cpu,获取Linux服务器性能CPU、内存、硬盘等使用率 PHP

数据库配置文件&#xff1a; conn.phpdefine("MONITORED_IP", "172.16.0.191"); //被监控的服务器IP地址 也就是本机地址define("DB_SERVER", "172.16.7.2"); //存放数据的服务器IP地址define("DB_USER", "roo…

Codeforces 229D

一 题意描述&#xff1a; 有n(1<n<5,000)座塔排在一条直线上&#xff0c;从左到右每个塔的高度分别为hi(1<hi<100,000)&#xff0c;每次操作你可以选择一座塔&#xff08;假设是第i座&#xff09;&#xff0c;用吊车把它吊起来&#xff0c;然后放到与它相邻的一座塔…

GenerateProjectFiles.bat分析

1. 实际是调用了Engine\Build\BatchFiles\GenerateProjectFiles.bat 2. 然后调用Engine\Build\BatchFiles\GetMSBuildPath.bat 3. 依次查找2017,2015,2013 vs的MSBuild.exe&#xff0c;首先找到哪个版本的MSBuild.exe就直接成功退出 4. 调用MSBuild.exe生成UnrealBuildTool MSB…

php设计模式的作用是什么意思,php设计模式工厂模式有什么作用?

我们给大家介绍了php工厂模式的好处&#xff0c;工厂模式的含义&#xff0c;以及工厂模式的三种情况&#xff0c;那么我们今天继续给大家介绍php工厂模式的作用是什么&#xff01;工厂模式分为三种&#xff1a;简单工厂、工厂方法、抽象工厂 ,三种工厂的区别是&#xff0c;抽象…

matlab sort descend,详解Matlab中 sort 函数用法

搜索热词(1)Bsort(A) 对一维或二维数组进行升序排序,并返回排序后的数组,当A为二维时,对数组每一列进行排序.eg: A[1,5,3],则sort(A)[1,3,5]A[1,3;2,4,1],1;2,3](2)Bsort(A,dim),对数组按指定方向进行升序排序,dim 1,表示对每一列进行排序,dim2表示对每一行进行排序.(3)Bsort(A…

【HDU1325】Is It A Tree?(并查集基础题)

有以下坑点&#xff1a; 1.结束输入不一定-1&#xff0c;题目中的叙述只是说所有权值都为正值。 2.是否构成一棵树不能只判断是否只有一个根节点&#xff0c;没有环路&#xff0c;而且还需要判断每个节点的入度一定是1&#xff0c;不然就不是一棵树。 &#xff08;无环路也可用…

mysql 逗号金额比较,如何使用MySQL比较两个逗号分隔的字符串列表

我使用了一个名为“ containsAll()”的Java方法来检查ArrayLists是否具有共同的内容.假设我在MySQL表中有一个列表A(一行)和其他几个列表(在“名称”列中,逐行).所有列表均由逗号分隔的字符串(列表中至少一个字符串)组成-名称或其他名称.现在,我想检查列表A中的所有字符串是否都…

MFC序列化(serial)简单例子

我们保存一些文本内容可以很简单的保存成一个文件就行了.但如果要把一些类对象信息保存起来,然后读取时用那些信息初始化一个类对象就比较复杂了.MFC提供了一个叫序列化的功能.可以把一个对象信息转化成二进制文件(或者xml文件)保存起来.下面举一个简单的例子,假如有类CArwen,实…

jQuery浏览器类型判断和分辨率判断

< DOCTYPE html PUBLIC -WCDTD XHTML TransitionalEN httpwwwworgTRxhtmlDTDxhtml-transitionaldtd>http://article.woshao.com/e6662006308d11e196d7000c2959fd2a&#xff0c;直接贴代码&#xff1a;<SCRIPT type"text/javascript">var bHeight$(window…

信息论与编码matlab实验报告,信息论与编码实验程序与结果图(matlab).doc

信息论与编码实验程序与结果图(matlab).doc 1信源熵实验程序&#xff1a;clc;closeall;clear;linwidd1fontt20p00;pd1;N20plinspace(p0,pd,N);I-log2(p);plot(p,I, k );title( I-log2(p)函数图 );xlabel( p );ylabel( I );clc;closeall;clear;linwidd1fontt20p00;pd1;N20plinsp…

OpenGL: 实现立体显示

立体显示原理&#xff1a;设没有立体显示的模型视图矩阵ModelView为Mv,投影矩阵为Mp&#xff0c;则、物体空间的任何一点为P&#xff0c;则变换到屏幕坐标P*MpMvP&#xff1b;注意前面已经说过opengl里面坐标列优先&#xff0c;所以矩阵都是右乘。 左眼和右眼的变换都是由中间的…

数学 之 hdu 4861

// [7/23/2014 Sjm] /* 对于此题&#xff0c;举出数据找规律&#xff0c;即可AC。。。 不过悲催的WA了好多次&#xff0c;后来发现竟把"YES"打印成"Yes"了。。。。 注释掉的代码是用来找规律的。。。 */ 1 #include <iostream>2 #include <cs…