Behind the scenes of modern Web Browsers

現代Web瀏覽器的幕后花絮

The Web Browser is inarguably the most common portal for users to access the web. The advancement of the web browsers (through the series of history) has led many traditional “thick clients” to be replaced by browser enhancing its usability and ubiquity. The web browser is an application that provides access to the webserver, sends a network request to URL, obtain resources, and interactively represent them. Common Browsers today include Firefox, Google Chrome, Safari, Internet Explorer and Opera.

Web瀏覽器無疑是用戶訪問Web的最常用門戶。 網絡瀏覽器的發展(經過一系列的歷史發展 )已導致許多傳統的“胖客戶端”被瀏覽器所取代，從而增強了其可用性和普遍性。 Web瀏覽器是一種應用程序，它提供對Web服務器的訪問，向URL發送網絡請求，獲取資源并以交互方式表示它們 。 今天的常見瀏覽器包括Firefox ， Google Chrome ， Safari ， Internet Explorer和Opera 。

Web瀏覽器的結構 (Structure of Web Browser)

1.用戶界面 (1. User Interface)

It is a space where interaction between user and browser (application) occurs via the control presented in the browser. No specific standards are imposed on how web browsers should look and feel. The HTML5 specification doesn’t define UI elements but lists some common elements: location bar, personal bar, scrollbars, status bar, and toolbar.

在該空間中，用戶和瀏覽器(應用程序)之間的交互通過瀏覽器中顯示的控件發生。 Web瀏覽器的外觀和感覺沒有任何特定標準。 HTML5規范沒有定義UI元素，而是列出了一些常見的元素：位置欄，個人欄，滾動條，狀態欄和工具欄。

2.瀏覽器引擎 (2. Browser Engine)

It provides a high-level interface between UI and the underlying rendering engine. It makes a query and manipulates the rendering engine based upon the user interaction. It provides a method to initiate loading the URL, takes care of reloading, back, and forward browsing action.

它在UI和基礎渲染引擎之間提供了高級接口。 它進行查詢并根據用戶交互操作渲染引擎。 它提供了一種啟動加載URL的方法，負責重新加載，后退和前進瀏覽操作。

3.渲染引擎 (3. Rendering Engine)

The Rendering Engine is responsible for displaying the content of the web page on the screen. The primary operation of a Rendering engine is to parse HTML. By default, it displays HTML, XML, and images and supports other data types via plugin or extension.

渲染引擎負責在屏幕上顯示網頁的內容。 渲染引擎的主要操作是解析HTML。 默認情況下，它顯示HTML，XML和圖像，并通過插件或擴展名支持其他數據類型。

Rendering Engine for modern web Browsers

適用于現代Web瀏覽器的渲染引擎

• Firefox — Gecko Software

  Firefox — Gecko軟件

• Safari — WebKit

  Safari — WebKit

• Chrome, Opera (15 onwards) — Blink

  Chrome，Opera(15以上)- 閃爍

• Internet Explorer — Trident

  Internet Explorer — 三叉戟

關鍵渲染路徑 (Critical Rendering Path)

To plot the pixels in the screen (first render), the browser after receiving the data (HTML, CSS, JavaScript) from the network has to go through a series of processes/techniques called Critical Rendering Path. This includes DOM, CSSOM, Render Tree, Layout, and Painting.

為了在屏幕上繪制像素(第一次渲染)，瀏覽器從網絡接收到數據(HTML，CSS，JavaScript)后，必須經過一系列稱為“關鍵渲染路徑”的過程/技術。 這包括DOM，CSSOM，渲染樹，布局和繪畫。

數據到DOM (Data to DOM)

The requested content from the networking layer is received in the rendering engine (8 kb chunks generally) in the binary stream format. The raw bytes are then converted to a character (based upon character encoding) of the HTML file.

來自網絡層的請求內容以二進制流格式在呈現引擎(通常為8 kb塊)中接收。 然后將原始字節轉換為HTML文件的字符 (基于字符編碼)。

