瀏覽器詳解

Amos 發布于2019-08-22 15:11 / 835人閱讀

摘要：渲染引擎也稱為呈現引擎瀏覽器內核，負責顯示請求的內容。引擎是基于事件驅動單線程執行的，引擎一直等待著任務隊列中任務的到來，然后加以處理，瀏覽器無論什么時候都只有一個線程在運行程序。

1 瀏覽器結構

瀏覽器分為以下7個部分：

用戶界面

瀏覽器引擎：在用戶界面和呈現引擎之間傳送指令。

渲染引擎：也稱為呈現引擎/瀏覽器內核，負責顯示請求的內容。

不同的瀏覽器有不同的呈現引擎，例如：
Chrome: Blink。Blink是Webkit的一個分支，添加了一些優化新特性。
Safari: Webkit
Firfox: Gecko
IE: Trident

網絡：用于網絡調用，比如 HTTP 請求。

用戶界面后端：用于繪制基本的窗口小部件，比如組合框和窗口。

JavaScript 解釋器：用于解析和執行 JavaScript 代碼。又稱為 JavaScript 引擎，也可以成為 JavaScript 內核，在線程方面又稱為 JavaScript 引擎線程。

同樣不同的瀏覽器有不同的JS解釋器，例如：
Chrome: V8引擎。之前是機器碼，最近重回字典碼
Safari: JavaScriptCore引擎
Firfox: Ion引擎
PS：不同瀏覽器間引擎性能差距不大，詳見https://arewefastyet.com

數據存儲：這是持久層。瀏覽器需要在硬盤上保存各種數據，例如 Cookie。

2 瀏覽器占比 2.1 PC瀏覽器占比

2018年2月份占比

2.2 移動瀏覽器占比

3 渲染引擎詳解

瀏覽器渲染引擎最重要的工作就是將 HTML 和 CSS 文檔解析組合最終渲染到瀏覽器窗口上。如下圖所示：

解析 HTML 構建 DOM 樹時渲染引擎會將 HTML 文件的便簽元素解析成多個 DOM 元素對象節點，并且將這些節點根據父子關系組成一個樹結構。同時 CSS 文件被解析成 CSS 規則表，然后將每條 CSS 規則按照「從右向左」的方式在 DOM 樹上進行逆向匹配，生成一個具有樣式規則描述的 DOM 渲染樹。接下來就是將渲染樹進行布局、繪制的過程。首先根據 DOM 渲染樹上的樣式規則，對 DOM 元素進行大小和位置的定位，關鍵屬性如position;width;margin;padding;top;border;...，接下來再根據元素樣式規則中的color;background;shadow;...規則進行繪制。

另外，這個過程是逐步完成的，為了更好的用戶體驗，渲染引擎將會盡可能早的將內容呈現到屏幕上，并不會等到所有的 html 都解析完成之后再去構建和布局 render 樹。它是解析完一部分內容就顯示一部分內容，同時，可能還在通過網絡下載其余內容。

再者，需要注意的是，在瀏覽器渲染完首屏頁面后，如果對 DOM 進行操作會引起瀏覽器引擎對 DOM 渲染樹的重新布局和重新繪制，我們叫做「重排」和「重繪」，由于重排和重繪是前后依賴的關系，重繪發生時未必會觸發渲染引擎的重排，但是如果發生了重排就必然會觸發重繪操作，這樣帶來的性能損害就是巨大的。因此我們在做性能優化的時候應該遵循「避免重排；減少重繪」的原則。[1]

4 瀏覽器的進程與線程 4.1 瀏覽器的進程

在瀏覽器剛被設計出來的時候，那時的網頁非常的簡單，每個網頁的資源占有率是非常低的，因此一個進程處理多個網頁時可行的。然后在今天，大量網頁變得日益復雜。把所有網頁都放進一個進程的瀏覽器面臨在健壯性，響應速度，安全性方面的挑戰。因為如果瀏覽器中的一個tab網頁崩潰的話，將會導致其他被打開的網頁應用。另外相對于線程，進程之間是不共享資源和地址空間的,所以不會存在太多的安全問題，而由于多個線程共享著相同的地址空間和資源,所以會存在線程之間有可能會惡意修改或者獲取非授權數據等復雜的安全問題。
因此Chrome瀏覽器針對每一個tab頁簽，都開了一個進程。

4.2 瀏覽器的線程

瀏覽器的內核是多線程的，它們在內核控制下相互配合以保持同步，一個瀏覽器大概會有以下幾個線程：JavaScript引擎線程，GUI渲染線程（又稱為UI主線程），瀏覽器事件觸發線程，異步 HTTP 請求線程（Chrome最多并發6個）。

JavaScript引擎是基于事件驅動單線程執行的，JavaScript引擎一直等待著任務隊列中任務的到來，然后加以處理，瀏覽器無論什么時候都只有一個JavaScript線程在運行JavaScript程序。

