JavaScript page lifecycle

JavaScript DOMContentLoaded, load events, async defer, and resource loading

Learn JavaScript page lifecycle events with focused lessons on DOMContentLoaded, window load, beforeunload, unload, document.readyState, script async, script defer, and resource loading onload/onerror.

Page lifecycle and resource loading lessons

  1. DOMContentLoaded and load

    Compare DOMContentLoaded, window load, beforeunload, unload, readyState, and browser page lifecycle timing.

    Outcome: Run JavaScript at the right moment during page parsing, loading, and unload.

    • DOMContentLoaded
    • window load JavaScript
    • beforeunload JavaScript
    Study Page: DOMContentLoaded, load, beforeunload, unload
  2. Script async and defer

    Understand how script loading affects parsing, execution order, DOMContentLoaded, async scripts, and defer scripts.

    Outcome: Choose script loading attributes that preserve page speed and predictable execution order.

    • script async defer
    • defer JavaScript
    • async JavaScript
    Study Scripts: async, defer
  3. Resource loading onload and onerror

    Handle image, script, iframe, and external resource load and error events with onload and onerror.

    Outcome: Detect loaded and failed resources without confusing them with full page lifecycle events.

    • onload onerror JavaScript
    • resource loading JavaScript
    • script onerror
    Study Resource loading: onload and onerror