参考:https://segmentfault.com/a/1190000012925872#articleHeader4

一、为什么有Event Loop

Javascript设计之初就是一门单线程语言,Event Loop就是为了解决主线程不阻塞的问题。

二、Event Loop流程

1、js中有同步任务、异步任务两种

2、同步任务在JS引擎线程执行,形成执行栈

3、异步任务在已有异步操作结果符合触发条件时,进入任务队列(由事件触发线程管理)等待执行

4、执行栈中的任务运行完成后(JS引擎空闲),从任务队列中读取任务,加入到执行栈,并执行

三、图解流程、数据结构、与浏览器各线程之间关系

四、定时器

1、定时器是独立线程控制:

定时触发是由定时器线程控制的,这是因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确,因此很有必要单独开一个线程用来计时。

2、定时器实现流程

定时器实现在预先设定的时间后,将事件推入任务队列,等待执行栈执行。由于定时事件在推入任务队列中时,JS引擎线程正在执行其他任务,这时要定时事件要等待JS引擎线程空闲才能执行,就可能出现定时事件不能准时执行

3、对于0毫秒的定时:

W3C在HTML标准中规定,规定要求setTimeout中低于4ms的时间间隔算为4ms,但不排除不同浏览器最小事件设置不同。

即便时间间隔为0也需要进入任务队列等待JS引擎线程空闲的过程,执行栈中的任务还是早于定时任务执行

浏览器工作原理(三):js运行机制及Event Loop的更多相关文章

  1. Js 运行机制和Event Loop

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...

  2. JS运行机制之 Event Loop 的思考

    先举个栗子,如下: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log('i: ',i); //一秒之后输出几乎没 ...

  3. JavaScript 运行机制以及Event Loop(事件循环)

    一.JavaScript单线程 众所周知JavaScript是一门单线程语言,也就是说,在同一时间内JS只能做一件事.为什么JavaScript不能有多个线程呢?这样不是能够提高效率吗? JavaSc ...

  4. 如何通过setTimeout理解JS运行机制详解

    setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...

  5. js运行机制(线程)

    浏览器线程 js运作在浏览器中,是单线程的,即js代码始终在一个线程上执行,这个线程称为js引擎线程. 浏览器是多线程的,除了js引擎线程,它还有:  UI渲染线程 浏览器事件触发线程 http请求线 ...

  6. js 运行机制

    <script> console.log(1) setTimeout(function(){ console.log(3) },0) console.log(2) </script& ...

  7. Js 运行机制 (重点!!)

    一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: 这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了.题目的答案是依次输出1 2 3 ...

  8. js 运行机制简单了解

    一.如何理解 JS 的单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScrip ...

  9. js运行机制详解:event loop

    总结 阮一峰老师的博客 一.为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程 那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript ...

随机推荐

  1. React 与 可视化

    一般会想到 canvas 和 svg ; svg更适合画图, 但由于cavans在移动端的良好兼容性, 使用的更广; 什么是svg, scalable vector graphics  全称 可缩放矢 ...

  2. NorFlash、NandFlash、eMMC比较区别

    快闪存储器(英语:Flash Memory),是一种电子式可清除程序化只读存储器的形式,允许在操作中被多次擦或写的存储器.这种科技主要用于一般性数据存储,以及在电脑与其他数字产品间交换传输数据,如储存 ...

  3. d3.js(v5.7)的比例尺以及坐标轴

    直接上代码了,这里的一些函数用的是之前我自己封装的函数(包括attr的obj支持和节点数量和数据数量的自动匹配),若有不明白的,可以查看之前的博客: 页面的效果如下: 接下来继续添加坐标轴: 最终:

  4. Swift中的本地化实现

    1. 确保localization中添加了多语言2. 添加localisable.strings文件 3.选择这个文件,勾选多语言即可4.打开localisable.strings文件,添加一些测试字 ...

  5. postfix邮件服务器搭建04-终结篇

    本来是计划对postfix做一个全系列的安装文档的,不过在查某个知识点的时候,偶然找到一个已经写好的postfix全系列文章,在全部看完之后惊为天人,我认为:总体上会比我要写的要好,所以我准备借用一下 ...

  6. Android Studio真机测试失败-----''No target device found" (转)

    参考文章: https://blog.csdn.net/chang_sir/article/details/51755572 今天想用真机测试一个程序,却报出这样一个Error"No tar ...

  7. fedora 修改home下的中文目录为英文目录

    <h4>修改home下的中文目录为英文目录</h4>习 惯问题,喜欢使用fedora为您在home目录下自创建的“桌面”.“文档”,“图片 .公共的” .“下载”. “音乐”. ...

  8. Yahoo关于性能优化的N条规则

    本来这是个老生常谈的问题,上周自成又分享了一些性能优化的建议,我这里再做一个全面的Tips整理,谨作为查阅型的文档,不妥之处,还请指正: 一. Yahoo的规则条例: 谨记:80%-90%的终端响应时 ...

  9. 转:Excel导入SQL数据库完整代码

    Excel导入SQL数据库完整代码 protected void studentload_Click(object sender, EventArgs e) {//批量添加学生信息 SqlConnec ...

  10. ecmall 2.3.0 最新补丁20140618

    特别提示:补丁下载地址为:http://download.ecshop.com开头,该地址为ecmall下载站,如果非以http://download.ecshop.com开头,请勿下载,同时请反馈给 ...