[toc] #### 進程和線程 + 程序 被cpu執行的代碼，程序存儲在磁盤上 + 進程 在內存中運行的程序，cpu資源分配的最小單位 + 線程 一個進程可以有多個線程，線程是cpu調度的最小單位 #### 瀏覽器包含哪些進程 每次打開一個tab，相當于創建了一個獨立的瀏覽器進程 1. Browser進程：瀏覽器主進程 + 負責瀏覽器的界面顯示，用戶交互，前進后退等 + 負責各個頁面的管理，創建和銷毀 + 網絡資源的管理，下載 2. 瀏覽器渲染進程（瀏覽器內核進程) + 瀏覽器渲染進程內部是多線程的 + 頁面渲染，腳本執行，事件處理 3. 第三方插件進程：僅當插件使用時創建 4. GPU進程：最多一個，用于3D繪制 5. SharedWorker進程：webWorker屬于渲染進程中的一個線程，是為當前tab進程解析js，而SahredWorker為所有的tab提供 #### 瀏覽器渲染進程 渲染進程是多線程的 1. GUI渲染線程 + 渲染界面，解析html, css, 構建dom樹和renderObject樹，布局和繪制 + 重繪和回流會觸發渲染線程 + GUI渲染線程和js引擎線程是互斥的，當js引擎執行時，gui線程會被掛起，gui更新會被保存在一個隊列里，等到js引擎空閑時執行 2. JS引擎線程 + 也稱js內核，處理javascripts腳本程序, v8引擎 + 負責解析javascript腳本，運行代碼 + 一個tab頁中永遠只有一個js線程在運行js程序 + js引擎線程會造成gui渲染線程的掛起，阻塞加載 3. 事件觸發線程 + 歸屬于瀏覽器，而不是js引擎，用來控制事件循環 + 當js引擎執行代碼塊，如setTimeOut，鼠標點擊，ajax異步請求時，會將對應的任務添加到事件線程中 + 當對應的事件符合觸發條件時，會被事件線程添加到待處理隊列的隊尾，等待js引擎的處理 4. 定時器線程 + setInterval和setTimeout所在線程 + js引擎解析到setTimeout的時候，會交給定時器線程處理，等到計時完畢后，添加到事件隊列中 5. 異步http請求線程 + 在XMLHttpRequest在連接后通過瀏覽器新開了一個線程請求 + 檢測到狀態變更時，如果存在回調函數，異步線程就會產生狀態變更事件，將這個回調函數放到事件隊列中。再有js引擎執行 6. WebWorker線程 #### GUI渲染線程和JS引擎線程為什么互斥? 由于js可以操作dom，如果修改dom的同時渲染界面，那么有可能出現渲染線程前后獲得的元素數據不一致 #### WebWorker + js引擎向瀏覽器申請開一個子線程(worker線程)執行js文件，這個子線程不是js引擎線程，所以不能操作dom + js引擎線程與worker線程通過postMessage API通信，worker線程不會阻塞js引擎主線程，也不會阻塞GUI線程，所以不會阻塞dom和js #### 瀏覽器渲染流程-renderer進程/渲染進程 1.解析html，構建dom樹 2.解析css，結合dom樹構建render樹 3.布局render樹，計算元素的尺寸和位置 layout 4.繪制render樹，繪制頁面像素信息 painting 5.瀏覽器將各層的信息發送給gpu，gpu將各層合成，顯示在屏幕上 #### 普通圖層和復合圖層 absolute和fixed雖然可以脫離文檔流，但任然屬于默認復合層 硬件加速will-change，可以單獨分配資源，會在上面添加一個新的復合圖層，這個里面的變化不會影響外界的重繪重排 #### 從Event Loop談js的運行機制 js引擎是單線程的，在執行過程中會遇到setTimeout，promise等異步異步任務