Characters are then converted into tokens. Lexer carries out lexical analysis, breaking input into tokens. During tokenization, every start and end tags in the file are accounted for. It knows out how to strip out irrelevant characters like white space and line breaks. The parser then carries out syntax analysis, applying the language syntax rule to construct a parse tree by analyzing the document structure.

然后將字符轉換為令牌 。 Lexer進行詞法分析 ，將輸入分解為標記。 在標記化期間，將考慮文件中的每個開始和結束標記。 它知道如何去除不相關的字符，例如空格和換行符。 然后，解析器執行語法分析 ，通過分析文檔結構，應用語言語法規則來構建解析樹 。

The parsing process is iterative. It will ask the lexer for a new token and the token will be added to the parse tree if the language syntax rule match. The parser will then ask for another token. If no rule matches, the parser will store the token internally and keep asking for tokens until rule matching all the internally stored token is found. If no rule is found, then the parser will raise the exception. This means the document was not valid and contained syntax errors.

解析過程是迭代的 。 如果語言語法規則匹配，它將向詞法分析器詢問新的令牌，并將該令牌添加到解析樹。 然后解析器將要求另一個令牌。 如果沒有規則匹配，則解析器將在內部存儲令牌，并繼續請求令牌，直到找到與所有內部存儲的令牌匹配的規則。 如果未找到任何規則，則解析器將引發exception 。 這意味著文檔無效并且包含語法錯誤。

These nodes are linked in the tree data structure called DOM (Document Object Model) which establishes the parent-child relationship, adjacent sibling relationships.

這些節點在稱為DOM(文檔對象模型)的樹數據結構中鏈接，該結構建立父子關系，相鄰的兄弟關系。

從CSS數據到CSSOM (CSS Data to CSSOM)

Raw bytes of CSS data are converted into character, token, node, and finally in CSSOM (CSS Object Model). CSS has something called cascade which determines what styles are applied to the element. Styling data to the element can come from parents (via inheritance) or are set to the elements themselves. The browser has to recursively go through the CSS tree structure and determine the style of the particular element.

CSS數據的原始字節被轉換為字符，令牌，節點，最后轉換為CSSOM (CSS對象模型)。 CSS有一個稱為層疊的東西，它確定將什么樣式應用于元素。 元素數據的樣式可以來自父級(通過繼承)，也可以設置為元素本身。 瀏覽器必須遞歸地遍歷CSS樹結構并確定特定元素的樣式。

DOM和CSSOM渲染樹 (DOM and CSSOM to Render Tree)

DOM tree contains the information about HTML elements relationship and the CSSOM tree contains information on how these elements are styled. Starting from the root node the browser traverses each of the visible nodes. Some nodes are hidden (controlled via CSS) and not reflected in the rendered output. For each visible node, the browser matches the appropriate rule defined in CSSOM and finally, these nodes are emitted with their content and styling called Render tree (Layout Tree).

DOM樹包含有關HTML元素關系的信息，而CSSOM樹包含有關如何設置這些元素樣式的信息。 從根節點開始，瀏覽器遍歷每個可見節點。 有些節點是隱藏的(通過CSS控制)，不會反映在渲染的輸出中。 對于每個可見節點，瀏覽器都會匹配CSSOM中定義的適當規則，最后，這些節點將以其內容和樣式(稱為“ 渲染樹”(Layout Tree))發出。

布局 (Layout)

It then proceeds to the next level called layout. The exact size and position of each of the content should be calculated to render on a page (browser viewport). The process is also referred to as reflow. HTML uses a flow-based layout model, meaning geometry is computed in a single pass most of the time. It is a recursive process starting from the root element (<html>) of the document.

然后，它前進到稱為布局的下一個級別。 應該計算每個內容的確切大小和位置，以在頁面(瀏覽器視口)上呈現。 該過程也稱為回流 。 HTML使用基于流的布局模型，這意味著大多數情況下，幾何都是通過一次遍歷計算的。 這是一個從文檔的根元素(<html>)開始的遞歸過程。

