Introduction to Web Browser Internals

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