CrazyEngineers
CrazyEngineers
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Replies

  • PraveenKumar Purushothaman

    Member • Dec 21, 2011

    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.
    Are you sure? This action cannot be undone.
    Cancel

  • PraveenKumar Purushothaman

    Member • Dec 21, 2011

    If you see how the browsers work, there are a lot of components. The browser's main components are:
    [​IMG]
    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.
    Are you sure? This action cannot be undone.
    Cancel

  • Ankita Katdare

    Administrator • Dec 21, 2011

    You will also find these links useful from Howstuffworks -

    Mozilla Firefox - <a href="https://computer.howstuffworks.com/internet/basics/firefox.htm" target="_blank" rel="noopener noreferrer">How Firefox Works | HowStuffWorks</a>
    Google Chrome - <a href="https://computer.howstuffworks.com/google-chrome-browser.htm" target="_blank" rel="noopener noreferrer">How the Google Chrome Browser Works | HowStuffWorks</a>
    Are you sure? This action cannot be undone.
    Cancel

  • PraveenKumar Purushothaman

    Member • Dec 21, 2011

    Hey, and you need to understand the browser engine's flow:
    [​IMG]

    And there are differences between Chrome and Firefox, how they handle the pages!
    Chrome Webkit's Working
    [​IMG]
    Webkit main flow
    Mozilla Gecko's Working
    [​IMG]

    Mozilla's Gecko rendering engine main flow
    Are you sure? This action cannot be undone.
    Cancel

  • PraveenKumar Purushothaman

    Member • Dec 21, 2011

    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:
    <html>
    <body>
        
            Hello World
        
        <div>
            [img]example.png[/img]
        </div>
    </body>
</html>
    Would be translated to the following DOM tree:
    [​IMG]
    Are you sure? This action cannot be undone.
    Cancel

  • PraveenKumar Purushothaman

    Member • Dec 21, 2011

    For more info, you can check out these set of resources:
    1. Browser architecture
      1. Grosskurth, Alan. A Reference Architecture for Web Browsers. <a href="https://grosskurth.ca/papers/browser-refarch.pdf" target="_blank" rel="nofollow noopener noreferrer">PDF</a>.
    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. <a href="https://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-6.xhtml" target="_blank" rel="nofollow noopener noreferrer">Web page layout in Mozilla [Slide 6 of 11]</a>.
      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. <a href="https://webkit.org/blog/114/" target="_blank" rel="nofollow noopener noreferrer">WebCore Rendering I – The Basics | WebKit</a>.
      4. David Hyatt, The FOUC Problem. <a href="https://webkit.org/blog/66/the-fouc-problem/" target="_blank" rel="nofollow noopener noreferrer">The FOUC Problem | WebKit</a>.
    5. W3C Specifications
      1. HTML 4.01 Specification. <a href="https://www.w3.org/TR/html4/" target="_blank" rel="nofollow noopener noreferrer">HTML 4.01 Specification</a>.
      2. HTML5 Specification. #-Link-Snipped-#.
      3. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. <a href="https://www.w3.org/TR/CSS2/" target="_blank" rel="nofollow noopener noreferrer">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>.
    6. Browsers build instructions
      1. Firefox. #-Link-Snipped-#
      2. Webkit. #-Link-Snipped-#
    Are you sure? This action cannot be undone.
    Cancel

  • ANIND DUTTAROY

    Member • Feb 23, 2012

    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
    Are you sure? This action cannot be undone.
    Cancel

  • PraveenKumar Purushothaman

    Member • Feb 23, 2012

    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.
    Are you sure? This action cannot be undone.
    Cancel

  • avii

    Member • Feb 24, 2012

    Check this also - <a href="https://www.google.com/googlebooks/chrome/" target="_blank" rel="nofollow noopener noreferrer">Google Chrome</a> 😀
    Are you sure? This action cannot be undone.
    Cancel

  • K!r@nS!ngu

    Member • Feb 24, 2012

    ANIND DUTTAROY
    I am talking of browser virtualization.
    virtual browser 😐 ???.....Can you tell me how it works....
    Are you sure? This action cannot be undone.
    Cancel
Home Channels Search Login Register