CS_learn/how-web-works
1
0
Fork 0
mirror of https://github.com/vasanthk/how-web-works.git synced 2026-11-01 21:14:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Rendering Engine and flow

Browse Source
This commit is contained in:
Vasa
2015-10-17 00:44:39 -07:00
parent 1249a33c8e
commit 14347a95a7
1 changed files with 47 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
README.md
View File

@@ -5,7 +5,7 @@ What happens behind the scenes when we type www.google.com in a browser?
1. **User Interface:** Includes the address bar, back/forward button, bookmarking menu, etc. Every part of the browser display except the window where you see the requested page.
2. **Browser Engine:** Marshals actions between the UI and the rendering engine.
2. **Browser Engine:** [Marshals](http://stackoverflow.com/a/5600887/1672655) actions between the UI and the rendering engine.
3. **Rendering Engine:** Responsible for displaying requested content. For eg. the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
@@ -21,6 +21,52 @@ What happens behind the scenes when we type www.google.com in a browser?
Note: Browsers such as Chrome run multiple instances of the rendering engine: one for each tab. Each tab runs in a separate process.
## Rendering Engine
A rendering engine is a software component that takes marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.) and displays the formatted content on the screen.
Browser | Engine | Current
----------------- | -------------
Chrome | Blink (a fork of WebKit)
Firefox | Gecko
Safari | Webkit
Opera | Blink (pre v15 uses Presto)
Internet Explorer | Trident
Edge | EdgeHTML
WebKit is an open source rendering engine which started as an engine for the Linux platform and was modified by Apple to support Mac and Windows.
## The Main flow
The rendering engine will start getting the contents of the requested document from the networking layer. This is usually done in 8KB chunks.
After that the basic flow of the rendering engine is:
![Rendering engine basic flow](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/flow.png)
The rendering engine will start parsing the HTML document and convert elements to [DOM](http://domenlightenment.com/) nodes in a tree called the **"content tree"**.
The engine will parse the style data, both in external CSS files and in style elements. Styling information together with visual instructions in the HTML will be used to create another tree: the **render tree**.
The render tree contains rectangles with visual attributes like color and dimensions. The rectangles are in the right order to be displayed on the screen.
After the construction of the render tree it goes through a **"layout"** process. This means giving each node the exact coordinates where it should appear on the screen.
The next stage is **painting**-the render tree will be traversed and each node will be painted using the UI backend layer.
It's important to understand that this is a gradual process. For better user experience, the rendering engine will try to display contents on the screen as soon as possible. It will not wait until all HTML is parsed before starting to build and layout the render tree. Parts of the content will be parsed and displayed, while the process continues with the rest of the contents that keeps coming from the network.
Given below is Webkit's flow:
![Webit main flow](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/webkitflow.png)
*More reading:*
[How Browsers Work: Behind the scenes of modern web browsers](http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)