繪畫 (Painting)

Each of the renderers is traversed and the paint method is called to display the content on the screen. The painting process can be global (painting the entire tree) or incremental (the render tree validates its rectangle on-screen) and OS generates the paint event on that specific nodes and the whole tree is not affected. Painting is a gradual process where some parts are parsed and rendered while the process continues with the rest of the item from the network.

遍歷每個渲染器，并調用paint方法以在屏幕上顯示內容。 繪制過程可以是全局的(繪制整個樹)，也可以是增量的(渲染樹在屏幕上驗證其矩形)，并且OS在該特定節點上生成繪制事件，并且整個樹均不受影響。 繪畫是一個漸進的過程，其中一些部分將被解析和渲染，而該過程將繼續處理網絡中的其余項目。

For analyzing, measuring, and optimizing Critical Rendering Path, refer here.

有關分析，測量和優化關鍵渲染路徑的信息，請參見 此處 。

4. JavaScript解釋器(JS引擎) (4. JavaScript Interpreter (JS Engine))

JavaScript is a scripting language that allows you to dynamically update the web content, control multimedia, and animated images executed by the browser’s JS engine. DOM and CSSOM provide an interface to JS which can alter both DOM and CSSOM. Since the browser is unsure what particular JS will do, it will immediately pause the DOM tree construction after it encounters the script tag. Every script is a parse blocker; the DOM tree construction is halted.

JavaScript是一種腳本語言，可讓您動態更新Web內容，控制多媒體以及由瀏覽器JS引擎執行的動畫圖像。 DOM和CSSOM提供了JS的接口，該接口可以同時更改DOM和CSSOM。 由于瀏覽器不確定特定的JS會做什么，因此在遇到script標簽后，它將立即暫停DOM樹的構建。 每個腳本都是一個解析阻止程序； DOM樹的構建被暫停。

The JS engine begins parsing the code right away after fetching from the server feeding into the JS parser. It converts them into the representative object the machine understands. The object that stores all the parser information in the tree representation of the abstract syntactic structure is called an object syntax tree (AST). The objects are fed into an interpreter which translates those objects into byte code.

從服務器獲取到JS解析器后，JS引擎立即開始解析代碼。 它將它們轉換為機器可以理解的代表性對象。 將所有解析器信息存儲在抽象語法結構的樹表示中的對象稱為對象語法樹( AST )。 這些對象被饋送到解釋器，該解釋器將這些對象轉換為字節碼。

These are Just In Time (JITs) compiler meaning JavaScript files downloaded from the server is compiled in real-time on the client’s computer. The interpreter and compiler are combined. The interpreter executes source code almost immediately; the compiler generates machine code which the client system executes directly.

它們是即時( JIT )編譯器，這意味著從服務器下載JavaScript文件是在客戶端計算機上實時編譯的。 解釋器和編譯器結合在一起。 解釋器幾乎立即執行源代碼。 編譯器生成機器代碼，客戶端系統直接執行該機器代碼。

不同的瀏覽器使用不同的JS引擎 (Different Browser uses different JS Engine)

• Chrome — V8 (JavaScript engine) (Node JS was built on top of this)

  Chrome- V8(JavaScript引擎) (Node JS建立在此之上)

• Mozilla — SpiderMonkey (formerly known as ‘Squirrel Fish’)

  Mozilla- SpiderMonkey (以前稱為“ 松鼠魚 ”)

• Microsoft Edge — Chakra

  Microsoft Edge-查克拉

• Safari — JavaScriptCore / Nitro WebKit

  Safari- JavaScriptCore / Nitro WebKit

5. UI后端 (5. UI Back End)

It is used for drawing a basic widget like combo boxes and windows. Underneath it uses operating system user interface methods. It exposes a generic platform that is not platform-specific.

它用于繪制基本的窗口小部件，如組合框和窗口。 它的下面使用操作系統用戶界面方法。 它公開了不是特定于平臺的通用平臺。

6.數據存儲 (6. Data Storage)

This layer is persistent which helps the browser to store data (like cookies, session storage, indexed DB, Web SQL, bookmarks, preferences, etc). The new HTML5 specification describes a database that is a complete database in a web browser.

該層是持久層，可幫助瀏覽器存儲數據(例如Cookie，會話存儲，索引數據庫，Web SQL，書簽，首選項等)。 新HTML5規范描述了一個數據庫，該數據庫是Web瀏覽器中的完整數據庫。

7.聯網 (7. Networking)

It handles all kinds of network communication within the browser. It uses a set of communication protocols like HTTP, HTTPs, FTP while fetching the resource from requested URLs.

它處理瀏覽器內的各種網絡通信。 它從請求的URL提取資源時使用HTTP，HTTPs，FTP等一組通信協議。

Web Browser relies on DNS to resolve the URLs. The records are cached in the browser, OS, router, or ISP. If the requested URL is not cached in, the ISP DNS server initiates the DNS query to find the IP of that server. After receiving the correct IP address the browser establishes the connection with the server with protocols. The browser sends the SYN(synchronize) packet to the server asking if it is open for TCP connection. The server responds with ACK(acknowledgment) of the SYN packet using the SYN/ACK packet.

Web瀏覽器依靠DNS來解析URL。 記錄被緩存在瀏覽器，操作系統，路由器或ISP中。 如果未緩存請求的URL，則ISP DNS服務器將啟動DNS查詢以查找該服務器的IP。 收到正確的IP地址后，瀏覽器將使用協議與服務器建立連接。 瀏覽器將SYN(同步)數據包發送到服務器，詢問它是否已打開以進行TCP連接。 服務器使用SYN / ACK數據包以SYN數據包的ACK(確認)響應。

The browser receives an SYN/ACK packet from the server and will acknowledge by sending an ACK packet. Then TCP connection is established for data communication. Once the connection is established, data transfer is ready. To transfer the data, the connection must meet the requirements of HTTP Protocol including connection, messaging, request, and response rules.

瀏覽器從服務器接收到SYN / ACK數據包，并將通過發送ACK數據包進行確認。 然后建立TCP連接以進行數據通信。 建立連接后，就可以進行數據傳輸了。 要傳輸數據，連接必須滿足HTTP協議的要求，包括連接，消息傳遞，請求和響應規則。

渲染阻止和解析器阻止資源 (Render Blocking and Parser Blocking Resources)

Whenever the Browser encounters an element for loading external CSS a request is sent over the network to fetch the .css file asynchronously. It will move immediately (without waiting for CSS resources to be downloaded) to parse elements below it and the DOM construction process is not halted. However, even after DOM tree construction without CSSOM being ready, the Browser won’t render anything into the screen. In order to render, both DOM and CSSOM have to be constructed. Hence HTML and CSS both are both render-blocking resources. Rendering Content without CSS being fully loaded cause Flash Of Unstyled Content (FOUC).

每當瀏覽器遇到加載外部CSS的元素時，都會通過網絡發送請求以異步方式獲取.css文件。 它會立即移動(無需等待CSS資源下載)以解析其下面的元素，并且DOM構造過程不會停止 。 但是，即使在尚未準備好CSSOM的情況下構造DOM樹之后，瀏覽器也不會在屏幕上呈現任何內容 。 為了進行渲染，必須同時構建DOM和CSSOM 。 因此，HTML和CSS都是渲染阻止資源 。 在未完全加載CSS的情況下呈現內容會導致樣式樣式內容(FOUC)泛濫 。

However, that is not the case with Javascript. Whenever the browser encounters a script tag, the DOM construction process is immediately paused until the Js file is downloaded and executed. This is because JavaScript has the capability to alter the parsing of subsequent markup (DOM, CSSOM). This makes Javascript a parser-blocking resource.

但是，Java并非如此。 每當瀏覽器遇到腳本標簽時， DOM構造過程都會立即暫停，直到下載并執行Js文件為止 。 這是因為JavaScript能夠更改后續標記(DOM，CSSOM)的解析。 這使Javascript成為了解析器阻止資源 。

