瀏覽器核心有什麼用（核心瀏覽器是什麼意思）

2023-06-06 05:53:07

一. 瀏覽器核心

瀏覽器的功能：顯示在計算機中的網頁實際上是位於許多不同的計算機檔案中的元素的集合。因此，瀏覽器的功能首先是檢索檔案，然後將頁面的各個部分組合起來，根據文字中的HTML命令排列這些部分。

瀏覽器核心分為兩部分：渲染引擎 和 JavaScript引擎。其中，渲染引擎是瀏覽器核心中比較重要的部分，現在所說的核心一般指的都是渲染引擎。

常見的瀏覽器核心：

四大核心：

1、Trident核心，也稱IE核心。

2、Webkit核心。

3、Gecko核心。

4、Presto核心。

各瀏覽器所用核心：

1、IE瀏覽器核心：Trident核心，也是俗稱的IE核心；

2、Chrome瀏覽器核心：統稱為Chromium核心或Chrome核心，以前是Webkit核心，現在是Blink核心；

3、Firefox瀏覽器核心：Gecko核心，俗稱Firefox核心；

4、Safari瀏覽器核心：Webkit核心；

5、Opera瀏覽器核心：最初是自己的Presto核心，後來是Webkit，現在是Blink核心；

6、360瀏覽器、獵豹瀏覽器核心：IE Chrome雙核心；

7、搜狗、遨遊、QQ瀏覽器核心：Trident（相容模式） Webkit（高速模式）；

8、百度瀏覽器、世界之窗核心：IE核心；

9、2345瀏覽器核心：以前是IE核心，現在也是IE Chrome雙核心；

二. 瀏覽器顯示頁面的步驟

1. 從網路層（networking）獲取請求文件的內容，解析HTML/SVG/XHTML，形成一個DOM樹(DOM Tree)

預設情況下，載入和執行javascript都會阻止DOM tree的構建。

內部js指令碼會在引入它的位置執行，外聯指令碼則是載入完畢後執行。

注意：因此，不管是內聯指令碼還是外部指令碼，都應該儘量放在標籤結束之前（除非某些指令碼需要在頁面載入完之前呼叫），這樣可以保證在執行指令碼之前，頁面已經基本載入完成。

2. 解析CSS程式碼，計算出最終的樣式資料，產生一個CSS規則樹(CSS Rule Tree)

解析CSS的時候的順序：瀏覽器預設設定，使用者設定，外鏈樣式，內聯樣式，html中的style

3. 解析JavaScript

通過DOM API來操作DOM Tree，通過CSSOM API來操作CSS Rule Tree

4. 解析完上述三種程式碼之後，就構建一個渲染樹 (rendering tree)

渲染樹和DOM樹有所不同：

渲染樹中不包括不需要渲染的節點 : html head meta link style script display : none的元素，渲染樹中每一個節點都儲存有對應的CSS屬性，載入css會阻止render tree的構建

5. 開始渲染，頁面初始化時會發生一次迴流。

三. 頁面的重繪和迴流

1. 什麼是頁面的重繪和迴流

迴流：當render tree中的一部分(或全部)因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建。（需要改變佈局、幾何屬性）

重繪：當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。則就叫稱為重繪。

因此迴流必定影響重繪，重繪不一定引起迴流。迴流比重繪的代價要更高

2. 迴流何時發生

當頁面佈局和幾何屬性改變時就需要回流。下述情況會發生瀏覽器迴流：

1、新增或者刪除可見的DOM元素；

2、元素位置改變；

3、元素尺寸改變——邊距、填充、邊框、寬度和高度

4、內容改變——比如文字改變或者圖片大小改變而引起的計算值寬度和高度改變；

5、頁面渲染初始化；

6、瀏覽器視窗尺寸改變——resize事件發生時；（所以需要函式節流）

3. 瀏覽器對迴流和重繪做的優化工作

瀏覽器會維護1個佇列，把所有會引起迴流、重繪的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會釋放佇列，進行一個批處理。這樣就會讓多次的迴流、重繪變成一次迴流重繪。(有點類似文件碎片frameElement感覺)

雖然有了瀏覽器的優化，但有時候我們寫的一些程式碼可能會強制瀏覽器提前釋放佇列，這樣瀏覽器的優化可能就起不到作用了。當你請求向瀏覽器請求一些 style資訊的時候，就會讓瀏覽器釋放佇列，比如：

offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop/Left/Width/Height clientTop/Left/Width/Height width,height 請求了getComputedStyle(), 或者 IE的 currentStyle

當你請求上面的一些屬性的時候，瀏覽器為了給你最精確的值，需要釋放佇列，因為佇列中可能會有影響到這些值的操作。即使你獲取元素的佈局和樣式資訊跟最近發生或改變的佈局資訊無關，瀏覽器都會強行重新整理渲染佇列。

4. 減少迴流reflow和重繪repaint

(1) 不要一條一條修改DOM的樣式

替換方法：

預先定義好css，然後修改DOM的className，修改style的style.cssText

(2) 把DOM離線後修改

先把DOM給display:none(有一次reflow)，然後你想怎麼改就怎麼改。比如修改100次，然後再把他顯示出來。clone一個DOM結點到記憶體裡，然後想怎麼改就怎麼改，改完後，和線上的那個的交換一下。

(3) 不要把DOM結點的屬性值放在一個迴圈裡當成迴圈的變數。

(4) 儘可能修改層級比較低的DOM

(5) 為動畫的HTML元素使用fixed或者absolute的position

修改他們的CSS是不會reflow的，因為使用fixed或者absolute的元素會脫離文件流

(6) 千萬不要使用table佈局

注意：CSS匹配DOM Tree主要是從右到左解析CSS的Selector，CSS匹配HTML元素是一個相當複雜和有效能問題的事情。DOM樹要小，CSS儘量用id和class，千萬不要過渡層疊下去。

歡迎關注。