1. DNS get the IP. Then send http/s request to the server to fetch the page content.
2. On getting the content, download the resources(css/js/images) and try to render it. Note: the render process would not begin before css is all downloaded since it does not make sense to render something without konwing its styling.
3. Build the DOM for the given HTML and the CSS-DOM for the style sheets. Then put these two together and build the Render-tree which will be used to paint the real viewable page.
4. Once we have the render tree, browser starts to do LAYOUT which will calculate the dimension of the elements(width/height) as well as the position. The viewport(root element ‘HTML’) will be place in the (0,0) position. 0,0 here is the innerHeight/innerWidth.
5. After the Layout is done, browser start to PAINT the render tree and output all the elements to the viewport.
Anytime css/DOM changes, the re-Paint or re-Layout will be triggered so that user get the latest view. See the below Article for detail.
My another post explains the sequence of the execution when page load
This is a nice article explaining the basics about the rendering process:
This video also explained the basic in 4 minutes.
This is a better video explaining how browser render a page
Below is the BEST video so far explaining this topic by CTO of Akamai: