What is a web Browser
In most devices you have, be it a phone (android or mac), a tablet or a laptop, you will find a web browser installed. A web browser is a software we use to browse the internet. There are 5 major browsers: Chrome, Internet Explorer, Firefox, Safari and Opera. (maybe 4, excluding IE).
The browser’s main functionality is to fetch and display resources we request from the internet like Facebook or youtube. Resources can also be a simple image, pdf file or even a JSON file.
Each browser has a few main components common to each other:
1) User Interface
- This are GUI (
Graphical User Interface) users interact with. Stuff like the address bar, back/forward buttons, bookmarking menu etc..
2) Browser Engine
- Think of this as the
controller.It comprises of a few other engines (rendering engine&javascript engine) to render and style the webpage you see upon receiving the response of your request
3) Rendering engine
- Responsible for the layout of the webpage. If the requested content was a
HTML&CSSfile, therendering enginewould know to parse the response withHTML&CSSand displays the result to the user. This is where the DOM (document object model) is constructed & styling is made.
4) Javascript Engine
- Most response comes with some
javascriptcode to create dynamic components or to fetch additional content from the web. Thejavasript engineis responsible for interpreting and executing the javascript code. The primary difference between a Rendering engine and a JavaScript engine lies around the dependency with browser. The rendering engine is tightly coupled with browser engine, on the other hand, a JavaScript engine can be worked upon even without a browser.
5) Networking
- The networking component is responsible for making
HTTPrequests. Read more here https://hpbn.co/primer-on-browser-networking/
6) UI backend
- used for drawing basic widgets like combo boxes and windows. This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
7) Data Storage
- This is a persistence layer. The browser may need to save all sorts of data locally, such as cookies. Browsers also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem
The Rendering Engine
The rendering engine’s main purpose is to render (parse & display) the requested & received content to the user on the browser.
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 fork of WebKit.
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. See webkit.org for more details.
The rendering engine will start getting the contents of the requested document from the networking layer. This will usually be done in 8kB chunks.
After that, this is the basic flow of the rendering engine:
1) Parsing HTML to construct DOM tree
2) Render tree construction
3) Layout of the render tree
4) Painting the render tree
Top comments (0)