瀏覽器中必須掌握的奇怪知識~-有解無憂

1. console.log同步還是異步？

并沒有什么規范或一組需求指定console.* 方法族如何作業——它們并不是JavaScript 正式的一部分，而是由宿主環境（請參考本書的“型別和語法”部分）添加到JavaScript 中的，因此，不同的瀏覽器和JavaScript 環境可以按照自己的意愿來實作，有時候這會引起混淆，

尤其要提出的是，在某些條件下，某些瀏覽器的console.log(…) 并不會把傳入的內容立即輸出，出現這種情況的主要原因是，在許多程式（不只是JavaScript）中，I/O 是非常低速的阻塞部分，所以，（從頁面/UI 的角度來說）瀏覽器在后臺異步處理控制臺I/O 能夠提高性能，這時用戶甚至可能根本意識不到其發生， -《你不知道的javascript中卷》第二卷

基本型別：輸出沒問題；
參考型別：不展開物件顯示的是輸出時物件的快照資訊，展開后顯示的最新的值（當物件屬性很多時，有時就需要展開物件來查看屬性的值，這時就可能引起混淆），

在這里插入圖片描述
建議：

將物件序列化后輸出console.llog(JSON.stringify( obj ))，復制控制臺輸出放到JSON決議網站重構，
使用打斷點（debugger;）的形式查看物件資訊，

2. 執行堆疊、宏任務、微任務、渲染任務、requestAnimationFrame以及requestIdleCallback執行順序？

整體執行順序：

執行堆疊 -> 執行所有的微任務 -> check render檢查是否需要渲染（達到瀏覽器的該渲染的幀率） -> 需要渲染：執行requestAnimationFrame -> 需要渲染：阻塞js引擎執行緒，切到渲染執行緒執行 -> check worker檢查是否有worker任務 -> 離渲染還有時間，或timeout時間到了執行requestIdleCallback

JavaScript引擎執行緒和渲染引擎執行緒同一時刻只能有一個被執行，

UI Rendering：瀏覽器會根據當前設備的重繪率等因素設定一個幀率（比如：1s 60幀）來決定何時運行【JavaScript不阻塞的情況下】，包括：js執行的dom操作、css3的影片效果，（暫時認為在每次Event Loop的微任務佇列清空完之后統一分析后執行渲染，）
在這里插入圖片描述

執行堆疊：一種堆疊的資料結構，代表當前正在執行的代碼，

宏任務macrotask：

setTimeout/setInterval
postMessage、MessageChannel
I/O：點擊一次button的回呼事件、上傳檔案等
setImmediate（Node.js）

requestAnimationFrame（瀏覽器）：在繪制前執行

let now = new Date();
    let num = 0;
    function raf() {
      console.log(new Date() - now + ":" + ++num);
      requestAnimationFrame(raf);
}
requestAnimationFrame(raf)
// js不阻塞的情況下，跟隨瀏覽器的幀率自動輸出

請添加圖片描述

微任務microtask：

Promise.then catch finally
MutaionObserver
process.nextTick（Node.js）

requestIdleCallback：會在每次 check worker結束發現距離下一幀的重繪還有時間，就執行一下這個，如果時間不夠，就下一幀再說，

3. debugger會觸發渲染引擎執行ui渲染？

加斷點時：瀏覽器是一次扔給js執行執行緒一行代碼，執行完這行代碼后執行堆疊已經沒有其他代碼了，讀取不到了，瀏覽器任務此時代碼執行完畢了，所以就開始GUI render，此時可以看到界面發生變化.
不加斷點時：瀏覽器執行完一行代碼會繼續讀取另一行代碼，直到沒有可執行的代碼為止包括也沒有微任務佇列了然后開始GUI render,由于是瞬間的給我們的感覺是同時的.
```
setTimeout(()=>{
  Promise.resolve().then(()=>{
   text.innerHTML="改變后的"
    console.log('123')
  })
  console.log('沒有改變呢')
},1000)
```

在這里插入圖片描述
從圖中可以看到GUI render的事件確實是晚于所有代碼的執行時間，這也解釋了我的另外一個疑惑：為什么斷點除錯時promsie微任務佇列里面的回呼的代碼沒有執行完時就看到了界面變化，這其實還是因為debugger是一點點扔代碼給瀏覽器的原因，

4. Chrome性能監測performance

Chrome性能分析工具的使用

參考文章

事件回圈、requestAnimationFrame和渲染的執行順序@1
事件回圈、requestAnimationFrame和渲染的執行順序@2
debugger會呼叫渲染引擎進行ui渲染
console.log

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/325617.html

標籤：其他

上一篇：Webpack的基本使用

下一篇：C#如何正確編碼可重用類？