浏览器工作原理(三):js运行机制及Event Loop
参考: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的更多相关文章
- Js 运行机制和Event Loop
一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. Java ...
- JS运行机制之 Event Loop 的思考
先举个栗子,如下: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log('i: ',i); //一秒之后输出几乎没 ...
- JavaScript 运行机制以及Event Loop(事件循环)
一.JavaScript单线程 众所周知JavaScript是一门单线程语言,也就是说,在同一时间内JS只能做一件事.为什么JavaScript不能有多个线程呢?这样不是能够提高效率吗? JavaSc ...
- 如何通过setTimeout理解JS运行机制详解
setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...
- js运行机制(线程)
浏览器线程 js运作在浏览器中,是单线程的,即js代码始终在一个线程上执行,这个线程称为js引擎线程. 浏览器是多线程的,除了js引擎线程,它还有: UI渲染线程 浏览器事件触发线程 http请求线 ...
- js 运行机制
<script> console.log(1) setTimeout(function(){ console.log(3) },0) console.log(2) </script& ...
- Js 运行机制 (重点!!)
一.引子 本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: 这一题看似很简单,但如果你不了解JavaScript运行机制,很容易就答错了.题目的答案是依次输出1 2 3 ...
- js 运行机制简单了解
一.如何理解 JS 的单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScrip ...
- js运行机制详解:event loop
总结 阮一峰老师的博客 一.为什么JavaScript是单线程 JavaScript语言的一大特点就是单线程 那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript ...
随机推荐
- jQuery选项卡wdScrollTab
实例Demo 运行一下 参数说明 Config active Number Active tab index. Base on 0. autoResizable Boolean Whether ...
- 《Tomcat内核设计剖析》勘误表
<Tomcat内核设计剖析>勘误表 书中第95页图request部分印成了reqiest. 书中第311页两个tomcat3,其中一个应为tomcat4. 书中第5页URL应为URI. 书 ...
- 初用vue遇到的一些问题
1.过滤器: filters: { search(list) { es5 var _self = this; //return list.filter(menu => menu.childs.n ...
- TreeSet中自定义Comparator实现降序
@Test public void test1() { TreeSet ts = new TreeSet<Integer>(new MyComparator()); ts.add(3); ...
- matlab下利用K-Means进行图像分类
FIRST & BEST SOLUTION clear all; clc; I_rgb=imread('dog.jpg'); figure();imshow(I_rgb);title('原始图 ...
- web.xml配置详解(2)
1 定义头和根元素 部署描述符文件就像所有XML文件一样,必须以一个XML头开始.这个头声明可以使用的XML版本并给出文件的字符编码.DOCYTPE声明必须立即出现在此头之后.这个声明告诉服务器适用的 ...
- CDQ分治--用时间降维的美丽算法
CDQ分治–用时间降维的美丽算法 CDQ分治,网上的阐述很多,太专业性的文字我就不赘述,这里指谈谈自己的感受 还是%一下CDQ大神的论文 CDQ分治的主要想法就是降维(比如三维问题降维到二维问题),并 ...
- JAVA验证身份证号码是否合法
package com.chauvet.utils; import java.text.ParseException; import java.text.SimpleDateFormat; impor ...
- 2017-2018-2 20165222实验四《Android程序设计》实验报告
Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd)>第二十四章: - 参考http: ...
- 《DSP using MATLAB》示例 Example 6.14、6.15