在腳本中延遲和異步 (Defer and Async in Script)

Both defer and async attributes help the developer to specify the asynchronous mode of Javascript Execution.

defer和async屬性都可以幫助開發人員指定Javascript執行的異步模式。

投機解析 (Speculative Parsing)

As we have seen whenever a script is encountered, parsing is paused. This will introduce a delay in discovering the rest of the resources. In 2008, Microsoft introduced the concept of preloading named “lookahead downloader” followed by Firefox, Chrome, and Safari the same technique under different names. Chrome and Safari have “the preload scanner” and Firefox — the speculative parser.

如我們所見，每當遇到腳本時，分析就會暫停。 這將導致發現其余資源的延遲。 在2008年，Microsoft引入了預加載的概念，稱為“ 先行下載器 ”，隨后Firefox，Chrome和Safari以不同的名稱使用了相同的技術。 Chrome和Safari具有“ 預加載掃描器 ”和Firefox( 投機解析器) 。

The basic idea is discovered files are added to a list and start downloading in the background on parallel connections. The files may be available by the time script finishes execution. Here the next lightweight parser scans the rest of the markup looking for other required resources. In the case of other Browsers except for Firefox the contents are preloaded but Firefox (version 4 onwards )goes a step ahead to create a DOM tree speculatively. If speculation succeeds, there is no need to re-parse part of the file constitution DOM. The downside is that if speculation fails, there is more work lost.

基本思想是將發現的文件添加到列表中，并在并行連接的后臺開始下載。 腳本完成執行時，這些文件可能可用。 在這里，下一個輕量級解析器將掃描其余的標記，以查找其他所需資源。 對于除Firefox以外的其他瀏覽器，其內容已預加載，但Firefox(第4版及更高版本)向前邁進了一步，以推測方式創建DOM樹 。 如果推測成功，則無需重新解析文件組成DOM的一部分。 不利的一面是，如果投機失敗，將會失去更多工作。

為什么同一網站在瀏覽器中看起來有所不同？ (Why does the same website looks different across Browsers?)

Many factors come into play for the discrepancy of the same web pages across different Browsers. As different browsers have different Browser engines (Render Engine and Javascript Engine collectively) that interpret source code (HTML and CSS) in slightly different ways causing this inconsistency. Similarly, the styling of web pages often guided by default settings can lead to the discrepancy as the default settings are different across Browsers.

相同網頁在不同瀏覽器中的差異有許多因素起作用。 由于不同的瀏覽器具有不同的瀏覽器引擎 (統稱為渲染引擎和Javascript引擎)，它們以略有不同的方式解釋源代碼(HTML和CSS)，從而導致這種不一致 。 同樣，由于默認設置在不同瀏覽器中的不同，通常以默認設置為指導的網頁樣式也會導致差異。

Other reasons for the disparity include computer settings (screen resolution, color balancing, OS-level differences, fonts), bugs in the engine, and bugs in the web page.

造成差異的其他原因包括計算機設置(屏幕分辨率，顏色平衡，操作系統級別的差異，字體)，引擎中的錯誤以及網頁中的錯誤。

瀏覽器比較 (Comparison of Browsers)

There are many different web browsers in the market today. Although the primary application of the browser is the same, they differ from each other in more than one aspect. The distinguishing areas are platform(Linux, Windows, Mac, BSD, and other Unix), protocols, graphical user interface (Real, Headless), HTML5, open-source, and proprietary, explained in detail here.

當今市場上有許多不同的Web瀏覽器。 盡管瀏覽器的主要應用程序是相同的，但它們在一個以上的方面彼此不同。 區別區域包括平臺(Linux，Windows，Mac，BSD和其他Unix)，協議，圖形用戶界面(Real， Headless )，HTML5，開源和專有，在此進行詳細說明。

瀏覽愉快！！！ (Happy Browsing!!!)