Skip to content

Instantly share code, notes, and snippets.

@kgrz
Forked from derek-knox/browser-and-engine.js
Created March 7, 2018 07:03
Show Gist options
  • Save kgrz/79a9b3997ce2432761e54aa723ca4a05 to your computer and use it in GitHub Desktop.
Save kgrz/79a9b3997ce2432761e54aa723ca4a05 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