Rendering the web

Rendering in Web Browser

The main purpose of the browser is to present the web resources by requesting it from the server and rendering it. In present days, apart from the development phase, web developers face challenges where their UX designs are not the same across the browsers.

Basically, the HTML specifications are designed by W3C(World Wide Web Consortium). But only a part of the rules is followed by the browsers and the other parts are their own extensions and developments. This is why we face cross-browser compatibility issues.

The similarities across all browsers are the address bar, reload URL, bookmarks, home page, etc,,.

High Level Structure of a Browser

  • User Interface:  The View we see it when we hit an URL/link
  • Browser Engine: An engine that invokes the browser and responsible for displaying content on the screen(between UI and Rendering Engine)
  • Rendering Engine
  • Networking: For network calls that happen in the web browsers
  • UI Backend
  • Javascript Engine: Parse Javascript code
  • Data Storage: Refers the Local storage, cookies, WebSQL, IndexedDB, etc..

The Rendering Engine and the Javascript Engine will vary based on the browsers. Due to this, we face compatibility issues. Few are here,

browser-details

Let’s go more detail about Rendering Engine!

Rendering engine

Rendering Outline

First, HTML is parsed to DOM tree using HTML parser. In the meantime, the CSS is parsed to CSSOM tree using CSS parser. Combining both DOM and CSSOM, the ‘Render Tree’ is constructed.
Then goes the layout formation. In the layout process, every DOM element gets its coordinates.
Using the paint method, all coordinates get their position in the view/display

For a better experience, the rendering engine will try to display the contents on the screen as soon as possible. Many times we see the half view is loaded in the browser. This is because only a part of the HTML and CSS is parsed as rendering engine tried to give the view as quickly as possible and remaining are loaded later.

Terms:

Scripts:
The Rendering engine reads the HTML document line by line. If it finds a script tag <script>, the parsing of the document halts until the script finished. Due to this, the loading of the document takes time. To avoid this, use async/defer in the script tag to process asynchronously which means a separate thread is called for script parsing.

Repaint/Restyle:
Changing the style of the element that does not affect the respective element’s position, like changing the background color, the repaint will happen.

Reflow:
The Reflow will happen on changing the content that affects the element’s position or a situation where restructuring the DOM is necessary, like changing the text of an element, animations for the relative elements, resizing, scrolling, etc,.The cost of rendering is high when reflow happens frequently.

Better Optimization:

  • Use proper encoding document types and valid HTML, CSS elements.
  • Apply the rules in the correct cascade order
  • Apply animation only for the absolute/fixed positioned elements.
  • Work with ‘offline elements’.
  • Place the scripts end of the document or use async/defer in the scripts

References:

  • https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Rendering_engines
  • https://medium.com/@monica1109/how-does-web-browsers-work-c95ad628a509
  • https://hackernoon.com/how-do-web-browsers-work-40cefd2cb1e1
  • http://frontendbabel.info/articles/webpage-rendering-101/
  • https://developers.google.com/web/updates/2019/02/rendering-on-the-web
  • https://labs.ft.com/2012/08/basic-offline-html5-web-app/

Leave a Reply

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