Maison interface Web js tutoriel JavaScript是否可实现多线程 深入理解JavaScript定时机制_javascript技巧

JavaScript是否可实现多线程 深入理解JavaScript定时机制_javascript技巧

May 16, 2016 pm 06:38 PM
javascript 多线程

容易欺骗别人感情的JavaScript定时器

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如
复制代码 代码如下:

setTimeout( function(){ alert('你好!'); } , 0);
setInterval( callbackFunction , 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:
复制代码 代码如下:

div.onclick = function(){
setTimeout( function(){document.getElementById('inputField').focus();}, 0);
};

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:
复制代码 代码如下:

setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert('你好!'); } , 200);
setInterval( callbackFunction , 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会因为痛苦而停止,下面让我们来展开JavaScript线程和定时器探索之旅!

拔开云雾见月明

出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.

而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.
JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化.

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

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

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

上图t1-t2..tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务,假设现在是t1时刻,引擎运行在t1对应的任务方块代码内,在这个时间点内,我们来描述一下浏览器内核其它线程的状态.

t1时刻:

GUI渲染线程:

该线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行.本文虽然重点解释JavaScript定时机制,但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的,这容易理解,因为 JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.

在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.
所以,在脚本中执行对界面进行更新操作,如添加结点,删除结点或改变结点的外观等更新并不会立即体现出来,这些操作将保存在一个队列中,待 JavaScript引擎空闲时才有机会渲染出来.或许这里你有个疑问了,为什么JS代码块的alert时界面有更新的,JS不是正在运行吗?其实当 alert发生时,浏览器内核就会挂起JavaScript引擎线程,并促使界面执行了更新.

GUI事件触发线程:

JavaScript脚本的执行不影响html元素事件的触发,在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标点击事件正在等待处理.

定时触发线程:

注意这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件也是异步事件.

由图可知,在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中, 该事件被排到点击事件回调之后,等待处理.
同理, 还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理.

可见,假如时间段t1非常长,远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件并放到任务队列尾而不管它们是否已被处理,但一旦t1和最先的定时事件前面的任务已处理完,这些排列中的定时事件就依次不间断的被执行,这是因为,对于JavaScript引擎来说,在处理队列中的各任务处理方式都是一样的,只是处理的次序不同而已.

t1过后,也就是说当前处理的任务已返回,JavaScript引擎会检查任务队列,发现当前队列非空,就取出t2下面对应的任务执行,其它时间依此类推,由此看来:

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.
可以试试运行以下例子作测试,第一个定时器是一个死循环,第二个定时器是向界面输出一串字符串,第一个定时器比第二个定时器要来得早.
复制代码 代码如下:

setTimeout(function(){
for(;;);
}, 50);
setTimeout(function(){alert('Hello');}, 51);

运行后可看出,在没浏览器没提示脚本繁忙前第二个定时器alert是不会弹出的,因为单线程关系,第一个定时器回调脚本未返回前第二个脚本是没机会运行.

相信您现在已经很清楚JavaScript是否可多线程,也了解理解JavaScript定时器运行机制了,下面我们来对一些案例进行分析:

案例1:setTimeout与setInterval
复制代码 代码如下:

setTimeout(function(){
/* 代码块... */
setTimeout(arguments.callee, 10);
}, 10);

setInterval(function(){
/*代码块... */
}, 10);

这两段代码看一起效果一样,其实非也,第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout 定时, 假定上一个回调处理完到下一个回调开始处理为一个时间间隔,理论两个setTimeout回调执行时间间隔>=10ms .第二段自setInterval设置定时后,定时触发线程就会源源不断的每隔十秒产生异步定时事件并放到任务队列尾,理论上两个setInterval 回调执行时间间隔
案例2:ajax异步请求是否真的异步?

很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Exceptions de fonctions C++ et multithreading : gestion des erreurs dans les environnements concurrents Exceptions de fonctions C++ et multithreading : gestion des erreurs dans les environnements concurrents May 04, 2024 pm 04:42 PM

La gestion des exceptions de fonction en C++ est particulièrement importante pour les environnements multithread afin de garantir la sécurité des threads et l’intégrité des données. L'instruction try-catch vous permet d'intercepter et de gérer des types spécifiques d'exceptions lorsqu'elles se produisent afin d'éviter les plantages du programme ou la corruption des données.

Utilisation du framework de tests unitaires JUnit dans un environnement multithread Utilisation du framework de tests unitaires JUnit dans un environnement multithread Apr 18, 2024 pm 03:12 PM

Il existe deux approches courantes lors de l'utilisation de JUnit dans un environnement multithread : les tests monothread et les tests multithread. Les tests monothread s'exécutent sur le thread principal pour éviter les problèmes de concurrence, tandis que les tests multithread s'exécutent sur les threads de travail et nécessitent une approche de test synchronisée pour garantir que les ressources partagées ne sont pas perturbées. Les cas d'utilisation courants incluent le test de méthodes multi-thread-safe, telles que l'utilisation de ConcurrentHashMap pour stocker des paires clé-valeur, et des threads simultanés pour opérer sur les paires clé-valeur et vérifier leur exactitude, reflétant l'application de JUnit dans un environnement multi-thread. .

Comment la concurrence et le multithreading des fonctions Java peuvent-ils améliorer les performances ? Comment la concurrence et le multithreading des fonctions Java peuvent-ils améliorer les performances ? Apr 26, 2024 pm 04:15 PM

Les techniques de concurrence et de multithreading utilisant les fonctions Java peuvent améliorer les performances des applications, notamment en suivant les étapes suivantes : Comprendre les concepts de concurrence et de multithreading. Tirez parti des bibliothèques de concurrence et multithread de Java telles que ExecutorService et Callable. Pratiquez des cas tels que la multiplication matricielle multithread pour réduire considérablement le temps d'exécution. Profitez des avantages d’une vitesse de réponse accrue des applications et d’une efficacité de traitement optimisée grâce à la concurrence et au multithreading.

Comment se comportent les fonctions PHP dans un environnement multithread ? Comment se comportent les fonctions PHP dans un environnement multithread ? Apr 16, 2024 am 10:48 AM

Dans un environnement multi-thread, le comportement des fonctions PHP dépend de leur type : Fonctions normales : thread-safe, peuvent être exécutées simultanément. Fonctions qui modifient les variables globales : dangereuses, doivent utiliser un mécanisme de synchronisation. Fonction d'opération de fichier : dangereuse, nécessité d'utiliser un mécanisme de synchronisation pour coordonner l'accès. Fonction d'exploitation de la base de données : dangereux, le mécanisme du système de base de données doit être utilisé pour éviter les conflits.

Comment implémenter le multi-threading en PHP ? Comment implémenter le multi-threading en PHP ? May 06, 2024 pm 09:54 PM

Le multithreading PHP fait référence à l'exécution simultanée de plusieurs tâches dans un seul processus, ce qui est réalisé en créant des threads exécutés indépendamment. Vous pouvez utiliser l'extension Pthreads en PHP pour simuler le comportement multi-threading. Après l'installation, vous pouvez utiliser la classe Thread pour créer et démarrer des threads. Par exemple, lors du traitement d'une grande quantité de données, les données peuvent être divisées en plusieurs blocs et un nombre correspondant de threads peut être créé pour un traitement simultané afin d'améliorer l'efficacité.

Comment gérer les ressources partagées en multi-threading en C++ ? Comment gérer les ressources partagées en multi-threading en C++ ? Jun 03, 2024 am 10:28 AM

Les mutex sont utilisés en C++ pour gérer des ressources partagées multithread : créez des mutex via std::mutex. Utilisez mtx.lock() pour obtenir un mutex et fournir un accès exclusif aux ressources partagées. Utilisez mtx.unlock() pour libérer le mutex.

Défis et contre-mesures de la gestion de la mémoire C++ dans un environnement multithread ? Défis et contre-mesures de la gestion de la mémoire C++ dans un environnement multithread ? Jun 05, 2024 pm 01:08 PM

Dans un environnement multithread, la gestion de la mémoire C++ est confrontée aux défis suivants : courses de données, blocages et fuites de mémoire. Les contre-mesures incluent : 1. L'utilisation de mécanismes de synchronisation, tels que les mutex et les variables atomiques ; 2. L'utilisation de structures de données sans verrouillage ; 3. L'utilisation de pointeurs intelligents ; 4. (Facultatif) La mise en œuvre du garbage collection ;

Défis et stratégies pour tester les programmes multithread en C++ Défis et stratégies pour tester les programmes multithread en C++ May 31, 2024 pm 06:34 PM

Les tests de programmes multithread sont confrontés à des défis tels que la non-répétabilité, les erreurs de concurrence, les blocages et le manque de visibilité. Les stratégies incluent : Tests unitaires : écrivez des tests unitaires pour chaque thread afin de vérifier le comportement du thread. Simulation multithread : utilisez un framework de simulation pour tester votre programme en contrôlant la planification des threads. Détection de courses aux données : utilisez des outils pour trouver des courses aux données potentielles, tels que valgrind. Débogage : utilisez un débogueur (tel que gdb) pour examiner l'état du programme d'exécution et trouver la source de la course aux données.

See all articles