这里主要是结合Event Loop来谈JS代码是如何运行的。 事件循环对于我们平时开发可以说是特别重要,可以让我们写出更好的代码。

到这里相信我们已经知道了JS引擎是单线程,而且这里会用到前面说的的几个概念:(如果不是很理解,可以看看前几节)

  • JS引擎线程 【执行js代码】

  • 事件触发线程【轮训】

  • 定时触发器线程【倒计时结束了,要执行回调方法了】

然后再理解一个概念:

  • JS分为同步任务和异步任务

  • 同步任务都在主线程上执行,形成一个执行栈 【执行栈后面咱们会详细的介绍,栈的特点是后进先出】

  • 主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件【回调方法】。

  • 一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

看到这里,应该就可以理解了:为什么有时候setTimeout推入的事件不能准时执行?因为可能在它推入到事件列表时,主线程还不空闲,正在执行其它代码,
所以自然有误差。

再重复一下:

  • 主线程运行时会产生执行栈,

栈中的代码调用某些api时,它们会在事件队列中添加各种事件(当满足触发条件后,如ajax请求完毕)

  • 而栈中的代码执行完毕,就会读取事件队列中的事件,去执行那些回调方法。

  • 如此循环

  • 注意,总是要等待栈中的代码执行完毕后才会去读取事件队列中的事件

从Event Loop谈JS的运行机制的更多相关文章

  1. Node.js event loop 和 JS 浏览器环境下的事件循环的区别

    Node.js  event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...

  2. 关于js内部运行机制的一本好书

    读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...

  3. JS的运行机制

    代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...

  4. 试着讲清楚:js代码运行机制

    一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...

  5. 《JavaScript总结》js的运行机制

    首先大家都知道javascript是单线程语言. 什么是单线程呢?比如我们去车站买票,只有一个售票窗口,大家排队买票,需要前面的人买完票,后面的人才能买票. 那为什么javascript不能是多线程呢 ...

  6. 详解JavaScript中的Event Loop(事件循环)机制

    前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...

  7. 浅谈javascript的运行机制

    积累一下这几天学的,记录一下: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程 ...

  8. js setTimeout运行机制

    在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...

  9. 前端读者 | 由setTimeout引发的JS引擎运行机制的研究

    本文来自 @xiaoyuze88 链接:http://xiaoyuze88.github.io/ 太久没碰代码了,那天想到关于循环调用setTimeout实现每隔一秒输出递增的数的那个问题,搞了搞,发 ...

随机推荐

  1. Python学习--两种方法爬取网页图片(requests/urllib)

    实际上,简单的图片爬虫就三个步骤: 获取网页代码 使用正则表达式,寻找图片链接 下载图片链接资源到电脑 下面以博客园为例子,不同的网站可能需要更改正则表达式形式. requests版本: import ...

  2. HttpSessionListener

    1 知识点

  3. 读写锁--ReentrantReadWriteLock

    读写锁,对于读操作来说是共享锁,对于写操作来说是排他锁,两种操作都可重入的一种锁.底层也是用AQS来实现的,我们来看一下它的结构跟代码: ------------------------------- ...

  4. 权重平等分布局And TableRow布局误区

    开头语: 本人最近在自学Android,虽然本人有2年Java Web的开发经验.但是发现Android的自学之路并不是那么平坦,我没有Android真机.但是有一个window phone的手机.开 ...

  5. [Visual studio code 常见问题解决] ——中文乱码、

    中文乱码问题解决 描述:刚开始安装VScode要打开含中文的文件,都会出现乱码,这时只要点击右下方的“UTF-8”改成“GB2312”即可.但每次都改是很麻烦的,所以要使得VScode默认支持GB23 ...

  6. jquery.form.js ie 下下载文件已经ie8失效问题解决方案

    https://github.com/malsup/form/blob/master/jquery.form.js在使用这个插件时遇到的问题1.ie下会变成下载文件,解决方案是在后端返回时设置'Con ...

  7. Java中final修饰参数的作用

    在方法参数前面加final关键字就是为了防止数据在方法体中被修改. 主要分两种情况:第一,用final修饰基本数据类型:第二,用final修饰引用类型. 第一种情况,修饰基本类型(非引用类型).这时参 ...

  8. jsp继承rapid库

    如果jsp不使用继承方式开发,而是用标准的指令或动作元素去include,实在是太多重复代码. rapid-framework是谷歌的一个项目,可以实现jsp网页的继承,也就是书写模板页. 但是在ma ...

  9. 对象和类型(数组、ref、out)

    class Program { //数组是引用类型 //如果把数组或类等其他引用类型传递给方法,对应的方法就会使用该引用类型改编数组中值, //而新值会反射到原始数组上 static void Som ...

  10. 二:SpringMVC知识整理

    springmvc复习: 1.SpringMVC介绍 2.SpringMVC入门程序 1)创建web工程 2)导入jar包 3)在web.xml中配置前端控制器(指定上下文件的路径 classpath ...