Skip to content

Instantly share code, notes, and snippets.

@derek-knox
Last active March 7, 2018 07:03
Show Gist options
  • Save derek-knox/d204328e351a34962d143e46c5ae86d9 to your computer and use it in GitHub Desktop.
Save derek-knox/d204328e351a34962d143e46c5ae86d9 to your computer and use it in GitHub Desktop.
Simple method definition and execution with detailed comments on browser and engine behavior. Anything missing or incorrect in the comment breakdown?
function makeBackgroundBlack() {
document.body.style.backgroundColor = '#000000';
}
makeBackgroundBlack();
/*
- browser parses html
- browser sees <script> - blocks (and downloads if src attr)
- browser starts engine
- engine compiles script
- engine executes script
- stack frame added - main()
- read
- code found
- scan statement (function declaration)
- evaluate statement
- function keyword recognized
- function is named
- update heap - makeBackgroundBlack = function() { document.body.style.backgroundColor = '#000000'; }
- read
- code found
- scan statement (function expression)
- evaluate statement
- identifier 'makeBackgroundBlack' found
- get identifier value
- look in stack - not found
- look in heap - found
- value found
- stack frame added - makeBackgroundBlack()
- read
- code found
- scan statement (assignment expression)
- evaluate statement
- '#000000' value stored in frame
- identifier 'document' found
- get identifier value
- look in stack - not found
- look in heap - found
- value found
- get nested identifer value (body > style > backgroundColor)
- value found
- assign stored frame value of '#000000' to document.body.style.backgroundColor identifier
- stack frame removed - makeBackgroundBlack()
- stack frame removed - main()
- event loop start
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment