Load and execution sequence of a web page?

Load and execution sequence of a web page?

I have done some web based projects, but I don’t think too much about the load and execution sequence of an ordinary web page. But now I need to know detail. It’s hard to find answers from Google or SO, so I created this question.
A sample page is like this:

So here are my questions:

How does this page load?
What is the sequence of the loading?
When is the JS code executed? (inline and external)
When is the CSS executed (applied)?
When does $(document).ready get executed?
Will abc.jpg be downloaded? Or does it just download kkk.png?

I have the following understanding:

The browser loads the html (DOM) at first.
The browser starts to load the external resources from top to bottom, line by line.
If a