Menu
I am REALLY curious how a web page is parsed into a DOM tree, then how the tree is rendered in a web browser. Namely,how does layout engine work?
I guess whether reading source code of a simple web browser (Webkit is too hard for me now. ) is a feasible choice? Thanks
419
Layout engine may refer to: Browser engine, a software component of a web browser that does the layout of web pages. Digital typesetting software, used both during document creation and consumption.
A browser engine (also known as a layout engine or rendering engine) is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user's device.
The browser's high level structure #The browser engine: marshals actions between the UI and the rendering engine. The rendering engine: responsible for displaying requested content. For example if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen.
The rendering engine is used to display the requested content on the user interface and the browser engine marshals actions between the UI and the rendering engine.
Parsing a web page into a DOM tree isn't terribly difficult to understand since (well-formed) HTML is already in a tree structure. So I don't think there's much to it except when you want to also annotate things like CSS, conditional code, and scripts into your tree.
Layout and rendering is a much more challenging problem to work out. If you're not ready to dive directly in the code, you can read their docs:
WebKit Layout and Rendering
166
You can also go to this link which has a great explanation and review of the concerned question. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
