我理解的javascript单线程机制
废话不多说,我们先来看几个例子:
1.
setTimeout(function(){console.log(1);}, 0); console.log(2);
function foo(){
console.log('first');
setTimeout((function(){console.log('second')}),0);
}
for(var i=0; i<10; i++){
foo();
}
result: 先全部输出first,然后全部输出second
4.
console.log(10); setTimeout(function(){console.log(20);},0); while(true){console.log(30);}
result: 执行的结果是10 30 , 然后浏览器假死,20永远不会被打印出来
console.log(10);
setTimeout(function(){while(true){console.log(30);}},0);
setTimeout(function(){console.log(20);},10);
console.log(40);
result: 执行的结果: 10,40,30, 然后浏览器假死,20永远不会被打印出来
看完上面的几个例子后,是不是觉得,我天,666. 长见识了!!!
其实,这里展现的就是javascript的单线程机制。JavaScript语言的一大特点就是单线程,换句话说就是,同一个时间只能做一件事。那么,JavaScript为啥不能有多个线程呢?这样能提高效率啊。JavaScript作为浏览器脚本语言,它的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,如果JavaScript同时有了两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,那么这时浏览器到底应该以哪个线程为准?所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。
javascript中的所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。
浏览器中很多行为是异步的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、XMLHttpRequest完成回调等。当一个异步事件发生的时候,它就进入事件队列。例如,浏览器当前正在忙于处理onclick事件,这时另外一个事件发生了(如:window onSize),这个异步事件就被放入"任务队列"等待处理,只有前面的处理完毕了,空闲了才会执行这个事件。setTimeout也是一样,当调用的时候,js引擎会启动定时器timer,大约xxms以后执行xxx,当定时器时间到,该任务才会进入主线程等待处理(浏览器不忙的时候才会真正执行)。
setTimeout(fn,0),它的的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。这里有一点值得注意的地方是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。
那么,setTimeout(fn,0)到底有什么用呢?
它的神奇之处是改变了代码流程,把fn的执行放到了等待当前的代码执行完毕再执行。所以我们常把它用来改变代码执行的顺序。
为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
下面看一个web worker多线程的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Fibonacci数列是比较经典的数学规律,它以递归的方法定义:</p>
<p>F0 = 0</p>
<p>F1 = 1</p>
<p>Fn = F(n-1) + F(n-2) (n>=2, n属于整数)</p> <script type="text/javascript">
window.onload = function(){
var worker = new Worker('fibonacci.js');
worker.postMessage(40);
var timer = (new Date()).valueOf();
console.log('开始计算:n=40','当前时间:'+timer);
worker.onmessage = function(e){
var timer2 = (new Date()).valueOf();
console.log('计算结果:'+ e.data+' 计算完成时间:'+timer2+"计算用时:"+(timer2 - timer));
}; setTimeout(function(){
console.log('由于js的单线程机制,本来由于浏览器假死,定时器函数在计算数列时不会执行,' +
'但这里用了workers多线程,前面计算fibonacci数列浏览器并没有假死,' +
'所以定时器函数在计算数列时执行了,但还是在主线程代码执行完成之后',
'当前执行时间:'+(new Date()).valueOf());
}); // js主线程
console.log("我在计算数列的时候执行了","当前时间:"+(new Date()).valueOf());
}; </script>
</body>
</html>
/**
* Created by jessietang on 12/8/2016.
*/
//此线程用来计算fibonacci数列
var fibonacci = function(n){
return n<2 ? n : arguments.callee(n-1) + arguments.callee(n-2);
};
onmessage = function(e){
var n = parseInt(e.data,10);
postMessage(fibonacci(n));
};
输出结果:
我理解的javascript单线程机制的更多相关文章
- 从setTimeout谈JavaScript运行机制
从setTimeout说起 众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...
- JavaScript运行机制与setTimeout
前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. ...
- 浏览器UI多线程及JavaScript单线程运行机制的理解
在上一篇博客中,我对jQuery的队列(queue)机制和动画(animate)机制做了一个深入的解析,在animate的实现机制其核心是依靠queue来完成的,其中在jQuery的链式调用部分,之前 ...
- 我想这次我真的理解了 JavaScript 的单线程机制
今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...
- 深入理解JavaScript运行机制
深入理解JavaScript运行机制 前言 本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...
- JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
- 深入理解JavaScript定时机制和定时器注意问题
容易欺骗别人感情的JavaScript定时器 JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不 ...
- 阅读《深入理解JavaScript定时机制》
鸟哥的这篇<深入理解JavaScript定时机制>从javascript线程角度分析了setTimeout和setInterval两个定时触发器的实现原理. 看完的体验就是主要要记住两点: ...
- Javascript引擎单线程机制及setTimeout执行原理说明
setTimeout用法在实际项目中还是会时常遇到.比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何 ...
随机推荐
- Linq101-Restriction
using System; using System.Linq; namespace Linq101 { class Restriction { /// <summary> /// Thi ...
- My.Ioc 代码示例——使用观察者机制捕获注册项状态的变化
在 My.Ioc 中,要想在服务注销/注册时获得通知,可以通过订阅 ObjectBuilderRegistered 和 ObjectBuilderUnregistering 这两个事件来实现.但是,使 ...
- 各浏览器对 onbeforeunload 事件的支持与触发条件实现有差异
转载:http://www.w3help.org/zh-cn/causes/BX2047 标准参考 无. 问题描述 一般情况下,onbeforeunload 事件处理函数内会写入一些提示性语句,当用户 ...
- 解决第三方DLL没有强签名
-----转载:http://blog.csdn.net/zyming0815/article/details/5939090 创建一个新的随机密钥对:sn -k myTest.snk 第一步: 将D ...
- Lock锁_线程_线程域
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- bash shell学习-shell script基础 (笔记)
A chain no stronger than its weakest link. "一着不慎,满盘皆输" 参考资料:鸟哥的Linux私房菜 基础学习篇(第三版) Linux ...
- Android学习----Activity
一.什么是activity Activity 是用户接口程序,原则上它会提供给用户一个交互式的接口功能.它是 android 应用程序的基本功能单元.Activity 本身是没有界面的.所以activ ...
- JavaScript-学习一加载不动
为先加载的js后加载的html 加载完js运行时因为未加载html的原因导致找不到js所控制的元素 所以解决的方法就是把js放到控制元素的下方 或者html的底部 做成函数的时候可以放在头部,也就是说 ...
- jQuery图片提示示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- python学习第一课要点记录
写在要点之前的一段话,留给将来的自己:第一次参加编程的培训班,很兴奋很激动,之前都是自己在网上找免费的视频来看,然后跟着写一些课程中的代码,都是照着模子写,没有自己过多的思考.感觉这样学不好,除了多写 ...