建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
前端進(jìn)階之JS運(yùn)行原理和機(jī)制詳解
前言
之前我們一直說(shuō)要介紹下前端的知識(shí)點(diǎn)，一直沒空總結(jié)，這不來(lái)了;
創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)堆龍德慶,十年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575
js運(yùn)行機(jī)制，來(lái)一篇總結(jié)
一、js的基礎(chǔ)知識(shí)點(diǎn)介紹
- js作為瀏覽器腳本語(yǔ)言，它的主要用途是與用戶互動(dòng)，以及操作DOM，因此js是單線程，也避免了同時(shí)操作同一個(gè)DOM的矛盾問題;
- 為了利用多核CPU的計(jì)算能力，H5的Web Worker實(shí)現(xiàn)的“多線程”實(shí)際上指的是“多子線程”，完全受控于主線程，且不允許操作DOM;
- js引擎存在monitoring process進(jìn)程，會(huì)持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會(huì)去Event Queue那里檢查是否有等待被調(diào)用的函數(shù)。這個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為Event Loop(事件循環(huán));
- 所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧(execution context stack);
- 如果在微任務(wù)執(zhí)行期間微任務(wù)隊(duì)列加入了新的微任務(wù)，會(huì)將新的微任務(wù)加入隊(duì)列尾部，之后也會(huì)被執(zhí)行;
二、相關(guān)概念
1、JS為什么是單線程的?
- JavaScript語(yǔ)言的一大特點(diǎn)就是單線程，也就是說(shuō)，同一個(gè)時(shí)間只能做一件事。那么，為什么JavaScript不能有多個(gè)線程呢?這樣能提高效率啊。
- JavaScript的單線程，與它的用途有關(guān)。作為瀏覽器腳本語(yǔ)言，JavaScript的主要用途是與用戶互動(dòng)，以及操作DOM。這決定了它只能是單線程，否則會(huì)帶來(lái)很復(fù)雜的同步問題。比如，假定JavaScript同時(shí)有兩個(gè)線程，一個(gè)線程在某個(gè)DOM節(jié)點(diǎn)上添加內(nèi)容，另一個(gè)線程刪除了這個(gè)節(jié)點(diǎn)，這時(shí)瀏覽器應(yīng)該以哪個(gè)線程為準(zhǔn)?
- 所以，為了避免復(fù)雜性，從一誕生，JavaScript就是單線程，這已經(jīng)成了這門語(yǔ)言的核心特征，將來(lái)也不會(huì)改變;
- 為了利用多核CPU的計(jì)算能力，HTML5提出Web Worker標(biāo)準(zhǔn)，允許JavaScript腳本創(chuàng)建多個(gè)線程，但是子線程完全受主線程控制，且不得操作DOM。所以，這個(gè)新標(biāo)準(zhǔn)并沒有改變JavaScript單線程的本質(zhì);
2、JS為什么需要異步?
如果JS中不存在異步，只能自上而下執(zhí)行，如果上一行解析時(shí)間很長(zhǎng)，那么下面的代碼就會(huì)被阻塞。對(duì)于用戶而言，阻塞就意味著"卡死"，這樣就導(dǎo)致了很差的用戶體驗(yàn);
3、JS單線程又是如何實(shí)現(xiàn)異步的呢?
既然JS是單線程的，只能在一條線程上執(zhí)行，又是如何實(shí)現(xiàn)的異步呢?
是通過(guò)的事件循環(huán)(event loop)，理解了event loop機(jī)制，就理解了JS的執(zhí)行機(jī)制。
4、任務(wù)隊(duì)列
- "任務(wù)隊(duì)列"是一個(gè)事件的隊(duì)列(也可以理解成消息的隊(duì)列)，IO設(shè)備完成一項(xiàng)任務(wù)，就在"任務(wù)隊(duì)列"中添加一個(gè)事件，表示相關(guān)的異步任務(wù)可以進(jìn)入"執(zhí)行棧"了。主線程讀取"任務(wù)隊(duì)列"，就是讀取里面有哪些事件;
- "任務(wù)隊(duì)列"中的事件，除了IO設(shè)備的事件以外，還包括一些用戶產(chǎn)生的事件(比如鼠標(biāo)點(diǎn)擊、頁(yè)面滾動(dòng)等等)。只要指定過(guò)回調(diào)函數(shù)，這些事件發(fā)生時(shí)就會(huì)進(jìn)入"任務(wù)隊(duì)列"，等待主線程讀取。
- 所謂"回調(diào)函數(shù)"(callback)，就是那些會(huì)被主線程掛起來(lái)的代碼。異步任務(wù)必須指定回調(diào)函數(shù)，當(dāng)主線程開始執(zhí)行異步任務(wù)，就是執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù);
- "任務(wù)隊(duì)列"是一個(gè)先進(jìn)先出的數(shù)據(jù)結(jié)構(gòu)，排在前面的事件，優(yōu)先被主線程讀取。主線程的讀取過(guò)程基本上是自動(dòng)的，只要執(zhí)行棧一清空，"任務(wù)隊(duì)列"上第一位的事件就自動(dòng)進(jìn)入主線程。但是，由于存在后文提到的"定時(shí)器"功能，主線程首先要檢查一下執(zhí)行時(shí)間，某些事件只有到了規(guī)定的時(shí)間，才能返回主線程。
- 讀取到一個(gè)異步任務(wù)，首先是將異步任務(wù)放進(jìn)事件表格(Event table)中，當(dāng)放進(jìn)事件表格中的異步任務(wù)完成某種事情或者說(shuō)達(dá)成某些條件(如setTimeout事件到了，鼠標(biāo)點(diǎn)擊了，數(shù)據(jù)文件獲取到了)之后，才將這些異步任務(wù)推入事件隊(duì)列(Event Queue)中，這時(shí)候的異步任務(wù)才是執(zhí)行棧中空閑的時(shí)候才能讀取到的異步任務(wù);
5、Event Loop
- 主線程從"任務(wù)隊(duì)列"中讀取事件，這個(gè)過(guò)程是循環(huán)不斷的，所以整個(gè)的這種運(yùn)行機(jī)制又稱為Event Loop(事件循環(huán));
- Event Loop是javascript的執(zhí)行機(jī)制
6、setTimeout(fn,0)
- setTimeout(fn,0)的含義是，指定某個(gè)任務(wù)在主線程最早可得的空閑時(shí)間執(zhí)行，也就是說(shuō)，盡可能早得執(zhí)行。它在"任務(wù)隊(duì)列"的尾部添加一個(gè)事件，因此要等到同步任務(wù)和"任務(wù)隊(duì)列"現(xiàn)有的事件都處理完，才會(huì)得到執(zhí)行。
- HTML5標(biāo)準(zhǔn)規(guī)定了setTimeout()的第二個(gè)參數(shù)的最小值(最短間隔)，不得低于4毫秒，如果低于這個(gè)值，就會(huì)自動(dòng)增加。在此之前，老版本的瀏覽器都將最短間隔設(shè)為10毫秒。另外，對(duì)于那些DOM的變動(dòng)(尤其是涉及頁(yè)面重新渲染的部分)，通常不會(huì)立即執(zhí)行，而是每16毫秒執(zhí)行一次。這時(shí)使用requestAnimationFrame()的效果要好于setTimeout()。
- 需要注意的是，setTimeout()只是將事件插入了"任務(wù)隊(duì)列"，必須等到當(dāng)前代碼(執(zhí)行棧)執(zhí)行完，主線程才會(huì)去執(zhí)行它指定的回調(diào)函數(shù)。要是當(dāng)前代碼耗時(shí)很長(zhǎng)，有可能要等很久，所以并沒有辦法保證，回調(diào)函數(shù)一定會(huì)在setTimeout()指定的時(shí)間執(zhí)行
三、js執(zhí)行機(jī)制介紹
1、javascript的同步和異步
- 單線程就意味著，所有任務(wù)需要排隊(duì)，前一個(gè)任務(wù)結(jié)束，才會(huì)執(zhí)行后一個(gè)任務(wù)。如果前一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后一個(gè)任務(wù)就不得不一直等著。
- 如果排隊(duì)是因?yàn)橛?jì)算量大，CPU忙不過(guò)來(lái)，倒也算了，但是很多時(shí)候CPU是閑著的，因?yàn)镮O設(shè)備(輸入輸出設(shè)備)很慢(比如Ajax操作從網(wǎng)絡(luò)讀取數(shù)據(jù))，不得不等著結(jié)果出來(lái)，再往下執(zhí)行。
- JavaScript語(yǔ)言的設(shè)計(jì)者意識(shí)到，這時(shí)主線程完全可以不管IO設(shè)備，掛起處于等待中的任務(wù)，先運(yùn)行排在后面的任務(wù)。等到IO設(shè)備返回了結(jié)果，再回過(guò)頭，把掛起的任務(wù)繼續(xù)執(zhí)行下去。
- 于是，所有任務(wù)可以分成兩種，一種是同步任務(wù)(synchronous)，另一種是異步任務(wù)(asynchronous)。同步任務(wù)指的是，在主線程上排隊(duì)執(zhí)行的任務(wù)，只有前一個(gè)任務(wù)執(zhí)行完畢，才能執(zhí)行后一個(gè)任務(wù);異步任務(wù)指的是，不進(jìn)入主線程、而進(jìn)入"任務(wù)隊(duì)列"(task queue)的任務(wù)，只有"任務(wù)隊(duì)列"通知主線程，某個(gè)異步任務(wù)可以執(zhí)行了，該任務(wù)才會(huì)進(jìn)入主線程執(zhí)行。
- 同步和異步任務(wù)分別進(jìn)入不同的執(zhí)行"場(chǎng)所"，同步的進(jìn)入主線程，異步的進(jìn)入Event Table并注冊(cè)函數(shù)。
- 當(dāng)Event Table中指定的事情完成時(shí)，會(huì)將這個(gè)函數(shù)移入Event Queue。
- 主線程內(nèi)的任務(wù)執(zhí)行完畢為空，會(huì)去Event Queue讀取對(duì)應(yīng)的函數(shù)，進(jìn)入主線程執(zhí)行。
- 上述過(guò)程會(huì)不斷重復(fù)，也就是常說(shuō)的Event Loop(事件循環(huán))。
- 我們不禁要問了，那怎么知道主線程執(zhí)行棧為空啊?js引擎存在monitoring process進(jìn)程，會(huì)持續(xù)不斷的檢查主線程執(zhí)行棧是否為空，一旦為空，就會(huì)去Event Queue那里檢查是否有等待被調(diào)用的函數(shù);
2、JavaScript的宏任務(wù)與微任務(wù)
你是否覺得同步異步的執(zhí)行機(jī)制流程就是JavaScript執(zhí)行機(jī)制的全部?不是的，JavaScript除了廣義上的的同步任務(wù)何異步任務(wù)，其對(duì)任務(wù)還有更精細(xì)的定義：
- macro-task(宏任務(wù))：包括整體代碼script，setTimeout，setInterval
- micro-task(微任務(wù))：Promise，process.nextTick
不同類型的任務(wù)會(huì)進(jìn)入對(duì)應(yīng)的Event Queue。
事件循環(huán)的順序，決定js代碼的執(zhí)行順序。進(jìn)入整體代碼(宏任務(wù))后，開始第一次循環(huán)。接著執(zhí)行所有的微任務(wù)。然后再次從宏任務(wù)開始，找到其中一個(gè)任務(wù)隊(duì)列執(zhí)行完畢，再執(zhí)行所有的微任務(wù)。
3、實(shí)例來(lái)說(shuō)明JavaScript的執(zhí)行機(jī)制
3.1、同步
- console.log(1);
- console.log(2);
- console.log(3);
- /*
- 執(zhí)行結(jié)果：1、2、3
- 同步任務(wù)，按照順序一步一步執(zhí)行
- */
3.2、同步和異步
- console.log(1);
- setTimeout(function() {
- console.log(2);
- },1000)
- console.log(3);
- /*
- 執(zhí)行結(jié)果：1、3、2
- 同步任務(wù)，按照順序一步一步執(zhí)行
- 異步任務(wù)，放入消息隊(duì)列中，等待同步任務(wù)執(zhí)行結(jié)束，讀取消息隊(duì)列執(zhí)行
- */
3.3、異步任務(wù)進(jìn)一步分析
- console.log(1);
- setTimeout(function() {
- console.log(2);
- },1000)
- setTimeout(function() {
- console.log(3);
- },0)
- console.log(4);
- /*
- 猜測(cè)是：1、4、2、3 但實(shí)際上是：1、4、3、2
- 分析：
- 同步任務(wù)，按照順序一步一步執(zhí)行
- 異步任務(wù)，當(dāng)讀取到異步任務(wù)的時(shí)候，將異步任務(wù)放置到Event table（事件表格）
- 中，當(dāng)滿足某種條件或者說(shuō)指定事情完成了（這里的是時(shí)間分別是達(dá)到了0ms和1000ms）當(dāng)指定
- 事件完成了才從Event table中注冊(cè)到Event Queue（事件隊(duì)列），當(dāng)同步事件完成了，便從
- Event Queue中讀取事件執(zhí)行。（因?yàn)?的事情先完成了，所以先從Event table中注冊(cè)到
- Event Queue中，所以先執(zhí)行的是3而不是在前面的2）
- */
3.4、宏任務(wù)和微任務(wù)
- console.log(1);
- setTimeout(function() {
- console.log(2)
- },1000);
- new Promise(function(resolve) {
- console.log(3);
- resolve();
- }
- ).then(function() {
- console.log(4)
- });
- console.log(5);
- /*
- 以同步異步的方式來(lái)判斷的結(jié)果應(yīng)該是：1、3、5、2、4
- 但是事實(shí)上結(jié)果是：1、3、5、4、2
- 為什么是這樣呢？因?yàn)橐酝疆惒降姆绞絹?lái)解釋執(zhí)行機(jī)制是不準(zhǔn)確的，更加準(zhǔn)確的方式是宏任務(wù)和微任務(wù)：
- 因此執(zhí)行機(jī)制便為：執(zhí)行宏任務(wù) ===> 執(zhí)行微任務(wù) ===> 執(zhí)行另一個(gè)宏任務(wù) ===> 不斷循環(huán)
- 即：在一個(gè)事件循環(huán)中，執(zhí)行第一個(gè)宏任務(wù)，宏任務(wù)執(zhí)行結(jié)束，執(zhí)行當(dāng)前事件循環(huán)中的微任務(wù)，
- 執(zhí)行完畢之后進(jìn)入下一個(gè)事件循環(huán)中，或者說(shuō)執(zhí)行下一個(gè)宏任務(wù)
- */
3.5、是否徹底理解JavaScript執(zhí)行機(jī)制實(shí)例
- console.log('1');
- setTimeout(function() {
- console.log('2');
- process.nextTick(function() {
- console.log('3');
- })
- new Promise(function(resolve) {
- console.log('4');
- resolve();
- }).then(function() {
- console.log('5')
- })
- })
- process.nextTick(function() {
- console.log('6');
- })
- new Promise(function(resolve) {
- console.log('7');
- resolve();
- }).then(function() {
- console.log('8')
- })
- setTimeout(function() {
- console.log('9');
- process.nextTick(function() {
- console.log('10');
- })
- new Promise(function(resolve) {
- console.log('11');
- resolve();
- }).then(function() {
- console.log('12')
- })
- })
- /*
- 1、 第一輪事件循環(huán)流程分析如下：
- 整體script作為第一個(gè)宏任務(wù)進(jìn)入主線程，遇到console.log，輸出1。
- 遇到setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中。我們暫且記為setTimeout1。
- 遇到process.nextTick()，其回調(diào)函數(shù)被分發(fā)到微任務(wù)Event Queue中。我們記為process1。
- 遇到Promise，new Promise直接執(zhí)行，輸出7。then被分發(fā)到微任務(wù)Event Queue中。我們記為then1。
- 又遇到了setTimeout，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)Event Queue中，我們記為setTimeout2。
- 宏任務(wù)Event Queue 微任務(wù)Event Queue
- setTimeout1 process1
- setTimeout2 then1
- 上表是第一輪事件循環(huán)宏任務(wù)結(jié)束時(shí)各Event Queue的情況，此時(shí)已經(jīng)輸出了1和7。
- 我們發(fā)現(xiàn)了process1和then1兩個(gè)微任務(wù)。
- 執(zhí)行process1,輸出6。
- 執(zhí)行then1，輸出8。
- 好了，第一輪事件循環(huán)正式結(jié)束，這一輪的結(jié)果是輸出1，7，6，8。
- 2、 那么第二輪時(shí)間循環(huán)從setTimeout1宏任務(wù)開始：
- 首先輸出2。接下來(lái)遇到了process.nextTick()，同樣將其分發(fā)到微任務(wù)Event Queue中，
- 記為process2。new Promise立即執(zhí)行輸出4，then也分發(fā)到微任務(wù)Event Queue中，記為then2。
- 宏任務(wù)Event Queue 微任務(wù)Event Queue
- setTimeout2 process2
- then2
- 第二輪事件循環(huán)宏任務(wù)結(jié)束，我們發(fā)現(xiàn)有process2和then2兩個(gè)微任務(wù)可以執(zhí)行。
- 輸出3。
- 輸出5。
- 第二輪事件循環(huán)結(jié)束，第二輪輸出2，4，3，5。
- 3、 第三輪事件循環(huán)開始，此時(shí)只剩setTimeout2了，執(zhí)行。
- 直接輸出9。
- 將process.nextTick()分發(fā)到微任務(wù)Event Queue中。記為process3。
- 直接執(zhí)行new Promise，輸出11。
- 將then分發(fā)到微任務(wù)Event Queue中，記為then3。
- 宏任務(wù)Event Queue 微任務(wù)Event Queue
- process3
- then3
- 第三輪事件循環(huán)宏任務(wù)執(zhí)行結(jié)束，執(zhí)行兩個(gè)微任務(wù)process3和then3。
- 輸出10。
- 輸出12。
- 第三輪事件循環(huán)結(jié)束，第三輪輸出9，11，10，12。
- 整段代碼，共進(jìn)行了三次事件循環(huán)，完整的輸出為1，7，6，8，2，4，3，5，9，11，10，12。
- */
總結(jié)
javascript是一門單線程語(yǔ)言;
Event Loop是javascript的執(zhí)行機(jī)制;
客戶端也是要學(xué)習(xí)前端語(yǔ)言的，以后我們會(huì)講解一些前端的知識(shí)點(diǎn)
本文轉(zhuǎn)載自微信公眾號(hào)「Android開發(fā)編程」
分享標(biāo)題：前端進(jìn)階之JS運(yùn)行原理和機(jī)制詳解
分享URL：http://m.5511xx.com/article/dpgdddd.html
