HTML browser, how do you know of?

Disclaimer: This article is a blogger original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/zhonghua_csdn/article/details/92993976

Ever had a simple understanding of HTML, it might be due after the front end further use, so take the time to ponder about the front end of the basics again.
Before learning HTML + CSS + JS, there is little wonder why I wrote a .html file can be converted into a browser interface it?

This is thanks to the browser kernel friends ~

Browser kernel also be divided into two parts: the rendering engine (layout engineer or RenderingEngine) and JS engines .
Browser kernel is responsible for the interpretation of the web page syntax (such as HTML, JavaScript) and render (display) page. So, usually called the browser kernel that is used by the browser rendering engine, browser rendering engine determines the format of the information content of the page and how pages are displayed. Explain different browser kernel pages written grammar is also different, so the same page in a different kernel browser rendering (display) results may be different, this is the page writers need to test web pages in different kernel browser the reason display effect.

Mainstream browser kernel:

Browser kernel includes a rendering engine and JS engine, because the engine js more independent, the kernel tends to refer only to the rendering engine.

Rendering engine

Kind of parsing HTML documents and tools on the page display. It is responsible for obtaining the display content pages (HTML, XML, images, etc.), organize information (such as adding CSS, etc.), as well as the calculation of the page and then output to the monitor or printer

JS engine

JavaScript engine is a specialized process JavaScript scripts virtual machine , usually comes in a web browser into.

Rendering engine workflow

DOMM HTML parser parse tree (DOM tree node is resolved while parsing CSS style)
render tree structure (having a certain visual effect, on the screen and arranged in a certain order)
layout render tree (each node is assigned a fixed coordinate )
draw DOM tree (the rendering engine will traverse all the nodes, drawn by the UI backend)

Photo: https://www.cnblogs.com/microcosm/p/6815902.html