从Event Loop谈JS的运行机制
这里主要是结合Event Loop来谈JS代码是如何运行的。 事件循环对于我们平时开发可以说是特别重要,可以让我们写出更好的代码。
到这里相信我们已经知道了JS引擎是单线程,而且这里会用到前面说的的几个概念:(如果不是很理解,可以看看前几节)
JS引擎线程 【执行js代码】
事件触发线程【轮训】
定时触发器线程【倒计时结束了,要执行回调方法了】
然后再理解一个概念:
JS分为同步任务和异步任务
同步任务都在主线程上执行,形成一个
执行栈 【执行栈后面咱们会详细的介绍,栈的特点是后进先出】主线程之外,事件触发线程管理着一个
任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件【回调方法】。一旦
执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。
看到这里,应该就可以理解了:为什么有时候setTimeout推入的事件不能准时执行?因为可能在它推入到事件列表时,主线程还不空闲,正在执行其它代码,
所以自然有误差。
再重复一下:
主线程运行时会产生执行栈,
栈中的代码调用某些api时,它们会在事件队列中添加各种事件(当满足触发条件后,如ajax请求完毕)
而栈中的代码执行完毕,就会读取事件队列中的事件,去执行那些回调方法。
如此循环
注意,总是要等待栈中的代码执行完毕后才会去读取事件队列中的事件
从Event Loop谈JS的运行机制的更多相关文章
- Node.js event loop 和 JS 浏览器环境下的事件循环的区别
Node.js event loop 和 JS 浏览器环境下的事件循环的区别: 1.线程与进程: JS 是单线程执行的,指的是一个进程里只有一个主线程,那到底什么是线程?什么是进程? 进程是 CPU ...
- 关于js内部运行机制的一本好书
读<单页Web应用一书>,第二章讲了js内部运行机制,感觉棒极了.之前读<你不知道的js>,看的云里雾里,似懂非懂.没想到单页Web一书将此内容讲的如此通俗易懂,好多困惑已久的 ...
- JS的运行机制
代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...
- 试着讲清楚:js代码运行机制
一. js运行机制 js执行引擎 经常看文章的说到js是带线程的,其实这个说法非常的模糊,准确的是js执行引擎是单线程的,js执行引擎就是js代码的执行器,有了这个概念就可以下来说说js是如何运行的了 ...
- 《JavaScript总结》js的运行机制
首先大家都知道javascript是单线程语言. 什么是单线程呢?比如我们去车站买票,只有一个售票窗口,大家排队买票,需要前面的人买完票,后面的人才能买票. 那为什么javascript不能是多线程呢 ...
- 详解JavaScript中的Event Loop(事件循环)机制
前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...
- 浅谈javascript的运行机制
积累一下这几天学的,记录一下: 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程 ...
- js setTimeout运行机制
在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...
- 前端读者 | 由setTimeout引发的JS引擎运行机制的研究
本文来自 @xiaoyuze88 链接:http://xiaoyuze88.github.io/ 太久没碰代码了,那天想到关于循环调用setTimeout实现每隔一秒输出递增的数的那个问题,搞了搞,发 ...
随机推荐
- Rsa2验签报错【java.security.SignatureException: Signature length not correct】的解决办法
在进行RSA2进行验签的时候,报了以下错误: java.security.SignatureException: Signature length not correct: got 344 but w ...
- python any和all
摘自<流畅的Python> all 和 any 也是内置的归约函数. all(iterable) 如果 iterable 的每个元素都是真值,返回 True:all([]) 返回 True ...
- Pitfalls of using opencv GpuMat data in CUDA kernel code
Please note that cv::cuda::GpuMat and cv::Mat using different memory allocation method. cv::cuda::Gp ...
- AngularJs学习笔记--unit-testing
原版地址:http://docs.angularjs.org/guide/dev_guide.unit-testing javascript是一门动态类型语言,这给她带来了很强的表现能力,但同时也使编 ...
- Git学习系列之Git 的优势有哪些?
Git 的优势主要有: 1.更方便的 Merge 分布式管理必然导致大量的 Branch 和 Merge 操作.因此分布式版本控制系统都特别注意这方面.在传统的 CVS 里面制作 Branch 和 M ...
- FFmpeg的H.264解码器源代码简单分析
本文简单记录FFmpeg中libavcodec的H.264解码器(H.264 Decoder)的源代码.这个H.264解码器十分重要,可以说FFmpeg项目今天可以几乎“垄断”视音频编解码技术,很大一 ...
- html中使用滚动条
1. 在html页面中使用滚动条,效果如下: 代码如下: <div style="height:auto !important;max-height:200px;overflow:sc ...
- 【转】“无法从http://XXX/XXX.svc?wsdl获取元数据”错误的解决方法
昨天在用IIS部署一个WCF服务时,碰到了如下错误: 理解了文档内容,但无法进行处理. - WSDL 文档包含无法解析的链接. - 下载“http://admin-pc/IISHostServic ...
- WAMP环境配置-Apache服务器的安装
一.下载 下载地址:http://httpd.apache.org/ 在这里就可以下载想下载的版本了 二.安装 我这次环境配置安装的是Apache-2.4.23版本! (最近我在反复安装PHP的时候出 ...
- [转]Using MVC 6 And AngularJS 2 With .NET Core
本文转自:http://www.c-sharpcorner.com/article/using-mvc-6-and-angularjs-2-with-net-core/ CoreMVCAngular2 ...