Rendering engine
4 likes3,057 views
The document details the architecture and functioning of rendering engines in web browsers, explaining their role in translating and displaying web content. It covers different rendering engines associated with popular browsers, including Blink, Gecko, and WebKit, and outlines the general flow of operations from URL retrieval to graphical representation. Additionally, it describes the components involved in the browsing experience, such as the browser engine, user interface, and networking functionalities.
Rendering engine
- 1. Click to add Title Rendering Engine e-Infochips Institute of Training Research and Academics Limited Prepared By:- Dharita Chokshi
- 2. Outlines Rendering Engines Rendering Engines and Browsers Architecture of Browser Architecture of Rendering Engine Anatomy of Webkit Architecture of Webkit
- 3. Rendering Engine Means? Rendering means to translate or to interpret into another language. A rendering engine (also called layout engine or web browser engine) is a software component that takes marked up content (like HTML, XML, image files, etc.) and formatting information (like CSS, XSL, etc.) and displays the formatted content on the screen. It essentially takes a URL and a set of window content- area rectangle coordinates as arguments. It then retrieves the document corresponding to the URL and paints a graphical representation of it in the given rectangle.
- 4. Rendering Engines and Browsers Rendering Engine Leading Host Applications/Browsers Programming Language Blink Google Chrome(from version 28), Opera(from version 15.0) C++ Gecko Mozilla Firefox C++ Webkit Apple Safari, BlackBerry, Android and Google Chrome(till version 27) C++ Presto Opera(till version 14) C++ Trident Internet Explorer C++ The host application provides the menu bar, address bar, status bar, bookmark manager, history and preferences functionality.
- 6. Architecture of Browser The User Interface Provides the methods with which a user interacts with the Browser Engine. This 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. 6
- 7. The Browser Engine Marshals actions between the UI and the rendering engine providing a high-level interface to the Rendering Engine. The Browser Engine provides methods to initiate the loading of a URL and other high-level browsing actions (reload, back, forward). The Browser Engine also provides the User interface with various messages relating to error messages and loading progress. 7 Architecture of Browser
- 8. The Rendering Engine Produces the visual representation of a given URL. The Rendering Engine interprets the HTML, XML, and JavaScript that comprises a given URL and generates the layout that is displayed in the User Interface. The Networking Provides functionality to handle retrieve URLs using the common Internet protocols of HTTP and FTP. The Networking components handles all aspects of Internet communication and security, character set translations and MIME type resolution. 8 Architecture of Browser
- 9. The JavaScript Interpreter Component executes the JavaScript code that is embedded in a website. Results of the execution a passed to the Rendering Engine for display. The Rendering Engine may disable various actions based on user defined properties. The UI Backend: Used for drawing basic widgets like combo boxes and windows. Underneath it uses operating system user interface methods. The Data Storage: Manages user data such as bookmarks, cookies and preferences. The new HTML specification (HTML5) defines 'web database' which is a complete (although light) database in the browser. 9 Architecture of Browser
- 10. The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8K chunks. After that this is the basic flow of the rendering engine: 10 Architecture of Rendering Engine
- 11. Step 1: Parsing the HTML document and convert elements to DOM nodes in a tree called the “content tree” – HTML Parser Step 2: Parse the style data, both in external CSS files and in style element together with visual instructions in HTML will be used to create another tree, call “render tree” – CSS Parser Step 3: 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 Step 4: The next stage is painting–the render tree will be traversed and each node will be painted using the UI backend layer - Painting. 11 Architecture of Rendering Engine
- 12. 12 Anatomy of Webkit Initialization Pushes Webkit to do work Handles user input.
- 13. 13 Anatomy of Webkit Application logic Loading Painting Parsing Event Handling Layout JS Binding Style Resolution
- 14. 14 Anatomy of Webkit V8 or JS core Parses and executes page logic Allows DOM manipulation
- 15. WebKit main flow 15 Architecture of Webkit
- 19. 19 Architecture of Webkit Painting In the painting stage, the render tree is traversed and the renderer's "paint()" method is called to display content on the screen. Painting uses the UI infrastructure component. The stacking order of a block renderer is: 1. Background color 2. Background image 3. Border 4. Children 5. Outline
- 20. Thank you
Editor's Notes
- #2: 1