Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How Browsers Work: Behind the Scenes

DZone's Guide to

How Browsers Work: Behind the Scenes

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

A very good article regarding how the browsers work by  Tali Garsiel.
As she states in her Home page: " In the years of IE 90% dominance there was nothing much to do but regard the browser as a "black box", but now, with open source browsers having more than half of the usage share, it's a good time to take a peek under the engine's hood and see what's inside a web browser. Well, what’s inside are millions of C++ lines... "


Do forget to miss Check also her Client Side Performance tips.


Below are some teaser text and images from her article. Check her article for more :)

The browser's main components are (1.1):

  1. The user interface - this includes the address bar, back/forward button, bookmarking menu etc. Every part of the browser display except the main window where you see the requested page.
  2. The browser engine - marshalls the actions between the UI and the rendering engine.
  3. The rendering engine - responsible for displaying the requested content. For example if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
  4. Networking - used for network calls, like HTTP requests. It has platform independent interface and underneath implementations for each platform.
  5. UI backend - used for drawing basic widgets like combo boxes and windows. It exposes a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.
  6. JavaScript interpreter. Used to parse and execute the JavaScript code.
  7. Data storage. This is a persistence layer. The browser needs to save all sorts of data on the hard disk, for examples, cookies. The new HTML specification (HTML5) defines 'web database' which is a complete (although light) database in the browser.



Figure : Browser main components.  

Main flow examples




Figure : Webkit main flow








Figure : Mozilla's Gecko rendering engine main flow(3.6)       Figure : The render tree and the corresponding DOM tree (3.1). The "Viewport" is the initial containing block. In Webkit it will be the "RenderView" object.


Dig more
First check her article which is very comprehensive. But if you want to dig even more you can check her article's resources:

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Spyros Doulgeridis, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}