1. Composition Explorer
The user interface (refresh button, forward and back buttons, url input boxes, bookmarks, etc.)
Rendering engine (browser kernel, parsing the HTML and CSS code, and displayed on the screen)
Browser engine (pass information between the user interface and rendering engine)
Network (network calls, such as HTTP requests)
javaScript interpreter (JS code parsing)
Reservoir (the browser data stored on the hard disk required, such as cookie, etc.)
UI rear layer (used to draw the basic browser window controls, such as input boxes, buttons, radio buttons, etc., depending on the browser rendering different visual effects, but the functions are the same.)
2. The browser from the input box, type the url to the page rendering is complete what happened?
Parse tree node dom generating HTML construct ----- ----- render tree layout drawing render tree render tree ----
First HTML files that make up the tree dom, dom parsing CSS and tree construction render tree together. Then enter the layout stage, determine the coordinates of each page element. UI is then drawn through the rear layer (UI tree traversal render backend layers drawing each node)