浏览器JS运转机制(线程)【上海时时乐走势图官

在JavaScript中,一个线程执行的时候不依靠其他线程处理完毕我们称为异步,相反一个线程必须等待直到另一个线程处理完毕我们则称为同步。
打个比方:
(1)同步就是你在煮方便面的时候必须等水开了,你才会放调料和方便面;
(2)异步就是你在煮方便面的时候不需要等水开了,你可以刚开始开火的时候,就放调料和方便面;
在JS中同步异步与阻塞非阻塞其实没有本质的区别,我们往往指的是一回事,因为JS是单线程的。
但是js执行环境是多线程的,想要达到阻塞效果,可以通过同步或者alert()
在做后台系统中,后台系统的菜单是根据登陆者的权限不同来分配使用的菜单界面,这个时候就需要用同步的阻塞特性来先生成这个这个菜单界面,而且这个同步js需要写在body之前。

EventLoop

主线程从”任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

简单说,浏览器的两个线程:一个负责程序本身的运行,称为”主线程”;另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为”Event Loop线程”(可以译为”消息线程”)。

由于js是运行在单线程上的,所有浏览器单独开启一个线程来处理事件消息的轮询,避免阻塞js的执行。

事件和回调函数

消息队列可以响应IO事件,还有用户产生的事件(比如点击鼠标,页面滚动),只要指定了回调函数,就会进入消息队列,等待EventLoop轮询线程处理,是否可以进入主线程的执行栈。

消息和回调函数相互联系的含义:主线程读到消息,就会执行相应的回调函数;进入消息队列的消息,必须对应相应的回调函数,否则这个消息会被丢弃不会进入消息队列

消息队列是一个先进先出的队列结构,这就决定了它的执行顺序,先产生的消息会被主线程先读取,会不会执行则会先检查一下执行时间,因为存在setTimeout等定时函数,这类事件产生的消息进入到消息队列,被执行的时机取决与它在队列中的位置和执行时间有关。【上文中使用setTimeout能够避免阻塞UI线程就是这个原因】。


js单线程

单线程的含义是js只能在一个线程上运行,也就是说,js同时只能执行一个js任务,其它的任务则会排队等待执行。

js是单线程的,并不代表js引擎线程只有一个。js引擎有多个线程,一个主线程,其它的后台配合主线程。

多线程之间会共享运行资源,浏览器端的js会操作dom,多个线程必然会带来同步的问题,所以js核心选择了单线程来避免处理这个麻烦。js可以操作dom,影响渲染,所以js引擎线程和UI线程是互斥的。这也就解释了js执行时会阻塞页面的渲染。


主线程执行的说明: 【js的运行机制】

(1)所有同步任务都在主线程上执行,形成一个执行栈。 

(2)主线程之外,还存在一个”任务队列”。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。 

(3)一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,看看里面有哪些事件。那些对应的异步任务将结束等待状态,进入执行栈,开始执行。 

(4)主线程不断重复上面的第三步。

执行栈中的代码(同步任务),总是在读取”任务队列”(异步任务)之前执行。


异步代码的执行逻辑: 

每当遇到I/O的时候,主线程就让EventLoop线程去通知相应的I/O程序,然后接着往后运行,所以不存在等待时间。等到I/O程序完成操作,EventLoop线程把消息添加到消息队列,主线程就调用事先设定的回调函数,完成整个任务。

JavaIO中包括了网络IO,我们通常把http请求归类为网络IO.

js的ajax是new XMLHttpRequest()对象实现的,浏览器会新开一个线程来处理http请求,这就是ajax能够实现局部刷新的同时,还能响应用户交互的原因。

这也说明了在处理IO时,浏览器通常会新开启IO线程,这个属于我的推测,并没有查到对应的资料,因为IO涉及的广泛,这话也没错。

js消息队列

JavaScript运行时,除了一个运行线程,引擎还提供一个消息队列,里面是各种需要当前程序处理的消息。新的消息进入队列的时候,会自动排在队列的尾端。

单线程意味着js任务需要排队,如果前一个任务出现大量的耗时操作,后面的任务得不到执行,任务的积累会导致页面的“假死”。这也是js编程一直在强调需要回避的“坑”。


浏览器常驻线程

浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。

1. javascript引擎是基于事件驱动单线程执行的,JS引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JS线程在运行JS程序。

2. GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的,当JS引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

3. 事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等,但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。(当线程中没有执行任何同步代码的前提下才会执行异步代码)


看下这段代码,setTimeout是异步线程,需要等待js引擎处理完同步代码(while语句)之后才会执行,while语句直接是个死循环,js引擎没有空闲,不会执行下面的alert,也不会插入setTimeout。所以即使这个时候你把setTimeout的时间改成0,他还是不会执行。看下实例:

setTimeout(function(){ 

    console.log(123); 

    var s = new Date();

    var n = s.getTime();

    console.log(n); 

},0)

for (var i = 0; i < 50; i ) { 

    console.log(new Date().getTime()); 

};


js任务

任务分为2种:

同步任务

异步任务

它们的区别是: 本段中的线程指的是js引擎主线程

同步任务:在主线程排队支持的任务,前一个任务执行完毕后,执行后一个任务,形成一个执行栈线程执行时在内存形成的空间为栈,进程形成堆结构,这是内存的结构。执行栈可以实现函数的层层调用。注意不是按栈的出栈顺序来执行。

异步任务会被主线程挂起,不会进入主线程,而是进入消息队列,而且必须指定回调函数,只有消息队列通知主线程,并且执行栈为空时,该消息对应的任务才会进入执行栈获得执行的机会。


本文由上海时时乐走势图发布于web前端,转载请注明出处:浏览器JS运转机制(线程)【上海时时乐走势图官

您可能还会对下面的文章感兴趣: