详细分析单线程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 相关文章推荐
javascript下查找父节点的简单方法
Aug 13 Javascript
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
js实现的星星评分功能函数
Dec 09 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
JavaScript模拟实现自由落体效果
Aug 28 Javascript
Angular8 实现table表格表头固定效果
Jan 03 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 中htmlentities导致中文无法查询问题
2018/09/10 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
理解javascript回调函数
2014/12/28 Javascript
JS+CSS实现滑动切换tab菜单效果
2015/08/25 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
django 自定义用户user模型的三种方法
2014/11/18 Python
Python操作串口的方法
2015/06/17 Python
用Python解决计数原理问题的方法
2016/08/04 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
django批量导入xml数据
2016/10/16 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python urllib和urllib3知识点总结
2021/02/08 Python
巴西儿童时尚购物网站:Dinda
2019/08/14 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
网络编辑求职信
2014/04/30 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
复兴之路观后感
2015/06/02 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
DE1107机评
2022/04/05 无线电