Parsing — crosssections

HTML Parsing Pipeline WHATWG HTML

Token Type	Description	Example
`DOCTYPE`	Document type declaration	`<!DOCTYPE html>`
`StartTag`	Opening element tag	`<div class="x">`
`EndTag`	Closing element tag	`</div>`
`Character`	Text content	`Hello World`
`Comment`	HTML comment	`<!-- note -->`
`EOF`	End of file	(implicit)

DOM Tree Construction Document Object Model

Node Type	Interface	nodeType
Element	`Element`	1
Attribute	`Attr`	2
Text	`Text`	3
Comment	`Comment`	8
Document	`Document`	9
DocumentType	`DocumentType`	10

CSS Parsing CSSOM

CSS Token	Description	Example
`ident`	Identifier	`margin`
`hash`	ID selector	`#header`
`dimension`	Number with unit	`16px`
`string`	Quoted string	`"Arial"`
`function`	Function call	`rgb(`
`delim`	Delimiter	`.` `*`

JavaScript Execution script element

Attribute	Fetch	Execute	Order
(none)	Blocking	Immediately	Document order
`async`	Parallel	When ready	Fetch completion
`defer`	Parallel	After parse	Document order
`type="module"`	Parallel	After parse	Dependency order

Render Tree DOM + CSSOM

Element	In Render Tree?	Reason
`<html>`	Yes	Root element
`<head>`	No	display: none
`<script>`	No	display: none
`<div hidden>`	No	hidden attribute
`display: none`	No	CSS display value
`visibility: hidden`	Yes	Still occupies space

Critical Rendering Path performance

Resource	Blocking Type	Optimization
CSS `<link>`	Render-blocking	Inline critical CSS
JS `<script>`	Parser-blocking	defer or async
Fonts	Render-blocking	font-display: swap
Images	Non-blocking	loading="lazy"

Document Events DOMContentLoaded vs load

Event	Fires When	Use Case
`DOMContentLoaded`	HTML parsed, defer scripts done	DOM manipulation
`load`	All resources loaded	Image dimensions, full page
`beforeunload`	User navigating away	Unsaved changes warning
`unload`	Page being unloaded	Cleanup (deprecated)

document.readyState
├── "loading"      → document still loading
├── "interactive"  → DOM ready (DOMContentLoaded)
└── "complete"     → all resources loaded (load)