This Week in HTML 5 – Episode 3

the event loop, the onhashchange event, and content sniffing for SVG images.

Welcome back to "This Week in HTML 5," where I'll try to summarize the major activity in the ongoing standards process in the WHATWG and W3C HTML Working Group.

The biggest news this week is the birth of the event loop.

To coordinate events, user interaction, scripts, rendering, networking, and so forth, user agents must use event loops as described in this section.

... An event loop has one or more task queues. A task queue is an ordered list of tasks, which can be:

Events

Asynchronously dispatching an Event object at a particular EventTarget object is a task.

Parsing

The HTML parser tokenising a single byte, and then processing any resulting tokens, is a task.

Callbacks

Calling a callback asynchronously is a task.

Using a resource

When an algorithm fetches a resource, if the fetching occurs asynchronously then the processing of the resource once some or all of the resource is available is a task.

Reacting to DOM manipulation

Some elements have tasks that trigger in response to DOM manipulation, e.g. when that element is inserted into the document.

The purpose of defining an event loop is to unify the definition of things that happen asychronously. (I want to avoid saying "events" since that term is already overloaded.) For example, if an image defines an onload callback function, exactly when does it get called? Questions like this are now answered in terms of adding tasks to a queue and processing them in an event loop.

• Revision 2074 defines event loops and task queues (as quoted above).
• Revision 2076, 2079, 2080, 2081, 2082, and 2083 define the behavior of media elements (like <audio> and <video>) in terms of the event loop.
• Revision 2084 defines the behavior of template and ref attributes, local database storage, and remote events in terms of the event loop.
• Revision 2085 defines the behavior of web sockets, postMessage, message ports, and setTimeout in terms of the event loop.
• Revision 2097 defines the behavior of an image's load event in terms of the event loop.

The other major news this week is the addition of the hashchange event, which occurs when the user clicks an in-page link that goes somewhere else on the same page, or when a script programmatically sets the location.hash property. This is primarily useful for AJAX applications that wish to maintain a history of user actions while remaining on the same page. As a concrete example, executing a search of your messages in GMail takes you to a list of search results, but does not change the base URL, just the hash; clicking the Back button takes you back to the previous view within GMail (such as your inbox), again without changing the base URL (just the hash). GMail employs some nasty hacks to make this work in all browsers; the hashchange event is designed to make those hacks slightly less nasty. Microsoft Internet Explorer 8 pioneered the hashchange event, and its definition in HTML 5 is designed to match Internet Explorer's behavior.

Other interesting changes this week:

• In last week's episode, I mentioned revision 2063, which allows HTML documents to contain both xml:lang and lang attributes as long as they are identical. Revision 2091 relaxes this restriction slightly to allow the xml:lang and lang attributes to differ by case (i.e. one could be uppercase and the other could be lowercase, and that is no longer an error). Discussion: xml:lang="" and lang=""
• Revision 2092 defines the parsing algorithm for empty table rows.
• Revision 2094 clarifies the meaning of whitespace by deferring to the Unicode definitions.
• Revision 2096 forbids content sniffing for SVG images. In order to use an SVG image in an <img src=""> attribute, the web server must ensure that the SVG image is served with a Content-Type: image/svg+xml HTTP header.

Tune in next week for another exciting episode of "This Week in HTML 5."