In-Depth ConceptsInformation

How Browsers Work: A Peek Under the Hood

29

In the past years, when Was 10 Years Old Means 7 Years Ago In 2010 Internet Explorer dominated the market with 90% usage share, developers used to consider IE as a black box with nothing to do except view the rendered code. However, the present is the age of open source browsers. With browsers like Firefox and Chrome covering more than 50% of usage share, it has become quite easy for developers to look at what is happening under the hood. In brief, there are thousands of lines of C++ code. Let’s get a brief understanding of how a browser works.

Structure of a Browser

Primary components of a browser are:

  1. User Interface – This consists of the forward and back button, bookmarks, address bar, etc., along with the window that displays the requested page.
  2. Browser engine – It commands action between the rendering engine and the user interface.
  3. Rendering engine – The main function of the rendering engine is to display the content that is requested. For example, if HTML content is requested, the engine parses CSS and HTML and when the content is parsed, it is displayed on the screen.
  4. User Interface backend – It can be used for painting basic images like windows or combo box. The backend exposes only a generic platform independent interface. Beneath it, user interface methods are used by the operating system.
  5. JS Interpreter – JavaScript and all other types of scripting are parsed and executed by the built-in interpreter.
  6. Networking – Performs implementation of HTTP requests and responses.
  7. Data Storage – All types of data, like cookies, are saved locally by the browser. Storage mechanisms like WebSQL, FileSystem, and localStorage are also supported by the browser.

Process Flow

The networking layer provides the rendering engine with the content of the document that is requested. The contents are generally transferred in chunks about 8kb each in size. Once that happens, the following flow occurs:

  • A content tree is created by the rendering engine where the HTML elements get parsed and get converted to DOM nodes. Style data in both internal and external CSS are parsed and visual information along with styling is used to create the render tree.
  • Rectangles with specific colors and dimensions are arranged inside the rendered tree. They are meant to be in the right order to be rendered on the screen.
  • Once the rendered tree is constructed, it follows the layout process where each node is given the exact coordinates, according to which they should be displayed on the screen.
  • The final stage is the painting. Each node in the render tree will be designed according to the code written in the backend layer of the UI. Painting usually takes place in the following order:
    • The background color is assigned first.
    • It is immediately followed by the background image.
    • The border is assigned.
    • Children are stacked.
    • Outline of the page is created.

All the processes that occur inside the rendering industry take place gradually. However, the job of a render engine is to display content on the screen as soon as possible for providing a better user experience. That is why, instead of parsing the HTML and building the content of the render tree in one go, it starts building a few parts of the tree while other parts get parsed and built in the backend. Let’s take a detailed look at layout, a complex part of a page’s lifecycle.

DOM and CSS Object Model Construction

In the very first step of the rendering engine, HTML documents are parsed and the parsed elements are converted into nodes in the DOM tree. Each element in the tree is represented to be a parent node, within which the child elements are contained.

While the browser is working on parsing the HTML, it faces the “link” tag which references the external CSS linked to the page. It anticipates that the link is needed to render the complete page. A request is sent immediately to parse the CSS page.

Layout

When a renderer is added to the tree after creation, it does not have any size or position. The layout is the means of calculating those values.

A flow-based layout model is used by HTML. This means that, in most cases, the layout is completed in a single pass. Elements which are placed later in the layout tree do not impact the geometry of elements that are placed earlier. So, the layout can proceed in an omnidirectional way. Although there may exist some exceptions. More than one pass is required in the tables.

All renderers consist of a layout method, which occurs recursively through the child elements in the frame hierarchy. In a default HTML page, a root renderer is placed at the (0,0) coordinate and its dimensions serve as a part of the browser window that is visible, known as the viewport.

Process flow followed by a layout:

  1. The rendered Parent decides the width.
  2. It goes over children and sets their horizontal and vertical coordinates.
  3. The child layout is called only when needed.
  4. The cumulative height, margin, and padding of a child are used by the parent to figure out its own height, which will thereby be used by the parent renderer that lies above it in the hierarchy.
  5. The value of the dirty renderer is set to false.
  6. If you take a look at the developer console, you will find a box-like structure containing a series of rectangular boxes, one placed inside the other. This is the CSS box model which is made of containers which represent the element in the document tree and laid out in a way according to the visual model.
  7. Each box contains a content area and may or may not contain the surrounding border, padding, margin, etc.

