详细分析单线程JS执行问题


Posted in Javascript onNovember 22, 2017

大家在学习javascript的时候很多朋友在执行问题上有疑惑,小编通过本篇文章给大家详细的分析介绍了JS的执行问题,希望能够帮助到你理解。

一、介绍

随着js不断学习,你可能会慢慢的好奇,用了这么久的js,却不知道这js在浏览器怎么被执行的,很尴尬。所以,我查阅很多资料来总结JS的执行过程,也分享出来,和大家一起学习。

本篇主要讲单线程的JS
涉及的名词:JS引擎,单线程,执行栈,执行上下文(execution context)

二、JS引擎

JS引擎是浏览器的重要组成部分,主要用于读取并执行js。就是这家伙执行js的,但它不止于执行js。

各大浏览器的JS引擎:

浏览器

Js引擎

Chrome V8 Firefox SpiderMonkey IE Chakra(查克拉) Safari Nitro/JavaScript Core Opera Carakan

虽然每个浏览器的JS引擎都不同,但他们执行js机制大致相同。

三、JS执行是单线程

单线程是指Js引擎执行Js时只分了一个线程给他执行,也就是执行js时是单线程的。

a.先了解线程 有人可能会疑惑,线程是什么?

直接举个例子吧,你打开一个浏览器(应用程序),那浏览器就是一个进程。打开浏览器后要做很多事情(各种分工):发送请求,接受请求,渲染页面,执行js等等这些就是一个个线程。

我这里只是简单的说一下,具体的大家可以找计算机操作系统资料深入学习。

b.为什么是单线程 有可能有疑惑,为什么js执行要单线程,如果多线程不是可以执行得快一点吗?

这个要回到Js历史了,布兰登·艾奇(Brendan Eich)老哥用10天创造js。当时js用来干嘛,简单的浏览器交互,验证,操作一下dom是吧。那把它设计成那么复杂干什么,而且如果多线程的话,操作dom会出现麻烦的事情,假设一个线程读取DOM节点数据的同时,另一个线程把那个DOM节点删了,呵呵。所以js一个线程就够了,也就是一步一步顺序运行下来。

c.证明一下单线程

单线程只能一步步执行下来,所以执行以下代码会导致阻塞(有个while死循环),不会弹出hello

while(1){}
alert('hello');

四、执行栈

实现js执行时的单线程,js引擎维护一个执行栈。(先进后出)

来个例子:运行这段代码是执行栈是怎么做的。

//运行代码
sayHello();
function sayHello(){
var message = getMessage();
console.log(message);
}
function getMessage(){
return 'hello';
}

执行栈代码模拟

//执行栈
var exeStack = [];
//先压如全局执行环境
exeStack.push('globalContext');
//遇到执行sayHello函数,ok,压进去
exeStack.push('sayHello');
//执行sayHello函数发现,还有个getMessage函数,ok,压进栈
exeStack.push('getMessage');
//执行完了getMessage函数,弹栈
exeStack.pop();
//继续执行sayHello函数,又发现有console.log这个家伙,ok,你进栈
exeStack.push('console.log');
//执行了console后,输出hello,console 弹栈
exeStack.pop();
//这时sayHello执行完,弹栈
exeStack.pop();
//最后整个代码执行完,全局环境弹栈
exeStack.pop();

执行栈图示:

详细分析单线程JS执行问题

这里主要是js在执行时的一个总体过程,但是你们可能会疑惑,压进栈里面的一块块(抽象)东西到底包含的是什么?
我可以告诉你们是,执行上下文,global是指全局的的执行上下文,其他的是函数执行上下文,那到底这些上下文包含什么,我会在下一篇详解。

五、小结

这篇主要是将js单线程是什么,并且怎么实现单线程的,先有个总体js执行过程的印象,下一篇会详细写js执行的细节,执行上下文。

Javascript 相关文章推荐
js 复制或插入Html的实现方法小结
May 19 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
Vue异步组件使用详解
Apr 08 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
uniapp实现可滑动选项卡
Oct 21 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 #Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 #Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 #Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 #Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 #Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
You might like
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
yiic命令时提示“php.exe”不是内部或外部命令的解决方法
2014/12/18 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
超实用的JavaScript代码段 附使用方法
2016/05/22 Javascript
详解JavaScript节流函数中的Throttle
2016/07/16 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Flask之flask-script模块使用
2018/07/26 Python
Python如何读取文件中图片格式
2020/01/13 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
golang/python实现归并排序实例代码
2020/08/30 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
简历中个人自我评价范文
2013/12/26 职场文书
计算机相关的自我评价
2014/01/15 职场文书
学校运动会霸气口号
2014/06/07 职场文书
春秋淹城导游词
2015/02/11 职场文书
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers