WebAPPGeneralLifeCycle

This page tries to create a general model to describe life cycle of all APPs. With this model, we have a well defined and shared set of terminologies to describe performance characters of an APP, and to define a framework for APPs. With terminologies and framework, APPs can be monitored in a stable way, and be continuously improved.

Stages of Life Cycle

• Launch the App
  • The user touches the homescreen.
  • Request a child process to handle it.
• Document loading
  • This stage include parsing the first page and javascript, and running javascript for initialization.
    • Keep execution time of scripts here as short as possible.
    • Suggest to put only setTimeout() in |onload| to postpone initialization code until next stage.
    • Load JS files at next stage if possible.
  • The first picture will be showed at end of this stage.
    • Show only minimal static content.
    • No l10n content, or it is showed as empty if there is. (l10n would contribute to the latency of the first picture.)
    • No dynamic content, or is showed with a default state.
    • All content, or icons, are showed if only they don't change their sizes and positions later.
• Data loading
  • After the completion of document loading.
  • This should be moved out of |onload| event to avoid its callback block rendering of first page. For example, |setTimeout()|.
  • Read data from storage, remote servers, .... etc.
• Prepare UI
  • Compute with data from the previous stage.
    • Transform, summarize, translate, ... etc.
  • Update the DOM tree to create a picture (frame) to the user.
• Visual loaded

Load data and Prepare UI could be intermixed.