1. Introduction
Web browser is the most used software today. In this article, we will learn how they work, we will understand what happens when you type google.com into the address bar and until you see the Google page displayed in the browser.
Browsers that we are going to talk about
There are five main types of browsers used on the desktop today, are Chrome, Internet Explorer, Firefox, Safari and Opera. On mobile, the major browsers are Android Browser, iPhone, Opera Mini and Opera Mobile, UC Browser, and all versions of Chrome, except the Opera browser, are all based on WebKit. I will take the examples from the open source browsers of Firefox and Chrome, Safari (only partially open source).
According to the statistics of StatCounter in June 2013, Chrome, Firefox and Safari account for about 71% of the time using the browser on the desktop globally. With mobile, Android Browser, iPhone and Chrome only about 54%.
The main function of the browser
The main function of a browser is to present a web resource that you have selected, through asking the server to return it and display it in a browser window. This resource is always an HTML document, but it can also be a PDF, image or some other content. The location of this resource is indicated by the user using the URI (Uniform Resource Identifier).
The way the browser interprets and displays HTML files is based on HTML and CSS rules. These rules were built by the World Wide Web Consortium (W3C), which is the standards organization for the web. In recent years, browsers have only partially followed these rules and developed their own extension tools. That leads to compatibility issues for the authors of the web pages. Very few browsers follow those standard rules these days.
Browsers’ user interfaces have many things in common. That is:
- The address bar is used to enter URIs
- There are Back and Forward buttons
- Bookmarking function
- Refresh and there are buttons to prevent refresh or stop loading of the running documents.
- Home button to go to your home page
But the browser interface is not required to comply with any official rules, it just builds on years of experience and mimics other browsers. The HTML5 features also do not define the UI elements a browser should have, but contain some common elements. It’s the address bar, status bar, and toolbar. In addition, there are also features that are unique to one browser, such as the download manager in Firefox.
Browser hierarchy
The main components of a browser are:
- User interface:
It includes the address bar, back / forward button, bookmark menu, … Everything the browser displays, except the window that contains the page you requested.
- Browser engine:
Arrange jobs between UI layer and render engine
- Rendering engine:
Responsible for displaying the requested content. For example, if the requested content is HTML, the rendering engine will resolve the HTML and CSS, and display the resolved content on the screen.
- Networking:
With network calls such as HTTP requests use different implementations for different platforms behind a platform independent interface.
- UI backend:
Often used to draw basic widgets like boxes and windows. This process will use a common interface, independent of any platform. Underneath is the use of operating system UI functions.
- Javascript interpreter:
Used to resolve and run Javascript code.
- Data saving:
This is the storage layer, the browser needs to store all local data, eg cookies. Browsers also support other storage tools like localStorage, IndexedDB, WebSQL and FileSystem.
It is important to note that browsers like Chrome will run multiple instances for the rendering engine, each for each tab. Each tab runs a separate process.
2. Rendering engine
The task of the rendering engine is to render, display the requested content on the browser screen.
The default is that the render engine displays HTML and XML documents and images. It is possible to display additional types of data by using additional plug-ins or extensions (extension tools). For example, to display PDF documents use the PDF viewer plugin. However, in this section we will focus on the main issue, which is displaying HTML and images that have been formatted with CSS.
Rendering engines
Different browsers use different rendering engines: Internet Explorer uses Trident, Firefox uses Gecko, Safari uses WebKit. Chrome and Opera (from version 15) use Blink, a version taken from WebKit.
WebKit is an open source rendering engine, originally used as an engine for the Linux platform and edited by Apple to support Mac and Windows. See webkit.org for more details.
Main flow
The Rendering engine starts to get the content of the requested document from the network layer. It will take 8kB.
Then, will do basic flow:
The rendering engine will start parsing the HTML document and converting the elements into DOM nodes in a tree called a “content tree.” The tool will parse the type data, both in external CSS files and in style elements. The styling information along with the HTML visualization will be used to create another tree: the render tree .
render tree contains rectangles with visual properties such as color and size. The rectangles are in the correct order shown on the screen.
After building the render tree, it goes through a “layout” process. This means giving each button the exact coordinates where it should appear on the screen. The next stage is the draw – render tree will be iterated and each node will be drawn using the UI backend.
It is important to understand that this is a gradual process. For better user experience, the rendering engine will try to render the content on the screen as soon as possible. It won’t wait until all the HTML is parsed before starting to build and lay out the render tree. Portions of the content will be parsed and displayed, while the process continues with the rest of the content sent from the network.
In the next section, we will talk more about the flow of the render
References: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/