How does the web page rendering process work by the browser?

Question

I know there is a DOM tree, but I don’t know how the rendering works. I know that learning this is important.

Answer 1

There is no specific thing, it does not occur in the front end in fact, or it is dependent on javascript or something like that, the issue is that internally a browser has a "engine" (more than one) based on "interfaces" that render following the answer of their HTML and CSS.

So it’s like HTML and CSS are instructions for this engine to create the composition of the page, changing as you handle the DOM via javascript.

For example you request a page, the browser downloads the content of it may be partial or not and starts processing it by sending what has already been downloaded to the engine to start drawing according to the instructions and generate items like buttons and other things.

Actually when you manipulate using Javascript or inject a CSS as instructions and the engine detects these "updates" and modifies as these new instructions rendering again.

There is no need to learn how to create something like this, I mean if you intend to develop web pages only.

There are some answers from me that might interest you on the subject:

• There is a way to view native Javascript function code?
• It is correct to omit the html start tag in HTML5?
• Which code and language make the input tag do what it does?

---

The most popular engines:

• Blink

  Blink is the engine used by the browsers Chrome, Opera and Vivaldi (there are more), it is a Fork of the Webkit engine. Blink sees in conjunction with Chromium which is Google’s open-source project used in Chrome and which you can use to create your own browser, Chromium goes well beyond the rendering engine, it brings with it various functionalities.

  It is written in C++

• Webkit

  Engine used by many browsers, even in early versions of Google Chrome, is mainly used in Safari for Mac and iOS and in many mobile browsers like the default Android browser and even on Blackberrys, this engine was based on an engine called KHTML, I will speak of him later.

  It is written in C++

• Gecko

  Firefox browser engine that is also used in other products of the same company, such as Thunderbird (email client), it is also open-source.

  It is written in C++

• Edgehtml

  It is the engine used in Microsoft Edge browser, successor to Internet Explorer, it is not open-source (ie it is proprietary).

  Probably written in C++

• Trident

  Engine used in Internet Explorer, also proprietary, probably also written in C++

• KHTML

  This is the engine that gave rise to Webkit, Apple years ago did not have own browser, so much so that even Microsoft developed a version of Internet Explorer for Mac (not using Trident but an engine called Tasman), Apple made a Fork to create the first and second version of Safari and make this Fork into the well-known Webkit.

  This engine is used by KDE in its browser called Konqueror and perhaps for other features.

  It is written in C++

There are still many rendering engines, but not as popular or that are simply out of use.

Each engine has its own "system", ie each one works its way and internally probably all are different, what they should follow are the web standards to define as such instruction should be "delivered", it does not mean that he had to follow the same path as another engine, but the end result needs to be equal.

Render engines usually support:

• HTML
• CSS
• SVG

Many elements on the page can use operating system features like buttons and scrollbars and audio and video codecs, of course this is quite relative, before browsers used plugins or activex to process audio and video, today browsers have own players, some still use the OS codecs (this due to the LICENSES that each codec has, which could entail many legal problems), others have support for some codecs natively.