JavaScript的运行机制

@JavaScript现在是单线程,以后也是

为什么要单线程,这是js用途决定的,js主要是面向用户提供各种交互,假如两个线程,一个线程操作这个Dom,另一个线程删除这个Dom,以哪个线程为主,还是要同步。

@同步, 异步任务

在Js中所有的任务都可以分为同步任务和异步任务。其中同步任务在主线程中执行,形成一个执行栈;异步任务不进入主线程,而是进入异步队列,只有这个异步队列通知主线程,执行队列中的任务才能进入主线程执行。其中要说明的是:进入异步队列的任务,如果具备执行时机,就会在异步队列里添加一个消息事件,主线程每次执行完后,都在不断的循环查看异步队列是否有对应的消息事件,如果有,将异步队列中的任务放到主队列执行,没有,则继续循环查看。该主线程循环的过程也叫事件循环(Event Loop),其实可以看出,这依然是同步的。

Macrotask (宏任务),Microtask(微任务):Micro Task Queue,Tick Task Queue

异步任务可以分为宏任务和微任务,宏任务包括:setImmediate, setTimeout, setInterval;微任务包括:process.nextTick,Promise,Object.observe,MutaionObserver,其中Tick Task Queue专门存放微任务。
执行顺序:先执行微任务(Tick Task Queue优先),然后执行宏任务,然后清空当前所有微任务。
对于执行顺序,还有一点可以提下,多个process.nextTick语句总是在当前"执行栈"一次执行完,多个setImmediate可能则需要多次loop才能执行完。这正是Node.js 10.0版添加setImmediate方法的原因。

@定时器,屏幕刷新频率

我们知道,setTimeout,setInterval都是异步任务。他们都要等到主线程的任务完成才调用执行,因此,执行的时间都会比其设定的时间晚一些,也就是说它的执行时间并不确定。
另外,介绍下屏幕刷新频率,即屏幕刷新的次数。一般来说是60hz,1000/60=16.67。
假设setTimeout 10ms执行一次。
0ms 屏幕未刷新 setTimeout未执行
10ms setTimeout回调执行,div.left = 1px;(伪代码,左移一像素)
16.7ms 屏幕刷新 div.left = 1px;
20ms setTimeout回调执行,div.left = 2px;
30ms setTimeout回调执行,div.left = 2px;
33.4ms 屏幕刷新 div.left = 3px;
div.left=2px是不是丢失了。这叫丢帧,因此建议使用:requestAnimationFrame

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 执行环境(Execution Context) JS代码可以归为下面三种情况之一: 全局代码:首先执行这里的代码 ...
    weiheli阅读 312评论 0 0
  • 之前对JS运行机制不太明白,直到读了阮一峰文章后,突然脑洞大开.当然中间也遇到了一点理解上的问题,我只做了一点稍微...
    码太农阅读 671评论 0 1
  • 一、JavaScript单线程模型 JavaScript是单线程的,JavaScript只在一个线程上运行,但是浏...
    Brolly阅读 1,237评论 4 6
  • 原文在这里JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaSc...
    楠小忎阅读 365评论 0 0
  • 远方的欧式建筑,承载一份寂静。 仲夏的玉兰,星星点点。 小小盆栽,左摇右摆。 养在瓶子里的小小生命。 抬头一看,结...
    传奇小黑猫阅读 286评论 6 4

友情链接更多精彩内容