详细分析单线程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 随机数产生6位数字
May 13 Javascript
jsp+javascript打造级连菜单的实例代码
Jun 14 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
jQuery插件zTree实现删除树节点的方法示例
Mar 08 Javascript
javascript数组去重常用方法实例分析
Apr 11 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 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
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
总结Javascript中的隐式类型转换
2016/08/24 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
Vue3.0结合bootstrap创建多页面应用
2019/05/28 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
JS严格模式原理与用法实例分析
2020/04/27 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
jQuery实现简单评论区功能
2020/10/26 jQuery
python读取csv文件示例(python操作csv)
2014/03/11 Python
对numpy中shape的深入理解
2018/06/15 Python
Selenium定位元素操作示例
2018/08/10 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python数据化运营的重要意义
2019/11/25 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
简历的自荐信
2013/12/19 职场文书
《李广射虎》教学反思
2014/04/27 职场文书