How does the process of rendering web pages by the browser work? [closed]

There is no specific thing, this does not occur on the front end actually, or is dependent on javascript or something, the point is that internally a browser has a "motor" (more than one) based on "interfaces" that rendering by following the response of your HTML and CSS.

So it's as if HTML and CSS were instructions for this engine to create the page layout, changing as you manipulate the DOM via javascript.

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

In fact when you manipulate using JavaScript or injects a CSS 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, this I say if you plan to develop web pages only.

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

• Is there a way to see the native JavaScript function code?
• Is it okay to omit html start tag in HTML5?
• What code and language do the input tag do what it does?

The most popular engines:

• Blink

  Blink is the engine used by Chrome, Opera and Vivaldi browsers (there are more), it's a Webkit engine fork. Blink comes together with Chromium which is Google's open-source project used in Chrome and you can use it to create your own browser, Chromium goes well beyond the rendering engine, it brings several features.

  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 Android's default browser and even in BlackBerrys, this engine was based on a engine called KHTML, I'll talk about it 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 browser engine used in Microsoft Edge, the successor to Internet Explorer, it is not open-source.

  Probably written in C ++

• Trident

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

• KHTML

  This is the engine that gave rise to Webkit, Apple years ago did not own its own browser, so much so that Microsoft developed a version of Internet Explorer for Mac (not used Trident, but an engine called Tasman), the Apple made a fork to create the first and second version of Safari and making this fork in the familiar Webkit.

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

  It is written in C ++

Many rendering engines still exist, but not as popular or simply out of use.

Rendering engines generally support:

• HTML
• CSS
• SVG

Many elements on the page can use features of the operating system 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 their own players , some still use the operating system codecs (this is due to the LICENSES that each codec has, which could involve many legal problems), others have supported some codecs natively.