详细分析单线程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 28 Javascript
实现图片预加载的三大方法及优缺点分析
Nov 19 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
javascript实现简单的进度条
Jul 02 Javascript
深入学习AngularJS中数据的双向绑定机制
Mar 04 Javascript
JavaScript数组方法总结分析
May 06 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
咖啡的传说和历史
2021/03/03 新手入门
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
javascript中substr,substring,slice.splice的区别说明
2010/11/25 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
跟老齐学Python之Python文档
2014/10/10 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python的pip安装以及使用教程
2018/09/18 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
应用英语专业自荐信
2014/01/26 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
小马王观后感
2015/06/11 职场文书
行政复议答复书
2015/07/01 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android