How internet browsers work? How to develop a browser?

Replies

• 

  PraveenKumar Purushothaman

  Hi Music!
  The base / core of a browser is the Layout Engine... On top of it is the GUI with some more additions to the layout engine. So, for building a browser, you would be essentially needing a code of layout engine, and I guess, you can take it from either Gecko (Firefox) or WebKit (Chrome / Safari), whichever you like / support.
• 

  PraveenKumar Purushothaman

  If you see how the browsers work, there are a lot of components. The browser's main components are:
  
  

  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 - the interface for querying and manipulating 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.
• 

  Ankita Katdare

  You will also find these links useful from Howstuffworks -
  
  Mozilla Firefox - How Firefox Works | HowStuffWorks
  Google Chrome - How the Google Chrome Browser Works | HowStuffWorks
• 

  PraveenKumar Purushothaman

  Hey, and you need to understand the browser engine's flow:
  
  
  And there are differences between Chrome and Firefox, how they handle the pages!
  Chrome Webkit's Working
  
  Webkit main flow
  Mozilla Gecko's Working
  
  
  Mozilla's Gecko rendering engine main flow
• 

  PraveenKumar Purushothaman

  Building the DOM tree is the main factor you need to consider. To build a DOM tree, you are supposed to go in this way:
  The DOM has an almost one to one relation to the markup. Example, for this markup:
  

  
      
          
              Hello World
          
          
  
              [img]example.png[/img]
          
      
  

  Would be translated to the following DOM tree:
  
• 

  PraveenKumar Purushothaman

  For more info, you can check out these set of resources:
  

  1. Browser architecture
     1. Grosskurth, Alan. A Reference Architecture for Web Browsers. PDF.
  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. #-Link-Snipped-#.
  3. Firefox
     1. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers. Web page layout in Mozilla [Slide 6 of 11].
     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. #-Link-Snipped-#.
     4. L. David Baron, Mozilla Style System Documentation. #-Link-Snipped-#.
     5. Chris Waterson, Notes on HTML Reflow. #-Link-Snipped-#.
     6. Chris Waterson, Gecko Overview. #-Link-Snipped-#.
     7. Alexander Larsson, The life of an HTML HTTP request. #-Link-Snipped-#.
  4. Webkit
     1. David Hyatt, Implementing CSS(part 1). #-Link-Snipped-#.
     2. David Hyatt, An Overview of WebCore. #-Link-Snipped-#.
     3. David Hyatt, WebCore Rendering. WebCore Rendering I – The Basics | WebKit.
     4. David Hyatt, The FOUC Problem. The FOUC Problem | WebKit.
  5. W3C Specifications
     1. HTML 4.01 Specification. HTML 4.01 Specification.
     2. HTML5 Specification. #-Link-Snipped-#.
     3. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.
  6. Browsers build instructions
     1. Firefox. #-Link-Snipped-#
     2. Webkit. #-Link-Snipped-#
• 

  ANIND DUTTAROY

  Hi Praveen,
  
  Your description on browsers is really nice. Thanks for all the information.
  
  By the way, please can you suggest, how to develop a virtual browser?
  
  I am talking of browser virtualization.
  
  Hoping for a positive response soon.
  
  
  Thanks and Kind Regards,
  Anind
• 

  PraveenKumar Purushothaman

  ANIND DUTTAROY

  Hi Praveen,
  
  Your description on browsers is really nice. Thanks for all the information.
  
  By the way, please can you suggest, how to develop a virtual browser?
  
  I am talking of browser virtualization.
  
  Hoping for a positive response soon.
  
  
  Thanks and Kind Regards,
  Anind

  Well, get the SDK from the Engine people, if you are thinking of implementing an existing browser. If you wanna develop your own browser, you need to go through the W3C Specification for HTML, SGML, XML, etc. and have to develop one.
• 

  avii

  Check this also - Google Chrome 😀
• 

  K!r@nS!ngu

  ANIND DUTTAROY

  I am talking of browser virtualization.

  virtual browser 😐 ???.....Can you tell me how it works....