nodejs-第二章-第一節-瀏覽器事件循環

第一章：事件循環介紹：

• 瀏覽器中的事件循環：

  • 爲了協調事件(event)，用戶交互(user interaction)，腳本(script)，渲染(rendering)，網絡(networking)等，用戶代理(user agent)必須使用 事件循環(event loops).
  • 事件：PostMessage(多個頁面通訊),MutationObserver(dom監聽)等
  • 用戶交互：click，onScroll等
  • 渲染：解析dom，css等
  • 腳本：執行腳本

• nodejs中的事件循環

  • 事件循環容許Node.js執行非阻塞I/O操做，儘管JavaScript是單線程的，經過儘量將操做卸載到系統內核，因爲大多數現代內核都是多線程的，所以 他們能夠處理在後臺執行的多個操做。當其中一個操做完成時，內核會告訴Nodejs，以即可以將相應的回調添加到輪詢隊列中以最終執行。
  • 事件：EventEmitter
  • 非阻塞I/O: 網絡請求，文件讀寫等
  • 腳本： js執行腳本

• 事件循環的本質

  • 在瀏覽器或者nodejs環境中，運行時對js腳本的調度方式就叫事件循環

setTimeout(()=>{
    console.log('setTimeout')
},0)
Promise.resolve().then(() =>{
    console.log('promise')
})
console.log('main')
// main  promise  setTimeout

第二章：瀏覽器事件循環

• javascript爲何是單線程的？

  • 瀏覽器js的做用是操做DOM，這決定了它只能是單線程，不然會帶來很複雜的同步問題。好比，假定javascript同時有兩個線程，一個線程在某個DOM 節點上添加內容，另外一個線程刪除了這個節點，這時瀏覽器不知道以哪一個線程爲主。

• 任務隊列

  • 單線程意味着全部任務須要排隊，若是由於任務cpu計算量大還好，可是I/O操做cpu是閒着的。因此js就設計成了一門異步語言，不會作無謂的等待。
  • 任務能夠分紅兩種，一種是同步任務，另外一種是異步任務。
  • 全部同步任務都在主線程上執行，造成一個執行棧。
  • 主線程以外，還存在一個任務隊列。只要異步任務有了運行結果，就在任務隊列之中放置一個事件。
  • 一旦執行棧中的全部同步任務執行完畢，系統就會讀取任務隊列，看看裏面有哪些事件。那些對應的異步任務，因而結束等待狀態，進入執行棧，開始執行。
  • 主線程不斷重複上面的第三步
  • 主線程從任務隊列中讀取事件，這個過程是循環不斷的，因此整個的這種運行機制又稱 Event Loop（事件循環）

• 宏任務和微任務

  • 除了廣義的同步任務和異步任務，javaScript單線程中的任務能夠細分爲 宏任務和微任務。
  • macrotask(宏任務): script(總體代碼)，setTimeout, setInterval, setImmediate, I/O, UI rendering
  • microtask(微任務):process.nextTick, Promise, Object.observe, MutationObserver 1.宏任務進入主線程，執行過程當中會蒐集微任務加入微任務隊列。 2.宏任務執行完成以後，立馬執行微任務中的任務。微任務執行過程當中將再次收集宏任務，並加入宏任務隊列 3.反覆執行1，2

• 事件循環：每執行完一輪宏任務和微任務就叫作一環事件;

高頻面試題

• 一輪事件循環會執行一次宏任務以及全部的微任務

setTimeout(() => {
    console.log('setTimeout')
    setTimeout(() => {
       console.log('setTimeout2')
    },0)
},0)

Promise.resolve().then(() =>{
    console.log('Promise')
    Promise.resolve().then(() =>{
      console.log('Promise2')
    })
})

console.log('main')
// main  promise promise2 setTimeout

• 任務隊列必定會保持先進先出的順序執行，沒次只能執行一個紅任務！！！·

setTimeout(() => { // 兩個setTimeout誰先進的話 誰就先出
    console.log('setTimeout')
    Promise.resolve().then(() =>{
      console.log('promise')
    })
},0)

Promise.resolve().then(() =>{
    console.log('promise2')
    setTimeout(() => {
       console.log('setTimeout2')
    },0)
})

console.log('main')
// main promise2 setTimeout  promise  setTimeout2

new Promise((res, rej) =>{
    console.log(1)
    res()
  }).then(() =>{
    console.log(2)
    new Promise((res,rej) =>{
      console.log(3)
      res()
    }).then(() =>{
      console.log(4)
    }).then(() =>{
      console.log(5)
    }).then(() =>{
      console.log(6)
    })
  }).then(() =>{
      console.log(7)
    })
    .then(() =>{
      console.log(8)
    })
// 1 2 3 4 7 5 8 6