Introduction

to Web Browser Internals

Table of Contents
Introduction 0
First Chapter 1

2
Introduction to Web Browser Internals

My Awesome Book
The Anatomy of the Web Browser As both a web developer and a user, I use browsers
intensively everyday. I firstly became interested in this topic, particularly due to inquisition
concerning how the browser works. This inquisition has helped me to become a better
developer in various ways such as through understanding the role of computer science in
client-side web applications and more importantly, understanding why different browsers
work differently. I have spent a fair amount of time fighting against web browsers and
creating hacks which led to frustration and fascination as to how the browser works. The
browser is often seen as an unopened box, solely managed by an elect few (Google,
Mozilla, Apple, Microsoft), however with the emergence of open source technology it is
possible to investigate the internal infrastructure of browsers and thereby gain insight into
how my code is viewed by the likes of Firefox or Chrome.

Introduction 3
Introduction to Web Browser Internals

First Chapter
The Anatomy of the Web Browser As both a web developer and a user, I use browsers
intensively everyday. I firstly became interested in this topic, particularly due to inquisition
concerning how the browser works. This inquisition has helped me to become a better
developer in various ways such as through understanding the role of computer science in
client-side web applications and more importantly, understanding why different browsers
work differently. I have spent a fair amount of time fighting against web browsers and
creating hacks which led to frustration and fascination as to how the browser works. The
browser is often seen as an unopened box, solely managed by an elect few (Google,
Mozilla, Apple, Microsoft), however with the emergence of open source technology it is
possible to investigate the internal infrastructure of browsers and thereby gain insight into
how my code is viewed by the likes of Firefox or Chrome.

In relation to browsers, I beleive that client-side development (front-end) is falsely perceived

as less technical than other forms of software development, which is just, not true...well not
totally true. Developing the front-end is a visual matter, in that you are dealing primarily with
creating a user interface, however with the increasing level of complex web applications,
various projects are becoming more 'client-focused'. Furthermore gaining a detailed
understanding into the environment in which these increasingly 'client-focused' applications
are built is more necessary than in the previous two decades of the Internet.

It is understandable that client-side development is viewed as less technical than other

branches of of the development world, because the development of user interfaces draw
connotations from user experience and visual design. However the view that client-side
development is less technical must begin to change in a web that has become increasingly
more client-focused. Here in the year 2015, I am very proud of how far the browser has
come, specifically drawing attention to the number of complex web applications which
perform heavy operations within the browser, such as Google Maps, Bing Maps and many
more. The real point is, the browser is becoming even more important as a means of
performing operations on data that have been implemented traditionally on the server-side
such as database queries and other computationally intensive tasks. If in doubt, please
Google 'WebGL' and 'indexedDB', both of which are implemented solely through the
browser.

There is much more research and community needed for learning about how the browser
actually works, for use by the broad spectrum of software/web developers. The aim of 'The
Anatomy of the Web Browser' is to contribute towards this essential field of knowledge,
through investigating the browsers internal mechanisms, and then to apply this knowledge to

First Chapter 4
Introduction to Web Browser Internals

everyday application development. The first few sections contain some very important
contextual information pertaining to the development of the 'Browser' since it's conception
through to its present state. Feel free to skip such sections if you prefer to delve straight into
the more directly technical aspects of web browsers. However I strongly encourage you to
take charge of your own learning and understand the progression of perhaps the most used
piece of software in the history of the world...the browser.

Finally, before starting I would like to introduce a disclaimer. This will investigate technical
aspects of the browser, such as parsing algorithm's, rendering engines and data structures
(and much more) which together makeup the anatomy of the browser itself. If you are a
developer without much experience in computer science fundamentals such as algorithms
and data structures, I encourage you to not be discouraged and keep reading. These
concepts will not be as dry as they are often portrayed and will help you to become a more
well-rounded developer. The use of diagrams, images and real-world examples will hopefully
provide enough information to understand these concepts without too much computing
rhetoric. Sorry, just one more thing, perhaps an example of this will be useful. The following
C++ code does something inside of Mozilla's Firefox browser which anyone with some
programming knowledge and CSS experience should be able to understand. If you don't
understand, no problem at all, I promise to explain afterwards:

bool IsVisible(int aStyle) { if (aStyle != NS_STYLE_BORDER_STYLE_NONE && aStyle !=

NS_STYLE_BORDER_STYLE_HIDDEN) { return true; } return false; }

If you've guessed correctly, we can see that this function checks if an elements 'border-style'
is visible. The if statement checks to see if both the 'border-style' IS NOT 'none' and also IS
NOT 'hidden'. If both of these are indeed NOT 'none' or 'hidden', then the element's border is
visible. Otherwise, the element's border is not visible. This of course, is a very simple and
concise example of the internals of browsers, but this is actually very helpful when writing
CSS as we now know that Firefox determines border visibility in this way.

The early days of browsers The first browsers In 1990 Tim Berners Lee wrote the world's
first web browser. Joseph Hardin David Thompson SLAC Browser MidasWWW In early
1990's Internet pioneer Tim Berners-Lee wrote the world's first ever web browser. This
browser much like ours today, enabled users to disseminate information sent over the Web
and view the resulting data.

Part two...coming soon.

First Chapter 5