var isEnd = true;
window.setTimeout(function () {
    isEnd = false;//1s后，改變isEnd的值
}, 1000);
//這個while永遠的占用了js線程，所以setTimeout里面的函數永遠不會執行
while (isEnd);

GUI渲染線程負責渲染瀏覽器界面，當界面需要重繪（Repaint）或由于某種操作引發回流(Reflow)時，該線程就會執行。但需要注意，GUI渲染線程與JavaScript引擎是互斥的，當JavaScript引擎執行時GUI線程會被掛起，GUI更新會被保存在一個隊列中等到JavaScript引擎空閑時立即被執行。

事件觸發線程，當一個事件被觸發時，該線程會把事件添加到待處理隊列的隊尾，等待JavaScript引擎的處理。這些事件可來自JavaScript引擎當前執行的代碼塊如setTimeout、也可來自瀏覽器內核的其他線程如鼠標點擊、Ajax異步請求等，但由于JavaScript的單線程關系，所有這些事件都得排隊等待JavaScript引擎處理（當線程中沒有執行任何同步代碼的前提下才會執行異步代碼）。[2]

console.log(1)
setTimeout(function() {
    console.log(2)
}, 0)
console.log(3) // 輸出結果1,3,2

4.3 開啟額外的線程-Web Worker

如下圖，耗時JS的同步加載會阻攔頁面的渲染，這時候如果有一個線程可以處理這個耗時js就好了。Web Worker可以創建一個新的進程，來和UI主線程并發運行。但是這個新進程不能操作Dom對象, 只能用來處理復雜的JS的操作。

使用方法：

// main.js
var worker = new Worker("task.js");
worker.postMessage(
        {
            id:1,
            msg:"Hello World"
        }
);
worker.onmessage=function(message){
    var data = message.data;
    console.log(JSON.stringify(data));
    worker.terminate();
};
worker.onerror=function(error){
    console.log(error.filename,error.lineno,error.message);
}
// task.js
onmessage = function(message){
    var data=message.data;
    data.msg = "Hi from task.js";
    postMessage(data);
}

可以看到，兩個js之間通過事件通訊。盡管Web Worker在大量數據的檢索、數據運算上能提供一些幫助，但是使用面還是比較窄的。

5 頁面加載優化

《雅虎前端優化35條規則翻譯》
《優化JavaScript執行》

云服務器 GPU云服務器判斷詳解日志詳解屬性詳解算法詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93245.html

HTML中meta標簽詳解；property=og標簽詳解

摘要：是用來在文檔中模擬協議的響應頭報文。標簽是語言區的一個輔助性標簽，它位于文檔頭部的標記和標記之間，它提供用戶不可見的信息。 meta是用來在HTML文檔中模擬HTTP協議的響應頭報文。META標簽是HTML語言HEAD區的一個輔助性標簽，它位于HTML文檔頭部的標記和標記之間，它提供用戶不可見的信息。meta標簽通常用來為搜索引擎robots定義頁面主題，或者是定義用戶瀏覽器上的coo...

Little_XM 2019-08-01 15:11 評論0 收藏0
web響應式布局之 meta詳解

摘要：響應式布局詳解之標簽添加的屬性詳解表示設置屏幕按的尺寸顯示，在和其他智能手機的瀏覽器提供網站全視圖瀏覽，并禁止用戶縮放頁面。這個是的專用標記，是用來指定瀏覽器模擬某個特定版本瀏覽器的渲染方式，以此來解決瀏覽器的兼容問題。響應式布局詳解之head標簽添加的屬性詳解表示:設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，并禁止用戶縮放頁面。表...

yuanzhanghu 2019-08-30 15:52 評論0 收藏0
web響應式布局之 meta詳解

摘要：響應式布局詳解之標簽添加的屬性詳解表示設置屏幕按的尺寸顯示，在和其他智能手機的瀏覽器提供網站全視圖瀏覽，并禁止用戶縮放頁面。這個是的專用標記，是用來指定瀏覽器模擬某個特定版本瀏覽器的渲染方式，以此來解決瀏覽器的兼容問題。響應式布局詳解之head標簽添加的屬性詳解表示:設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，并禁止用戶縮放頁面。表...

shixinzhang 2019-08-01 16:20 評論0 收藏0
「JavaScript」JS兩種服務端相關跨域方法詳解

摘要：之前我們講了一下四種跨域的方式四種跨域方式詳解。這四種方式是使用純來進行跨域的。今天就介紹兩種有涉及到服務器的跨域技術。之前我們講了一下四種 JavaScript 跨域的方式 - 「JavaScript」四種跨域方式詳解。這四種方式是使用純 JavaScript 來進行跨域的。今天就介紹兩種有涉及到服務器的跨域技術。一、反向代理服務器基礎思想很簡單，將你的服務器配置成需要跨域...

kid143 2019-08-21 10:39 評論0 收藏0