Browser Event Loop [DRAFT]Created at 2017-02-19T01:49:56.000Z
- forget worker (only care browser context)
- forget nested document (only have root browser context)
finished parsing (after you got EOF)
- execute "scripts that will execute when the document has finished parsing" (a.k.a. defer)
- fire DOMContentLoaded on Document
- execute "scripts that will execute as soon as possible" (a.k.a. async?)
- fire load on Window
Browser context event loop
- execution paradigms:
- asynchronous "complete" algorithms (after "return")
- essentially, "event loop" runs below for each loop:
- pick a task
- run a task
- "Update the rendering"
- fire some special events (e.g. viewport resize)
- run some special callback (e.g. requestAnimationFrame)
- style calc, layout, paint ...
- kinds of tasks and when it's pushed to queue:
- resource fetching
- Q. how css resource fetching and rendering interleave ?
- or when first "Update the rendering" really starts ?
- Q. how special initial document loading is ?
- load HTML: https://html.spec.whatwg.org/multipage/browsers.html#read-html¨B¨K14K¨B
- load script:
- (ui) event firing, dispatching handlers execution
- all matched handlers for "single event" are executed as a single task.
- Q. how UA initiates hit-testing and queue event firing task is out of spec ?
- how about this ? https://html.spec.whatwg.org/multipage/interaction.html#activation
- interesting semantics for setTimeout
- wait for timer to finish
in parallelto mail loop and queue callback task after that.
Q. how image resouce fetching comes into event loop ?
- css transition/animation and style recalc ?
- about computedStyle ?
- Q. how
HTMLElement#offsetWidthinterfere browser event loop ?
- thing is offsetWidth is defined in https://www.w3.org/TR/cssom-view-1/ (today: https://www.w3.org/TR/2016/WD-cssom-view-1-20160317/)
- so, if something "invalidates layout", script referring offsetWidth invokes re-layout, which is not necessary so often for normal "event loop" since "update the rendering" has to happen as often as reasonable animation frame.