Question

Choose one HTML5 API in the W3Cs HTML5 specification. In your own words, describe what this particular API does and give an example of how it can be used within a Web page. Please type out in text, as handwriting is often hard to read. Be as detailed as possible please. Thank you in advance!

Answer 1

The tools available to create powerful applications on the web platform are getting better with each passing year. The HTML5 specification has added a number of useful features in new APIs that you may not have delved into yet, likely because of the lack of browser support.

In this post, we’ll take a look at 10 HTML5 APIs that cover a whole slew of functionality and features that can help you create interactive websites, test the performance of your code, interact with a user’s device, and much more.

User Timing API:

The first step in speeding up a slow web application is working out where time is being spent. Measuring the time impact of areas of Javascript code is the ideal way to identify hot spots, which is the first step in finding how to improve performance. Fortunately the User Timing API provides a way that you can insert API calls at different parts of your Javascript and then extract detailed timing data that can be used to help you optimize.

API created for testing the performance of our code is the User Timing API. With the High Resolution Time API, we can retrieve the current time in sub-millisecond resolution but it leaves us with the pain of introducing a bunch of variables in our code. The User Timing API solves this and other problems.

It allows us to accurately measure and report the performance of a section of JavaScript code. It deals with two main concepts: mark and measure. The former represents an instant (timestamp), while the latter represents the time elapsed between two marks.

This API exposes four methods, all belonging to the window.performance object, that allow us to store and delete marks and measures. The mark(name) method is used to store a timestamp with an associated name, while measure(name[, mark1[, mark2]]) can be used to store the time elapsed between two marks with the provided name.

The desktop and mobile browsers that support the User Timing API are IE10+, Chrome 25+, and Opera 15+.

The User Timing interface allows the developer to create application specific timestamps that are part of the browser's performance timeline. There are two types of user defined timing event types: the "mark" event type and the "measure" event type.

mark events are named by the application and can be set at any location in an application. measure events are also named by the application but they are placed between two marks thus they are effectively a midpoint between two marks.

This document provides an overview of the mark and measure performance event types including the four User Timing methods that extend the Performance interface.

To get the current time in your web application, call the 'now()' method which forms an extension of the Performance interface. The following code shows how to do that:

var myTime = window.performance.now();

When trying to time web applications in the past you’d use something like Date.now() which returns a DOMTimeStamp. DOMTimeStamp returns an integer number of milliseconds as its value.

The User Timing interface provides functions that let us call methods at different places in our application that can provide a Hansel and Gretel style breadcrumb trail to let us track where the time is being spent.

The ‘mark()’ method is the main tool in our timing analysis toolkit. What mark() does is store a time stamp for us. What’s super useful about mark() is that we can name the time stamp, and the API will remember the name and the time stamp as a single unit.

Calling mark() at various places in your application lets you work out how much time it took you hit that ‘mark’ in your web application.

window.performance.mark('mark_fully_loaded');

The measure() method calculates the elapsed time between marks, and can also measure the time between your mark and any of the well-known event names in the PerformanceTiming interface.

Sometimes it’s useful to be able to get rid of a bunch of marks that you’ve set up. For example, you might do batch runs on your web application and so you want to start fresh each run.

It’s easy enough to get rid of any marks you’ve set up by calling 'clearMarks()'.

var items = window.performance.getEntriesByType('mark');

returns us a list of all the marks that have been hit in our web application, whilst the code:

var items = window.performance.getEntriesByType('measure');

returns us a list of all the measures we’ve made.

The User Timing API gives you a lot of great tools to apply to any aspect of your web application. Narrowing down the hot-spots in your application can be easily achieved by sprinkling API calls throughout your web application and post-processing the timing data generated to create a clear picture of where time is being spent. But what if your browser doesn’t support this API? No problem, you can find a great polyfill here that emulates the API really well and plays nicely with webpagetest.org as well. So what are you waiting for? Try out the User Timing API on your applications now, you’ll work out how to speed them up and your users will thank you for making their experience so much better.