Js运行机制

单线程的原因

1 .js主要的用途是与用户互动,以及操作dom,这决定了只能是单线程,否则会带来非常复杂的同步问题,比如一个线程提添加dom,一个减少dom。应该以哪个为准
2 .web worker:允许js脚本创建多个子线程,但是子线程完全受主线程控制,且不得操作dom

任务队列

1 .单线程就意味着所有任务需要排队,前一个任务结束,才会执行后一个任务,但是前一个任务耗时很长,后一个任务就不得不等待
2 .同步任务:在主线程上的排队执行的代码,只有前一个任务执行完毕,才能执行后一个任务
3 .异步任务:不进入主线程,进入任务队列的任务,只有异步队列通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。 onload,onclik,onerror

js中的异步事件

1 .io设备的事件,比如ajax。io设备完成一项任务,就在任务队列中添加一个事件,表示相关的异步任务可以进入执行栈了,主线程读取“任务队列”。就是读取里面有哪些事件
2 .用户产生的事件,鼠标点击,页面滚动等dom操作
3 .只要制定过回调函数,这些事件就会进入“任务队列”,等待主线程读取
4 .所谓的回调函数,就会被主线程挂起来的代码。异步任务必须制定回掉函数,当主线程开始执行异步任务,就是执行对应的回调函数
5 .任务队列是一个先进先出的数据结构。排在前面的事件,有限被主线程读取,主线程的读取过程上基本是自动的,只要执行栈一空,任务队列上的第一位事件就会自动进入主线程。
6 .只有一种情况是那样:比如定时器功能,主线程首先要检查一下执行时间,某些时间只有到了规定的时间,才能返回主线程

异步任务的运行机制

1 .所有同步任务都在主线程执行,形成一个执行栈。还会产生堆,但是不知道堆里面是啥任务
2 .主线程之外,存在一个任务队列,只要异步任务有了运行结果。就在“任务队列”之间放置一个事件,通知主线程进行执行这个事件。这些都是栈中的代码操作的。调用各种外部api,再任务队列中加入各种事件
3 .一旦“执行栈”中的所有同步任务执行完毕,系统就会读取“任务队列”,看看里面有哪些事件。对应的异步事件,如果可以执行,结束等待状态,进入执行栈,开始执行
4 .主线程是不断重复上面的第三步的。只要主线程空了,就回去读取“任务队列”,这就是js的运行机制。

5 .同步任务的代码中是在异步任务(任务队列)之前执行。所以有时候顺序其实并不是很重要
6 .

定时器

1 .除了防止异步任务,“任务队列”还可以放置定时事件,即某些代码再多少时间之后执行
2 .他是在任务队列末尾插入一个事件,要等同步任务和“任务队列”现有的事件都处理完之后,才会得到执行

setTimeout(function(){console.log(1);}, 0);
console.log(2)
//2,1一定是这样的输出,就是只有再执行完第二行之后,系统才会去执行“任务队列”中的回调函数

// 0的含义是里面的任务可以再主线程最早的空闲的时间执行,尽可能早的执行

3 .h5规定了setTimeout的第二个参数的最小,不得低于4mm,如果低于这个值会自动添加
4 .setTimeout只是将事件插入了“任务队列”,必须等到当前代码《执行栈执行完毕,主线程才会取执行他制定的回掉函数。要是当前diamagnetic耗时很长,可能需要等好久,所以是没有方法保证,回调函数一定会在setTimeout制定的时间执行,一般是比这个时间长

nodeJs的Event Loop

1 .运行机制

1 .v8解析js脚本
2 .解析后的代码,调用 Node API
3 .libuv 库负责件该任务分配给不同的线程,形成一个Event Loop,以异步的方式将任务的执行结果返回v8引擎
4 .v8引擎将结果返回用户

2 .process.nextTick 方法可以再当前“执行栈”的尾部,下一次Event Loop(主线程)之前触发,也就是说。他是会一定再异步任务发生之前触发的,不论有几个这样的函数,也不论里面有多少嵌套
3 .setImmediate:多个process.nextTick语句总是在当前“执行栈”一次执行完,多个setImmediate可能需要多次loop才能执行完。防止递归process.nextTick函数无限循环下去,主线程根本无法读取事件队列
4 .process.nextTick制定的回调函数总是再本次事件循环触发,而setTmmediate制定的是在下次“事件循环”触发,所以很显然,前者总是比后者发生的早,而且执行效率更高

第二波

1 .同步,异步关注的是消息通知机制

1 .同步再发出调用之后,没有结果前是不会返回的,一旦调用返回,就得到返回值,调用者主动等待这个调用结果
2 .异步是发出调用后,调用者不会立刻得到结果,而是被调用者通过状态或者回调函数来处理这个调用

