JavaScript基礎(chǔ)之運(yùn)行機(jī)制

由一段代碼進(jìn)行正題:

console.log(1);
setTimeout(function(){
    console.log(2)
},0);
console.log(3)

瀏覽器依次輸出1,3,2,而不是看上去的1,2,3;
JS是單線程語言:JS在同一時(shí)間只能做一件事。
任務(wù)隊(duì)列:分為同步任務(wù)和異步任務(wù)曲饱;任務(wù)隊(duì)列有執(zhí)行順序,同步任務(wù)第一時(shí)間執(zhí)行珠月,同步任務(wù)執(zhí)行完成后才能執(zhí)行異步任務(wù)扩淀;

for(var i=0;i<3;i++){
    setTimeout(function(){
        console.log(i)
    },1000)
}

運(yùn)行上面的代碼,瀏覽器會(huì)輸出:3,3,3啤挎。
這段代碼的原理在于驻谆,循環(huán)第一次的時(shí)候,執(zhí)行setTimeout函數(shù)侵浸,但是因?yàn)閟etTimeout函數(shù)是異步任務(wù)旺韭,所以里面的語句都會(huì)被掛起不執(zhí)行,循環(huán)第二次及之后的循環(huán)都是如此掏觉。那么此時(shí)setTimeout函數(shù)被放入異步隊(duì)列区端,但是不執(zhí)行,只有當(dāng)這個(gè)異步時(shí)間到了規(guī)定的時(shí)間澳腹,函數(shù)體才會(huì)被執(zhí)行织盼。對(duì)于這個(gè)例子來說杨何,for循環(huán)執(zhí)行完畢,setTimeout函數(shù)依次被放入異步隊(duì)列沥邻,然后過了1秒或2秒后危虱,異步隊(duì)列中的函數(shù)開始執(zhí)行。

Event Loop:瀏覽器的JS引擎遇到setTimeout函數(shù)唐全,識(shí)別這是一個(gè)異步任務(wù)埃跷,它不會(huì)把它放在運(yùn)行棧中,它會(huì)把它拿走放進(jìn)邮利,拿走之后也不會(huì)立即放入異步隊(duì)列中弥雹,先保留住,同步任務(wù)執(zhí)行完后延届,到了setTimeout函數(shù)約定的時(shí)間剪勿,time模塊會(huì)把它放入異步隊(duì)列,瀏覽器同步任務(wù)執(zhí)行完了方庭,就會(huì)執(zhí)行這個(gè)任務(wù)厕吉,它執(zhí)行完后執(zhí)行棧又空了,此時(shí)瀏覽器又會(huì)監(jiān)聽異步隊(duì)列中是否有任務(wù)需要執(zhí)行械念,如果有就會(huì)再拿出來執(zhí)行头朱,如此循環(huán)的過程就是Event Loop。
開啟異步任務(wù)的條件:

setTimeout和setInerval
DOM事件
ES6中的Promise

瀏覽器假死現(xiàn)象的原理也是因?yàn)镴S的單線程導(dǎo)致龄减,如果同步任務(wù)一直在處理髓窜,瀏覽器就會(huì)卡住,做不了其它操作

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末欺殿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子鳖敷,更是在濱河造成了極大的恐慌脖苏,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件定踱,死亡現(xiàn)場(chǎng)離奇詭異棍潘,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)崖媚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門亦歉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人畅哑,你說我怎么就攤上這事肴楷。” “怎么了荠呐?”我有些...
    開封第一講書人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵赛蔫,是天一觀的道長(zhǎng)砂客。 經(jīng)常有香客問我,道長(zhǎng)呵恢,這世上最難降的妖魔是什么鞠值? 我笑而不...
    開封第一講書人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮渗钉,結(jié)果婚禮上彤恶,老公的妹妹穿的比我還像新娘。我一直安慰自己鳄橘,他們只是感情好声离,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挥唠,像睡著了一般抵恋。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上宝磨,一...
    開封第一講書人閱讀 51,554評(píng)論 1 305
  • 那天弧关,我揣著相機(jī)與錄音,去河邊找鬼唤锉。 笑死世囊,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的窿祥。 我是一名探鬼主播株憾,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼晒衩!你這毒婦竟也來了嗤瞎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤听系,失蹤者是張志新(化名)和其女友劉穎贝奇,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體靠胜,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡掉瞳,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了浪漠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片陕习。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖址愿,靈堂內(nèi)的尸體忽然破棺而出该镣,到底是詐尸還是另有隱情,我是刑警寧澤响谓,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布拌牲,位于F島的核電站俱饿,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏塌忽。R本人自食惡果不足惜拍埠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望土居。 院中可真熱鬧枣购,春花似錦、人聲如沸擦耀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽眷蜓。三九已至分瘾,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間吁系,已是汗流浹背德召。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留汽纤,地道東北人上岗。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像蕴坪,于是被迫代替她去往敵國和親肴掷。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • script執(zhí)行 瀏覽器在執(zhí)行HTML的時(shí)候如果遇到 時(shí)會(huì)停止頁面的渲染,去下載和執(zhí)行js的文件直接遇見 會(huì)繼續(xù)渲...
    唯我樓蘭閱讀 3,189評(píng)論 0 4
  • 一.頁面中JS的位置 一般來說背传,一個(gè)頁面是由HTML+CSS+JavaScript三要素組成呆瞻。在一個(gè)HTML頁面中...
    饑人谷_劉沖閱讀 1,908評(píng)論 0 4
  • defer和async是script標(biāo)簽的兩個(gè)屬性,用于在不阻塞頁面文檔解析的前提下径玖,控制腳本的下載和執(zhí)行栋烤。我們先...
    曾祥輝閱讀 4,898評(píng)論 0 2
  • 加載異步 沒有 defer 或 async,瀏覽器會(huì)立即加載并執(zhí)行指定的腳本挺狰,“立即”指的是在渲染該 scrip...
    饑人谷_tanfei閱讀 202評(píng)論 0 0
  • async和defer 沒有defer或者async,瀏覽器會(huì)立刻加載并執(zhí)行腳本买窟,“立即”指的是在渲染該scrip...
    mianmiani閱讀 211評(píng)論 0 0