markdown the_browser_and_js_engine_DRAFT.md

Posted 2021-05-06

## Feedback on the course here
[Feedback Form](https://docs.google.com/forms/d/e/1FAIpQLSeGNFA9YYgP2Awz_2RnGm1RjdEDx-CWul6nTT5BQ4f7lDI4Ug/viewform?entry.1364471353=the%20browser&entry.1404187043&entry.1060203151&entry.936748505&entry.90248072)

## Course Content

 1. A New Metal Model
    
    a. The Browser is just a piece of software
    
    b. The Browser is made up of several components responsible for
    specific pieces of work
		
		i. HTML Engine

		ii. CSS Engine

		iii. JavaScript Engine

		iv. DOM Engine

		v. And More

 1. HTML, CSS and DOM Engines

	a. Html Engine: Parses HTML files and used by the browser to build the initial DOM structure

	b. CSS Engine: Parses CSS and applies styles to elements in the DOM

	c. DOM Engine: Builds a tree of objects that represent our page in memory. We refer to this tree as the DOM

3. HTTP Engine

	a. Gives the Browser access to the internet

	b. Http is Stateless

	c. Implements a Request and Response flow

4. How all these pieces work together to render a web page

5. The JavaScript and Event Engines

	a. JavaScript code is executed in chunks of memory called “Execution Context.”

	b. Execution of our JS code is done in two phases:

		i. Creation

		ii. Execution
	
	c. JavaScript is a Synchronous process

	d. The browser using the event queue to achieve ASYNC like code

6. Putting It All Together (Live Code Demo)
      
7. Resources
      1. https://www.youtube.com/watch?v=Bv_5Zv5c-Ts
      2. https://github.com/getify
      3. https://johnresig.com/
      4. https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be