HTML5 – Performance

Performance is an important consideration when developing web pages and applications, as it directly affects the user experience. HTML5 introduces several new features that can help to improve the performance of web pages and applications.

One way to improve the performance of a web page is to use the async and defer attributes to load JavaScript files asynchronously. By default, the browser blocks the rendering of the page until all of the JavaScript files have been downloaded and parsed. This can cause delays in the rendering of the page, especially if the JavaScript files are large or there are many of them.

The async attribute allows you to specify that a JavaScript file should be loaded asynchronously, and the defer attribute allows you to specify that a JavaScript file should be loaded after the page has finished parsing.

Here is an example of how to use the async attribute to load a JavaScript file asynchronously:

<script src="/script.js" async></script>

In this example, the async attribute is used to specify that the script.js file should be loaded asynchronously.

Here is an example of how to use the defer attribute to load a JavaScript file after the page has finished parsing:

<script src="/script.js" defer></script>

In this example, the defer attribute is used to specify that the script.js file should be loaded after the page has finished parsing.

Another way to improve the performance of a web page is to use the preload and prefetch link types to preload or prefetch resources. The preload link type allows you to specify that a resource should be loaded as soon as possible, and the prefetch link type allows you to specify that a resource should be loaded in the background and stored in the cache for future use.

Here is an example of how to use the preload link type to preload a resource:

<link rel="preload" href="/style.css" as="style">

In this example, the preload link type is used to specify that the style.css file should be loaded as soon as possible.

Here is an example of how to use the prefetch:

<link rel="prefetch" href="/image.jpg">

In this example, the prefetch link type is used to specify that the image.jpg file should be loaded in the background and stored in the cache for future use.

You can also use the window.performance API to measure the performance of a web page. The window.performance API provides a range of performance-related features, such as:

• The window.performance.timing object, which provides information about the performance of various aspects of the page, such as the time to load the page, the time to render the page, and the time to complete various tasks.
• The window.performance.navigation object, which provides information about the navigation of the page, such as the type of navigation (e.g. reload, back/forward, etc.), and the number of redirects.
• The window.performance.memory object, which provides information about the memory usage of the page.

Here is an example of how to use the window.performance API to measure the time to load a page:

var timing = window.performance.timing;

var loadTime = timing.loadEventEnd - timing.navigationStart;

console.log('Page load time: ' + loadTime + 'ms');

In this example, the timing object is used to get the loadEventEnd and navigationStart properties, and the difference between these properties is calculated to determine the time to load the page. The loadTime variable is then logged to the console.