2 .同步任务:主线程上执行的任务,只有前一个任务执行完毕,下一个任务才能执行
3 .异步任务:是指不进入主线程,而是进入任务队列的任务,只有主线程任务执行完毕,任务队列的任务才会进入主线程执行。
4 .在js的运行过程中,真正负责执行js代码的始终只有一个线程,通常被称为是主线程,各种任务都是会用排队的方法同步执行。这种方式最常见的一个问题就是当你尝试执行一段非常耗时的同步代码,浏览器就没办法同时渲染GUI,导致界面失去响应,也就是被阻塞
5 .事件循环可以让js做到既是单线程,又不会阻塞的核心机制,也是js并发模型的基础,用来协调各种事件
6 .事件循环其实是一种实现异步的机制
7 .事件循环并不是js标准定义的,而是html标准定义的
8 .事件循环是宿主环境提供的,比如浏览器

微任务和宏任务

1 .都属于任务队列里面的分类
2 .微任务

1 .process.nextTick
2 .原生promise
3 .mutationObserver
4 .当前栈执行结束之后立即需要执行的任务。例如需要对一系列的任务做出回应,或者是需要异步执行的任务
5 .当前执行栈中的代码执行完毕之后,会在执行宏任务队列之前先看看微任务队列中有没有任务,如果有会先将微任务队列中的任务清空才会执行宏任务队列

3 .宏任务

1 .setTimeout
2 .setInterval
3 .等待执行栈和微任务队列都执行完毕才会执行,并且在执行完每一个宏任务之后,都会去看看微任务队列有没有新增加的任务。如果有,先将微任务队列中的任务清空,才会继续执行下一个宏任务
4 .

执行引擎

1 .Engine
2 .编译饼执行js代码,完成内存分配,垃圾回收等任务
3 .chrome和node 都是用了V8 引擎,v8实现并提供了ECMAScript标准中所有数据类型,操作符,对象和方法
4 .

执行环境

1 .Runtime
2 .为js提供一些对象或者机制,是他能够和外界交互
3 .比如dom机制
4 .chrome提供了window,dom

任务队列

1 .一个Event Loop会有一个或者多个task 队列。都是一些队列的数据结构,存放着不同任务源的任务

1 .dom操作
2 .用户交互 user intreaction
3 .网络请求
4 .history api 操作
5 .task source的定义非常宽泛,常见的鼠标,键盘事件,ajax,数据库操作等,以及定时期相关的setTimeout,setInterval等等都属于task source,所有来自task soucrce 的任务都会被放进对应的task队列中等待处理
6 .来自相同任务源的任务,必定官方在同一个任务队列中
7 .同一个任务源内的任务是按照顺序执行的
8 .对于不同的任务队列,浏览器会进行调度,允许优先执行来自特定任务源的任务,来优化任务。比如同时遇到鼠标,键盘和网络请求都有各自的任务队列。当两者同时存在的时候,浏览器可以优先从用户交互相关的任务队列中挑选任务并执行,从而保证流畅的用户体验
9 .

微任务队列

1 .在html标准中,并没有明确规定微任务,但是通常有以下几种
2 .promise 实现机制
3 .mutationObserver
4 .微任务执行的时机

1 .某个任务执行完毕时
2 .进入脚本执行的清理阶段
3 .创建和插入节点时
4 .解析XML文档时

5 .用处

1 .提供异步队列机制:把数据的变化部分缓冲在一个event loop中发生所有的数据变更,从而避免有机会在正真更新UI前,去除重复触发的数据变更,避免dom的不必要更新
2 .借助promise.then,MutationObserver等实现Vue.nextTick()方法使得Vue有能力让ui尽早得到更新,在一轮event loop轮次而非下一轮中就更新完毕
3 .

js运行机制

1 .主线程不断循环
2 .同步任务,创建执行上下文,按顺序进入执行栈
3 .异步任务

1 .同步执行这段代码
2 .将相应的task 添加到event loop的任务队列
3 .其他线程来执行具体的异步操作。尽管js是单线程的,但是浏览器内核是多线程的,他会将GUI渲染,定时器触发,HTTP请求等工作交给专门的线程来处理
4 .当主线程执行完当前执行栈中的所有任务,就回去读取event loop的任务队列,取出执行任务

event loop处理模型

1 .执行任务:从任务队列中取出一个最老的任务并执行,如果没有就跳过
2 .执行微任务
3 .进入更新渲染阶段

1 .设置 Performance api中的now()的返回值。
2 .遍历本次event loop相关的documents,执行更新渲染,在执行迭代的过程中,浏览器会根据各种因素来判断是否要跳过本次更新
3 .当浏览器确认继续本次更新后,处理更新渲染相关工作
4 .触发各种事件 resize,scroll,media quaries ,css animations,fullscreen api-执行animation frame callbacks,window.requestAnimationFrame就在这里--个更新intersection observations,用于图片懒加载,更新渲染和UI,最终将结果提交到界面上
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容