DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
The Latest "Software Integration: The Intersection of APIs, Microservices, and Cloud-Based Systems" Trend Report
Get the report

How Browsers Work: Behind the Scenes

Spyros Doulgeridis user avatar by
Spyros Doulgeridis
·
May. 07, 12 · Interview
Like (1)
Save
Tweet
Share
8.89K Views

Join the DZone community and get the full member experience.

Join For Free
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:
  1. browser architecture
    1. grosskurth, alan. a reference architecture for web browsers (pdf)
    2. gupta, vineet. how browsers work - part 1 - architecture
  2. parsing
    1. aho, sethi, ullman, compilers: principles, techniques, and tools (aka the "dragon book"), addison-wesley, 1986
    2. rick jelliffe. the bold and the beautiful: two new drafts for html 5.
  3. firefox
    1. l. david baron, faster html and css: layout engine internals for web developers.
    2. l. david baron, faster html and css: layout engine internals for web developers (google tech talk video)
    3. l. david baron, mozilla's layout engine
    4. l. david baron, mozilla style system documentation
    5. chris waterson, notes on html reflow
    6. chris waterson, gecko overview
    7. alexander larsson, the life of an html http request
  4. webkit
    1. david hyatt, implementing css(part 1)
    2. david hyatt, an overview of webcore
    3. david hyatt, webcore rendering
    4. david hyatt, the fouc problem
  5. w3c specifications
    1. html 4.01 specification
    2. w3c html5 specification
    3. cascading style sheets level 2 revision 1 (css 2.1) specification
  6. browsers build instructions
    1. firefox. https://developer.mozilla.org/en/build_documentation
    2. webkit. http://webkit.org/building/build.html
operating system Engine

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • The 5 Books You Absolutely Must Read as an Engineering Manager
  • Top 5 Data Streaming Trends for 2023
  • 10 Things to Know When Using SHACL With GraphDB
  • What Is JavaScript Slice? Practical Examples and Guide

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: