瀏覽器的渲染進程的線程總共有五種:
(1)GUI渲染線程 負責渲染瀏覽器頁面,解析HTML、CSS,構建DOM樹、構建CSSOM樹、構建渲染樹和繪制頁面;當界面需要重繪或由于某種操作引發回流時,該線程就會執行。
注意:GUI渲染線程和JS引擎線程是互斥的,當JS引擎執行時GUI線程會被掛起,GUI更新會被保存在一個隊列中等到JS引擎空閑時立即被執行。
(2)JS引擎線程 JS引擎線程也稱為JS內核,負責處理Javascript腳本程序,解析Javascript腳本,運行代碼;JS引擎線程一直等待著任務隊列中任務的到來,然后加以處理,一個Tab頁中無論什么時候都只有一個JS引擎線程在運行JS程序;
注意:GUI渲染線程與JS引擎線程的互斥關系,所以如果JS執行的時間過長,會造成頁面的渲染不連貫,導致頁面渲染加載阻塞。
(3)時間觸發線程時間觸發線程屬于瀏覽器而不是JS引擎,用來控制事件循環;當JS引擎執行代碼塊如setTimeOut時(也可是來自瀏覽器內核的其他線程,如鼠標點擊、AJAX異步請求等),會將對應任務添加到事件觸發線程中;當對應的事件符合觸發條件被觸發時,該線程會把事件添加到待處理隊列的隊尾,等待JS引擎的處理;
注意:由于JS的單線程關系,所以這些待處理隊列中的事件都得排隊等待JS引擎處理(當JS引擎空閑時才會去執行);
(4)定時器觸發進程定時器觸發進程即setInterval與setTimeout所在線程;瀏覽器定時計數器并不是由JS引擎計數的,因為JS引擎是單線程的,如果處于阻塞線程狀態就會影響記計時的準確性;因此使用單獨線程來計時并觸發定時器,計時完畢后,添加到事件隊列中,等待JS引擎空閑后執行,所以定時器中的任務在設定的時間點不一定能夠準時執行,定時器只是在指定時間點將任務添加到事件隊列中;
注意:W3C在HTML標準中規定,定時器的定時時間不能小于4ms,如果是小于4ms,則默認為4ms。
(5)異步http請求線程
XMLHttpRequest連接后通過瀏覽器新開一個線程請求;
檢測到狀態變更時,如果設置有回調函數,異步線程就產生狀態變更事件,將回調函數放入事件隊列中,等待JS引擎空閑后執行;