資訊專欄INFORMATION COLUMN
摘要：定時器線程由于是單線程運行，所以不能抽出時間來計時，只能另開辟一個線程來處理定時器任務，等計時完成，把定時器要執行的操作添加到事件任務隊列尾，等待引擎線程來處理。已經知道了是單線程運行的，也知道中有同步操作和異步操作。
js運行機制
本章了解一下js的運行原理，了解了js的運行原理才能寫出更優美的代碼，提高運行效率，還能解決開發中遇到的不理解的問題。進程與線程
進程是cpu資源分配的最小單位，進程可以包含多個線程。 瀏覽器就是多進程的，每打開的一個瀏覽器窗口就是一個進程。
線程是cpu調度的最小單位，同一進程下的各個線程之間共享程序的內存空間。
可以把進程看做一個倉庫，線程是可以運輸的貨車，每個倉庫有屬于自己的多輛貨車為倉庫服務（運貨），每個倉庫可以同時由多輛車同時拉貨，但是每輛車同一時間只能干一件事，就是運輸本次的貨物。這樣就好理解了吧。
渲染進程瀏覽器包括4個進程：
主進程（Browser進程），瀏覽器只有一個主進程，負責資源下載，界面展示等主要基礎功能
GPU進程，負責3D圖示繪制
第三方插件進程，負責第三方插件處理
渲染進程（Renderer進程），負責js執行，頁面渲染等功能，也是本章重點內容
渲染進程主要包括GUI渲染線程、Js引擎線程、事件循環線程、定時器線程、http異步線程。
GUI渲染線程先看看瀏覽器得到一個網站資源后干了哪些事：
首先瀏覽器會解析html代碼（實際上html代碼本質是字符串）轉化為瀏覽器認識的節點，生成DOM樹，也就是DOM Tree
然后解析css，生成CSSOM（CSS規則樹）
把DOM Tree 和CSSOM結合，生成Rendering Tree(渲染樹)
GUI就是來干這個事情的，如果修改了一些元素的顏色或者背景色，頁面就會重繪（Repaint），如果修改元素的尺寸，頁面就會回流（Reflow），當頁面需要Repaing和Reflow時GUI多會執行，進行頁面繪制。
這里提示一點：Reflow比Repaint的成本更高，在js性能優化中會將如何避免Reflow和Repaint
JS引擎線程js引擎線程就是js內核，負責解析與執行js代碼，也稱為主線程。瀏覽器同時只能有一個JS引擎線程在運行JS程序，所以js是單線程運行的。
需要注意的是，js引擎線程和GUI渲染線程同時只能有一個工作，js引擎線程會阻塞GUI渲染線程
a
div2
在瀏覽器渲染的時候遇到
這是網絡上對Event Loop的解釋圖，相信大家現在能明白這張圖的含義了。
有關定時器（setTimeout、setInterval）的更多趣事 定時器會按照規定時間執行嗎？定時器是規定在一段時間之后執行一段代碼，但是在js執行中不會準確無誤的按照預期的時間去執行定時器里面的代碼。
一個原因是W3C標準規定setTimeout中最小的時間周期是4毫秒，凡是低于4ms的時間間隔都按照4ms來處理。
其實還有一個重要的原因，如果仔細看上面的文章，大家應該會想到在js執行的時候，主線程碰到定時器的時候，是不會直接處理的，應該是先把定時器事件交給定時器線程去處理，這時主線程繼續執行下面的代碼，同時定時器線程開始計時處理，等到計時完畢，事件循環線程會把定時器要執行的操作放在事件隊列末尾，等主線程空閑的時候再來執行事件隊列里面的操作。
應該使用setTimeout還是setInterval使用setTimeout模擬setInterval代碼類似以下代碼：
var say = function() {
setTimeout(say, 1000)
console.log("hello world")
}
setTimeout(say, 1000)
這樣js碰到定時器，會交給定時器線程處理，然后等計時完畢，定時器里面的操作添加到事件隊列，等主線程空閑去執行，主線程執行的時候又會發遇到定時器，這是又開始執行上面的一系列操作。
你會發現，這樣做會在每一次定時器執行完畢才開始下一個定時器，其中的誤差只是等待主線程空閑所需要等待的時間。
而setInterval是規定每隔固定的時間就往定時器線程中推入一個事件，這樣做有一個問題，就是累積效應。
累積效應：就是如果定時器里面的代碼執行所需的時間大于定時器的執行周期，就會出現累計效應，簡單來說就是上一次定時器里面的操作還沒執行完畢，下一次定時器事件又來了
累積效應會導致有些事件丟失，具體為什么會丟失，感興趣的可以看這篇文章，所以為了保險起見，盡量去使用setTimeout而不使用setInterval。
如果有對setTimeout非常感興趣的同學，我非常推薦大家去看看80% 應聘者都不及格的 JS 面試題這篇文章。
macrotask與microtaskmicrotask是Promise里一個新的概念。
macrotaskmacrotask中的事件都是放在一個事件隊列中的，而這個隊列由事件觸發線程維護
macrotask（又稱之為宏任務），可以理解是每次執行棧執行的代碼就是一個宏任務（包括每次從事件隊列中獲取一個事件回調并放到執行棧中執行）
每一個task會從頭到尾將這個任務執行完畢，不會執行其它
瀏覽器為了能夠使得JS內部task與DOM任務能夠有序的執行，會在一個task執行結束后，在下一個 task 執行開始前，對頁面進行重新渲染
microtaskmicrotask（又稱為微任務），可以理解是在當前 task 執行結束后立即執行的任務
microtask中的所有微任務都是添加到微任務隊列（Job Queues）中，等待當前macrotask執行完畢后執行，而這個隊列由JS引擎線程維護
在當前task任務后，下一個task之前，在渲染之前執行
所以它的響應速度相比setTimeout（setTimeout是task）會更快，因為無需等渲染
也就是說，在某一個macrotask執行完后，就會將在它執行期間產生的所有microtask都執行完畢（在渲染前）
請看網絡盜圖：
所以js運行過程：
執行一個宏任務（棧中沒有就從事件隊列中獲?。?/p>
執行過程中如果遇到微任務，就將它添加到微任務的任務隊列中
宏任務執行完畢后，立即執行當前微任務隊列中的所有微任務（依次執行）
當前宏任務執行完畢，開始檢查渲染，然后GUI線程接管渲染
渲染完畢后，JS線程繼續接管，開始下一個宏任務（從事件隊列中獲取）
有關macrotask和microtask的分析借鑒于從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107200.html
摘要：定時器線程由于是單線程運行，所以不能抽出時間來計時，只能另開辟一個線程來處理定時器任務，等計時完成，把定時器要執行的操作添加到事件任務隊列尾，等待引擎線程來處理。已經知道了是單線程運行的，也知道中有同步操作和異步操作。 js運行機制 本章了解一下js的運行原理，了解了js的運行原理才能寫出更優美的代碼，提高運行效率，還能解決開發中遇到的不理解的問題。 進程與線程 進程是cpu資源分配的...
摘要：定時器線程由于是單線程運行，所以不能抽出時間來計時，只能另開辟一個線程來處理定時器任務，等計時完成，把定時器要執行的操作添加到事件任務隊列尾，等待引擎線程來處理。已經知道了是單線程運行的，也知道中有同步操作和異步操作。 js運行機制 本章了解一下js的運行原理，了解了js的運行原理才能寫出更優美的代碼，提高運行效率，還能解決開發中遇到的不理解的問題。 進程與線程 進程是cpu資源分配的...
摘要：實現的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現一個的框架，筆者認為理解和實現一個框架需要實現四個大模塊，分別是封裝創建類構造函數構造對象中間件機制和剝洋蔥模型的實現錯誤捕獲和錯誤處理下面我們就逐一分析和實現。 什么是koa框架？ ? ? ? ?koa是一個基于node實現的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優雅、簡潔、表達力強、自由度...
摘要：實現的四大模塊上文簡述了源碼的大體框架結構，接下來我們來實現一個的框架，筆者認為理解和實現一個框架需要實現四個大模塊，分別是封裝創建類構造函數構造對象中間件機制和剝洋蔥模型的實現錯誤捕獲和錯誤處理下面我們就逐一分析和實現。 什么是koa框架？ ? ? ? ?koa是一個基于node實現的一個新的web框架，它是由express框架的原班人馬打造的。它的特點是優雅、簡潔、表達力強、自由度...
閱讀 2943·2023-04-25 19:20
閱讀 786·2021-11-24 09:38
閱讀 2039·2021-09-26 09:55
閱讀 2430·2021-09-02 15:11
閱讀 2014·2019-08-30 15:55
閱讀 3610·2019-08-30 15:54
閱讀 3148·2019-08-30 14:03
閱讀 2962·2019-08-29 17:11