Painting

In painting, the paint() method is called to render the UI infrastructure, custom styles, etc., on the component. Painting occurs either globally, where the whole render tree is painted at once, or in an incremental order, where the elements are stacked context wise.

When any custom style of the webpage is changed, the browser performs the minimal number of actions required, since any small change will result in the repainting of the entire element, and the layout will change its position and re-render the entire tree.

Layered Display of Elements

The z-index property of an element deducts where the element will be placed in the stack. In the stack, elements which are aligned at the back get painted first and elements with higher z-index value are arranged on the front and get painted last. These stacks usually have two types:

  • Containers or boxes having z-index property forms the local stack.
  • Viewport of the HTML forms the outer stack.

Browsers used nowadays are mostly freeware and fully functional that can render and display not only web pages but web applications as well. Some of them offer plug-ins that allow the user to get multimedia related information. Getting a clear understanding of how a browser works is highly beneficial for a web developer before using the developer console and building an interactive web application as every browser is developed differently, hence, it renders differently.

This is the main reason why a website looks different on different browsers. So, it is necessary to test any website on all browsers.

So, understand the browsers, develop, and test!

Happy developing and happy testing!

Lovepreet Singh
CEO & FOUNDER OF" FIVE RIVERS INCORPORATION - LEADING SOFTWARE & CYBER SECURITY DEVELOPMENT COMPANY" || CERTIFIED ETHICAL HACKER || FUTURE TRILLIONAIRE || FUTURISTIC || "DULL SCHOOL STUDENT" || (Follow this link to message me on WhatsApp: https://wa.me/13018426470)

Rust: Difficult to Learn, but an Exciting Programming Language

Previous article

How do hackers successfully brute-force WPS enabled WiFi when the password of WiFi is too strong?

Next article

You may also like

29 Comments

  1. Kamagra Oral Jelly Rite Aid [url=http://tadalaffbuy.com]cialis[/url] Generic Cialis Soft Tab

  2. Propecia Finasteride Buy Sialis Tablets [url=http://erxbid.com]precio cialis 10 mg farmacia[/url] Amoxicillin Used To Treat Hidradenitis Suppurativa

  3. Viagra Scadenza Brevetto Buy Accutane In Usa Sertraline Online Best Price [url=http://boijoy.com]levitra duree[/url] Viagra For Less

  4. Generic Propecia Viagra On Sale Discount Isotretinoin Tablets Online Visa Accepted Discount On Plavix [url=http://zgdkdz.com]viagra[/url] Canadian Prescription Prices

  5. … [Trackback]

    […] Read More Info here to that Topic: techandsecurity.net/how-browsers-work-a-peek-under-the-hood.html […]

  6. Excellent website. Plenty of helpful info here.

    I am sending it to several friends ans also sharing in delicious.
    And of course, thanks for your effort!

  7. Whats up very cool web site!! Guy .. Beautiful ..
    Superb .. I’ll bookmark your site and take the feeds additionally?
    I’m happy to seek out a lot of useful information right here in the post, we’d like
    develop more strategies on this regard, thanks for sharing.
    . . . . .

  8. Hmm is anyone else having problems with the images on this blog loading?
    I’m trying to determine if its a problem on my end or if
    it’s the blog. Any suggestions would be greatly appreciated.

  9. Hi there colleagues, its wonderful article concerning teachingand fully explained,
    keep it up all the time.

  10. Sweet blog! I found it while searching on Yahoo News.
    Do you have any suggestions on how to get listed in Yahoo
    News? I’ve been trying for a while but I never seem to get there!
    Many thanks

  11. Howdy! Would you mind if I share your blog with my twitter group?

    There’s a lot of folks that I think would really enjoy your content.
    Please let me know. Thank you

  12. Hello, i think that i saw you visited my blog thus i came to “return the favor”.I’m trying to find
    things to improve my web site!I suppose its ok to use some
    of your ideas!!

  13. Hi i am kavin, its my first occasion to commenting anyplace, when i read this paragraph i thought
    i could also create comment due to this sensible
    article.

  14. I used to be suggested this web site by way of my cousin. I’m no longer certain whether this
    put up is written via him as nobody else recognize such distinctive
    about my problem. You’re incredible! Thanks!

  15. Nice blog here! Additionally your website so much up very fast!
    What web host are you the usage of? Can I get your associate
    link for your host? I desire my web site loaded up as quickly as yours lol

  16. I was suggested this blog by way of my cousin. I am now not sure whether this post is written by way
    of him as no one else understand such distinctive about my problem.
    You’re amazing! Thank you!

  17. It’s the best time to make some plans for the future and it’s
    time to be happy. I have read this post and if
    I could I wish to suggest you some interesting things or
    suggestions. Perhaps you can write next articles referring to this
    article. I wish to read more things about it!

  18. Wow, awesome weblog structure! How lengthy have you ever
    been running a blog for? you made running a blog glance easy.
    The total look of your site is magnificent, as neatly as the content material!

  19. … [Trackback]

    […] Read More to that Topic: techandsecurity.net/how-browsers-work-a-peek-under-the-hood.html […]

  20. Keflex For Strep Throat Vardenafil Cheap 5 10 Mg [url=http://buycheapcial.com]cialis 5mg[/url] Usa Pharmacy Cialis Diferencia Entre Viagra Y Cialis Viagra Generico Consegna 24 Ore

  21. … [Trackback]

    […] Information to that Topic: techandsecurity.net/how-browsers-work-a-peek-under-the-hood.html […]

  22. … [Trackback]

    […] Read More to that Topic: techandsecurity.net/how-browsers-work-a-peek-under-the-hood.html […]

  23. Thank you a bunch for sharing this with all people you really know what you are talking approximately! Bookmarked. Kindly also talk over with my site =). We could have a hyperlink trade agreement among us!

  24. … [Trackback]

    […] Find More here on that Topic: techandsecurity.net/how-browsers-work-a-peek-under-the-hood.html […]

  25. Profolactic Amoxicillin Dosage Dental Priligy Buy Online [url=http://cheapciali.com]cialis from canada[/url] Precio De Cialis Generico Doxycycline In Internet

  26. Strep Throat Keflex Zithromax Pfizer Canada [url=http://cialvia.com]canadian pharmacy cialis 20mg[/url] Cheap Viagra Uk Next Day Delivery Cialis Nebenwirkungen Prostata How To Make Female Cialis Levitra Generique Pas Cher [url=http://exdrugs.com]generic viagra[/url] Where To Buy Viagra In Canada Clonidine Substitute

  27. Prix Viagra 100 Mg Cialis Levitra Together [url=http://rxasian.com]viagra[/url] Propecia Covered By Health Insurance

  28. Discount Acticin Elimite On Line Medicine Shop [url=http://byrxbox.com]viagra online pharmacy[/url] Amoxicillin Suspension Blood Pressure Medications For Sale Antibiotics Online Overnight Delivery [url=http://cheapcheapvia.com]viagra[/url] Amoxicillin And Clavulante Propecia Usa Merck Clomid A Acheter [url=http://cheapestcial.com]cialis[/url] Cialis Wo Rezeptfrei Coumadin And Amoxicillin Interactions Cialis Buy Online [url=http://cpsmeds.com]online pharmacy[/url] Discount Zentel With Free Shipping Acheter Cialis Danger Propecia Galactorrea Order Topamax Online Paypal Cialis Generique Brevet [url=http://ausgsm.com][/url] Caverta Buy Cialis Online Uk Reviews Propecia Skin Rash Drugs [url=http://genericcial.com]cialis cheapest online prices[/url] Elocon 5g Delivered On Saturday Orlando

  29. Cephalexin Generic Viagra Pressione Oculare [url=http://cial20mgprice.com]cialis overnight shipping from usa[/url] Zithromax Next Day Delivery

Leave a reply

Your email address will not be published. Required fields are marked *