從程序 執行緒開始,重新梳理瀏覽器知識

2021-10-04 06:04:39 字數 2435 閱讀 8704

前面的話

以前對瀏覽器的程序、執行緒,瀏覽器如何渲染頁面以及js單執行緒知識都是分部分學習,這篇文章從瀏覽器程序、執行緒開始到js引擎的執行機制重新梳理一遍。

瀏覽器的組成部分

先來看看瀏覽器主要組成部分

瀏覽器引擎: 在使用者介面和渲染引擎之間傳遞指令。

渲染引擎(瀏覽器核心):用來渲染頁面,負責解析html、css,解析完畢之後現在在螢幕中。

js引擎(js直譯器):用於解析和執行js**。比如chrome的js引擎是v8.

注釋: 常見的主流瀏覽器的渲染引擎(瀏覽器核心)

執行緒與程序

瀏覽器的多程序

瀏覽器是多程序的,每個程序都被分配了資源(cpu、記憶體)。(以前瀏覽器是單程序的)

這裡列舉瀏覽器的主要程序:

渲染程序: 每乙個tab頁面就是乙個程序,互不影響(注意:多個空白頁合併乙個程序)。

gpu程序:最多乙個,用於3d繪製。

第三方外掛程式程序: 每種型別的外掛程式對應乙個程序

網路程序:負責頁面的網路資源載入

多程序優勢:

多程序缺點:

會為不同的程序分配記憶體、cpu等資源。由於不同程序間的記憶體不共享,不同程序的記憶體常常需要包含相同的內容

注釋:瀏覽器程序之間的通訊

通過 ipc 的方式進行程序間通訊:

渲染程序中的多執行緒

上面說了,乙個tab頁面就是乙個渲染程序。而乙個渲染程序包含多個執行緒來協助工作。

主要執行緒:

注釋:瀏覽器渲染流程

ps:

合成:遍歷布局樹建立層樹,新增了will-change的屬性元素,會看做單獨的一層。層樹被建立,渲染順序被確定後,合成器執行緒將圖層劃分為圖塊,並將每個圖塊傳送到柵格執行緒。柵格執行緒會柵格化每乙個圖塊**為位圖)並儲存在gpu視訊記憶體中。 所有的圖塊變成點陣圖後,合成器執行緒會收集位圖資訊建立合成幀,合成幀通過ipc協議傳遞給瀏覽器主程序,瀏覽器主程序收到訊息後,會將頁面內容繪製到記憶體中,最後再將記憶體顯示在螢幕上。

ps: 柵格化(光柵化): 將幾何資訊轉換為螢幕上的畫素的過程。

總結:

合成執行緒 (處理每一層) --> 將圖層分為圖塊--> 柵格執行緒 --> 被柵格化後成為位圖 --> 合成執行緒收集位圖 --> 合成幀 --> ipc通知瀏覽器主程序 --> 頁面繪製到記憶體 --> 將記憶體顯示到螢幕。

注釋:

瀏覽器如何解析css選擇器?

瀏覽器會『從右往左』解析css選擇器。 因為從右向左的匹配在第⼀步就篩選掉了⼤量的不符合條件的最右節點(葉子節點);⽽從左向右的匹配規則的效能都浪費在了失敗的查詢上面。

瀏覽器的阻塞渲染

domcontentloaded與load事件

合成圖層

前面的渲染中提到了合成:

合併圖層(composite):在繪製時,頁面中dom元素是在多個層上進行繪製的。在每個層上完成繪製之後,瀏覽器會將所有層按照合理的順序合併在乙個圖層上,然後在顯示在螢幕上。

瀏覽器渲染圖層分為兩類:普通圖層復合圖層.在gpu中,各圖層是單獨繪製的,互不影響。

如何變成復合圖層(硬體加速):

只要是上述中的一種(上面只列舉了常見的),就會建立復合圖層。

提公升合成層的最好方式是使用 css 的 will-change 屬性。從上一節合成層產生原因中,可以知道 will-change 設定為 opacity、transform、top、left、bottom、right 可以將元素提公升為合成層。

#target
開啟硬體加速,盡量加乙個z-index

使用3d硬體加速提公升動畫效能時,最好給元素增加乙個z-index屬性,人為干擾合成的排序,可以有效減少chrome建立不必要的合成層,提公升渲染效能,移動端優化效果尤為明顯。

復合圖層的優點與缺點

優點:復合圖層的元素都是單獨繪製,不會影響其他圖層元素的繪製。

缺點:會消耗額外的記憶體和管理資源

js單執行緒

說單執行緒,又要提到事件迴圈機制。這裡又可以說一大堆了,小柒前面總結過這裡就不總結了。

戳這:js事件迴圈機制

從心開始,重新出發。

滴水穿石 知恥而後勇,溫故而知新。重新出發 說來慚愧,2017的第一篇blog不但是現在才開始,而且還不是技術文章。年前說好的那篇雖然 敲完了,但是並沒有後續文章了,只是發到了自己的github上面。關於換工作 說來話長,就現在的工作經驗而言,找個工作確實不容易,還好可能運氣復甦,離職第二天就找到了...

SQL Server ID自增列重新從1開始算起

sql server id自增列重新從1開始算起 資料庫原有id欄位,是自增列的,後來把資料全刪除後,想讓id自增列從1開始算起 方法1 1.dbcc checkident test reseed,0 2.insert into test values 55 select from test 顯示結...

ACCESS自動編號重新從1開始

方法一 刪掉自動編號的字段,再建乙個同樣的自動編號字段。方法二 選擇工具,再選擇資料庫實用工具,單擊壓縮和修復資料庫,這樣就ok了.方法三 提示錯誤 無效的資料字段型別 嘗試失敗 1 在access裡新建乙個查詢。2 把檢視改為sql檢視。3 在裡面輸入 alter table 表名 alter c...