Privacy on the web

Privacy on the web
==================

People use websites for several important tasks such as banking, shopping, entertainment, and paying their taxes. In doing so, they are required to share personal information with those sites. Users place a certain level of trust in the sites they share their data with. If that information fell into the wrong hands, it could be used to exploit users, for example by profiling them, targeting them with unwanted ads, or even stealing their identity or money.

Modern browsers already have a wealth of features to protect users' privacy on the web, but that's not enough. To create a trustworthy and privacy-respecting experience, developers need to educate their site users in good practices (and enforce them). Developers should also create sites that collect as little data from users as possible, use the data responsibly, and transport and store it securely.

In this article, we:

* Define privacy and important related terms.
* Examine browser features that automatically protect user privacy.
* Look at what developers can do to create privacy-respecting web content that minimizes the risk of users' personal information/data being obtained unexpectedly by third parties.
Defining privacy terms and concepts
-----------------------------------

Before we look at the various privacy and security features available to use on the web, let's define some important terms.

### Privacy and its relationship with security

It is hard to talk about privacy without also talking about security — they are closely related, and you can't really create privacy-respecting websites without good security. Therefore, we shall define both.

* **Privacy** refers to the act of giving users the right to control how their data is collected, stored, and used, and not using it irresponsibly. For example, you should clearly communicate to your users what data you are collecting, who it will be shared with, and how it will be used. Users must be given a chance to consent to your terms of data usage, have access to all of their data that you are storing, and delete it if they no longer wish you to have it. You must also comply with your own terms: nothing erodes user trust like having their data used and shared in ways they never consented to. And this isn't just ethically wrong; it could be against the law. Many parts of the world now have legislation that protects consumer privacy rights (for example the EU's GDPR).
* **Security** is the act of keeping private data and systems protected against unauthorized access. This includes both company (internal) data, and user and partner (external) data. It is no use having a robust privacy policy that makes your users trust you if your security is weak and malicious parties can steal their data anyway.
### Personal and private information

**Personal information** is any information that describes a user. Examples include:

* Physical attributes such as height, gender expression, weight, hair color, or age
* Postal address, email address, phone number, or other contact information
* Passport number, bank account, credit card, social security number, or other official identifiers
* Health information such as medical history, allergies, or ongoing conditions
* Usernames and passwords
* Hobbies, interests, or other personal preferences
* Biometric data such as fingerprints or facial recognition data

**Private information** is any information that users do not want shared publicly and must be kept private (i.e., information that is accessible only by a certain group of authorized users). Some private data is private by law (for example medical data), and some is private more by personal preference.

### Personally identifiable information

Following on from the above section, **personally identifiable information** (PII) is information that can be used, in whole or in part, to track down and/or identify a specific person. For example, if a site leaks a list of users' names and zip codes online, a bad actor could almost certainly use this information to find their full addresses. Even if a full-scale leak does not happen, it is still possible to identify users through less obvious means, such as the browsers they are using, the devices they are using, specific fonts they have installed, and so on.

### Tracking

**Tracking** refers to the process of a third party recording a user's activity across many different websites. This can be done in various ways, for example:

* Looking at cookies that the user has set (for example, to persist a login or personalization details across different sites) if the third party is embedded on the same domain.
* Looking at the `Referer` header to see where a user has navigated from.

Tracking data can be used to profile a user and their interests and preferences, which is usually bad and can be annoying to various degrees. For example:

* **Targeted ads**: Everyone has had the unnerving experience of researching some items to buy on one device and then suddenly being bombarded by adverts for the same products on all their other devices.
* **Selling or sharing data**: Some third parties have been known to compile tracking data and then sell it to/share it with others to use for various purposes, like targeted ads. This is obviously highly unethical and may also be illegal, depending on where in the world it happens.
* **Prejudice via data**: In the worst cases, sharing data could result in the user being unfairly disadvantaged. For example, imagine an insurance company finding out data points about a potential customer that they didn't consent to share, and using them as a justification for increasing insurance premiums.

**Note:** See What can third-party resources do? for a useful related scenario description and additional information.

### Fingerprinting

The process of identifying users by building up a store of data points about them is known as **fingerprinting**. This process usually has negative connotations because it can be used to track user activity across different websites in a covert manner. Think about it — tracking is annoying enough even when you consent to it, but having it happen without consent feels really invasive and erodes trust very quickly.

Modern browsers take steps to help prevent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that prevent it from being used for identification purposes.

For example, if a website queries a user's browser for the elapsed time, a comparison of that time to the time as reported by the server might be useful as a factor in fingerprinting. Because of this, browsers typically introduce a small amount of variability to timers in order to make them less useful for identifying the user's system. We'll look at other browser privacy-enhancing technologies in the section below.

**Note:** See also Fingerprinting over on web.dev for additional useful information.

Privacy features provided by browsers
-------------------------------------

Browser vendors are aware of the need to protect user privacy and the negative effects of tracking, fingerprinting, etc., on user experience. To this end, they have implemented various features that enhance privacy protection and/or mitigate threats. In this section, we look at different categories of privacy protection that browsers apply automatically.

### HTTPS by default

Transport Layer Security (TLS) provides security and privacy by encrypting data during transport over the network and is the technology behind the HTTPS protocol. TLS is good for privacy because it stops third parties from being able to intercept transmitted data and use it maliciously, for example for tracking.

All browsers are moving towards requiring HTTPS by default; this is practically the case already because you can't do much on the web without this protocol.

Related topics are as follows:

Certificate Transparency

An open standard for monitoring and auditing certificates, creating a database of public logs that can be used to help identify incorrect or malicious certificates.

HTTP Strict Transport Security (HSTS)

HSTS is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they can only use HTTPS to communicate with the server.

HTTP/2

While HTTP/2 technically does not *have* to use encryption, most browser developers support it only when used with HTTPS; so in that regard, it can be thought of as a feature to enhance security/privacy.

### Opt-in for "powerful features"

So-called "powerful" web API features that provide access to potentially sensitive data and operations are available only in secure contexts, which basically means HTTPS-only. Not only that, but these web features are gated behind a system of user permissions. Users have to explicitly opt in to features like allowing notifications, accessing geolocation data, making the browser go into fullscreen mode, accessing media streams from webcams, using web payments, etc.

### Anti-tracking technology

Browsers have implemented several anti-tracking features that automatically enhance their users' privacy protection. Many of these block or limit the ability of third-party sites embedded in `<iframe>`s to access cookies set on the top-level domain, run tracking scripts, etc.

For example, one change that was agreed upon and rolled out across all browsers was an update to the `Set-Cookie` header `SameSite` attribute's default value to `Lax` (see Changes to the default behavior without SameSite).

This attribute controls whether cookies are sent with cross-site requests and can provide some protection against tracking and CSRF attacks. However, the default was `None`, and not many developers adopted it, meaning cross-site cookies were being sent **everywhere**. Changing the default value to `Lax` means that cookies are not sent on cross-site requests, such as on requests to load images or frames, but are sent when a user is navigating to the origin site from an external site, for example, when following a link.

**Note:** Browsers are aiming to eventually phase out third-party cookies altogether, while providing alternative solutions for common use cases that currently require them.

#### Firefox anti-tracking features

Firefox tracking protection

Firefox Desktop and Firefox for Android include built-in tracking protection. In Private Browsing windows (tabs in Firefox for Android), Firefox will block content loaded from domains that track users across sites.

Enhanced tracking protection

This feature blocks trackers that follow you around online to collect information about your browsing habits and interests without breaking site functionality. It also includes protections against harmful scripts, such as malware that drains your battery.

Redirect tracking protection

Firefox includes protection against redirect tracking, an abuse of cross-site navigation. In redirect tracking, a tracker momentarily redirects a user to their website for first-party storage to be able to track that user across websites.

State partitioning

This concept is a reworking of how Firefox manages client-side state (i.e., data stored in the browser) to mitigate the ability of websites to abuse cross-site tracking. This is achieved by providing what is effectively a "different", isolated storage location to every website a user visits.

Storage access policy

A storage access policy can block cookies and other site data from third-party tracking resources. This policy is designed as an alternative to the older cookie policies available in Firefox for many years. See also our Storage Access Policy Errors reference.

Total cookie protection

Firefox gives third-party cookies a separate cookie jar per site, so they can't be tracked across sites

#### Chrome anti-tracking features

Google's privacy sandbox project is a series of proposals to satisfy cross-site use cases without requiring third-party cookies or other tracking mechanisms. Themes include identity and tracking protection, more privacy-respecting ad solutions, preventing covert tracking, and safely sharing data across browsing contexts.

Some of the most developed parts of the privacy sandbox project are as follows:

Cookies Having Independent Partitioned State (CHIPS)

Also known as **partitioned cookies**, CHIPs allows developers to opt a cookie into partitioned storage, with a separate cookie jar per top-level site.

Related website sets

A mechanism for a company to declare relationships between different sites. Supporting browsers will then allow limited third-party cookie access across those sites for specific purposes, via the Storage Access API.

Third-party cookie default

Chrome does not yet block third-party cookies by default, but this can be set by users in Chrome settings.

#### Safari anti-tracking features

Intelligent Tracking Prevention

There are multiple privacy enhancements in the Safari browser to prevent tracking.

#### Edge anti-tracking features

Tracking prevention

Edge blocks trackers from unvisited sites; in addition, known harmful trackers are blocked by default.

Third-party cookie default

Edge does not yet block third-party cookies by default, but this can be set by users in Settings.

Privacy considerations for client-side developers
-------------------------------------------------

There are several actions web developers can and should take to improve privacy for their users. The below sections discuss the most important ones. Some of the categories are not purely technical tasks as such and will involve collaboration with other team members.

Collect data ethically
----------------------

Companies collect lots of different data from their users for a variety of different reasons:

* Usernames, passwords, emails, etc. for authentication purposes.
* Emails, postal addresses, and phone numbers for communication.
* Age, gender, geographical location, favorite pastimes, and a host of other PII for anything from site personalization to customer satisfaction surveys.
* Browsing habits on their sites and other sites, to measure page and feature success metrics.
 And so much more.

When collecting data from your customers, you have an opportunity to behave with integrity, show them that you are trustworthy, and build a great relationship with them, in turn, improving your brand and your chance of success.

The ethics of data collection can be broken down into three simple principles:

* Don't collect more data than you need
* Communicate clearly how you are going to use the data you collect
* Delete the data once you have finished with it

**Note:** The tips provided below make for a better, more privacy-aware user experience, but many of them are required by law to comply with regulations, for example the GDPR in the EU. You should make sure to find out what regulations apply to you in your locale, and what you need to do to comply with them.

### Don't collect more data than you need

It is tempting to ask for a lot of data from your users because you think it might be useful in the future. However, every bit of extra data you collect adds risk to your users' privacy and increases the chance that they will abandon the step they are performing (whether it is filling out a survey or signing up for a service).

It is good to anonymize data. You should also consider whether you can get what you need by making your data request less granular. As an example, instead of asking a user their favorite products, you could ask them to select between more general categories.

The best way to protect user privacy though is to minimize the data you collect. Referring to the previous example, you could infer the same data by looking at user purchase history. As another example, users really appreciate being able to buy products anonymously. You shouldn't force them to sign up for an account; if it's not necessary for the service to operate, it should be their choice.

### Communicate clearly how you are going to use the data you collect

Once you have decided what data you are going to collect, you should publish a privacy policy on your site that clearly states:

* Data that you collect
* Ways in which you use the data
* Parties with whom you tend to share the data, if at all, and a declaration that you will ask for user consent before sharing
* Duration for which you keep the data for before it is deleted
* Ways in which users can view the data you have collected from them and a way for them to delete it if they want to

When providing you with data, your users should be given an opportunity to read your privacy policy, and consent to it. They should be able to control if they are happy with this and agree to your terms. And as indicated above, they should also get to see what data of theirs you have collected, and delete it if they want to.

When you've published your privacy policy, you need to make sure that you comply with it — doing what you say you are going to do is very important in building user trust. You should only collect the data you say you'll collect, and only use it for the purpose you say you'll use it for. If someone from your company comes up with a clever new way to use existing data, that still isn't OK under the terms of your policy if it doesn't specify that you'll use it for that purpose. If users consented to the use of their data for a specific purpose and that purpose expands, you may have to consider obtaining new consent.

### Delete the data once you have finished with it

Earlier on, we mentioned giving users a way to see what data of theirs you have collected, and delete it if they want to. You could possibly do this as part of the same experience they can use to delete their account (their data goes with it), or make them two separate options. Either way, the options should be easy to find.

Allowing the user to choose when significant portions of data get deleted is very empowering, and builds trust, but there may be some bits of data that you will want to handle deletion of yourself. For example, some data might only be used for a few hours or minutes and then deleted, like data that is used during the administration of a user's session while they are logged in.

**Note:** The `Clear-Site-Data` HTTP response header is very useful for clearing short-lived user data — it instructs the browser to clear out its cache and/or cookies and/or storage (e.g. Web Storage or IndexedDB data). For example, you might get your server to send it along with a "logged out confirmation" page so that once the user is logged out, their data is safely removed.

Cut down on tracking cookies
----------------------------

Earlier on we discussed tracking, and some of the unethical purposes they are used for. We shouldn't have to spell out how such uses can erode user trust; wherever possible, you should only use cookies for ethical uses, such as transferring login or other personalization status across sites.

Also recall from earlier that browsers are implementing a number of technologies to limit the usage of tracking cookies, especially cross-site cookies, with the eventual aim of removing them altogether. It is a good idea to prepare for this, by limiting the amount of tracking activities you rely on, and/or implementing desired information persistence in other ways. For example:

* Use an alternative client-side storage mechanism such as Web Storage to persist data. This does have the downside that the data is stored per-origin, so it can't be shared.
* Use a technology such as the Storage Access API to allow your sites to opt-in to using cross-site cookies in a safe and controlled way.
* Use a server-side solution for data persistence.

**Note:** To reiterate what we said earlier, make sure you clearly communicate to your users what you are doing via your privacy policy, allow them to opt-in, and easily delete their data if they change their mind at a later date.

### Carefully manage third-party resources

Of course, it would be so easy to manage privacy if you were only worried about resources you have created (code, cookies, sites, etc.). The real challenge comes from the fact that your site will likely use third-party resources — this can include libraries, frameworks, APIs, externally-hosted resources such as images or videos, and a host of other resources.

Third-party resources are an essential part of modern web development, and bring with them a lot of power. However, any third party resource you allow onto your site potentially has the same power as your own resources. A malicious embedded script could secretly steal your users' data, for example sending it off to a third-party server. And a third-party service could use the `Referer` header sent with every request to build up a profile of user activity that could be used for tracking.

It is important to audit all of the third party resources you use on your site. Make sure you know what data they are collecting, what requests they are making and to whom, what their privacy policies are. Your carefully designed privacy policy is no use if you are using a third-party script that violates it.

**Note:** There are various tools out there that can help you build up a picture of what requests a site is making, for example the Request Map Generator.

Once you have audited your third-party resources and understand what they are doing, you should then consider their negatives as a trade-off for the value they bring. If a third-party script is free and really useful but collects quite a lot of user data, you could:

1. Accept that trade-off, update your privacy policy to include details of it, and hope that it doesn't impact your users' trust too much.
2. Look for an alternative, less data-hungry third party tool.
3. Build your own tool.

The following list provides some tips on how to mitigate privacy risks inherent with using third party resources:

* When embedding third party resources, consider if there is a way to achieve the same or a similar effect with less privacy impact. For example, it might be fun to have a social media post viewer embedded on your site, but is it really necessary? Wouldn't a link to your social media page be sufficient? Also, some third-party services have privacy-enhancing options. See for example YouTube's Embed videos & playlists > Turn on privacy-enhanced mode.
* Where possible, you should block third parties from receiving a `Referer` header when you make requests to them. This can be done in a pretty granular way, for example by including rel="noreferrer" on external links:

```html
<a href="/some/external/resource" rel="noreferrer"></a>
```

Or you could set this more globally for the page or site, for example by using the `Referrer-Policy` header.

**Note:** See also Referer header: privacy and security concerns.
* Use the `Permissions-Policy` HTTP header to control access to "powerful features" (such as notifications, geolocation data, accessing media streams from webcams, etc.). This can be useful for privacy because it stops third party sites from doing unexpected things with these features, and users don't want to be unnecessarily bombarded by permissions prompts that they may not understand.
 The following example disables Picture-in-Picture everywhere, allows Geolocation to be used only on one specific origin, and allows camera usage everywhere:

```http
Permissions-Policy: picture-in-picture=(), geolocation=(self https://example.com), camera=\*;
```

To enable usage of "powerful features" inside third party sites embedded inside `<iframe>` elements, you specify permissions policies inside an `allow` attributes. The `<iframe>` equivalent of the above is as follows:

```html
<iframe
 src="https://example.com"
 allow="picture-in-picture 'none'; geolocation 'self' https://example.com; camera '\*'">
</iframe>
```

**Note:** See also our Permissions-Policy guide for more information, and permissionspolicy.com for useful tools including a policy generator.

**Note:** The `<iframe>` `sandbox` attribute also allows you to allow or disallow usage of certain features.

**Note:** See Third parties over on web.dev for additional useful information on auditing and more.

Protect user data
-----------------

You need to make sure that, once you have collected data from your users, that it is transmitted and stored securely. This is more of a security topic, but it is worth mentioning here — a good privacy policy is no good if your security is lax and attackers can steal the data from you.

The below tips offer some guidance on protecting your user's data:

* Security is hard to get right. When implementing a secure solution that involves data collection — particularly if it is sensitive data such as log-in credentials — it makes sense to use a reputable solution from a well-respected provider. For example, any respectable server-side framework will have built-in features to protect against common vulnerabilities. You could also consider using a specialized product for your purpose — for example an identity provider solution, or a secure online survey provider.
* If you want to roll out your own solution for collecting user data, make sure you understand what you are doing. Hire an experienced server-side developer and/or security engineer to implement the system, and ensure it is tested thoroughly. Use multifactor authentication (MFA) to provide better protection. Consider using a dedicated API such as Web Authentication or Federated Credential Management to streamline the client-side of the app.
* When collecting user sign-up information, enforce strong passwords so that your user's account details cannot be easily guessed. Weak passwords are one of the main causes of security breaches. In addition, encourage your users to use a password manager so that they can use more complex passwords, without needing to worry remembering them, thereby avoiding a security risk by writing them down.
* Don't include sensitive data in URLs — if a third party intercepts the URL (for example via the `Referer` header), they could steal that information. Use `POST` requests rather than `GET` requests to avoid this.
* Consider using tools like Content Security Policy and Permissions Policy to enforce a set of feature usage on your site that makes it harder to introduce vulnerabilities. Be careful when doing this — if you block usage of a feature that a third party script relies on to work, you may end up breaking your site's functionality. This is something you can look into when auditing your third party resources (see Carefully manage third-party resources).
See also
--------

* Web security
* Learn Privacy on web.dev
* The Privacy Sandbox on developer.chrome.com
* Lean Data Practices on mozilla.org


Web performance

Web performance
===============

Web performance is the objective measurements and the perceived user experience of load time and runtime. Web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth? are buttons clickable? Are pop-ups quick to load and display, and do they animate smoothly as they do so? Web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.

The longer it takes for a site to respond, the more users will abandon the site. It is important to minimize the loading and response times and add additional features to conceal latency by making the experience as available and interactive as possible, as soon as possible, while asynchronously loading in the longer tail parts of the experience.

There are tools, APIs, and best practices that help us measure and improve web performance. We cover them in this section:

Key performance guides
----------------------

Animation performance and frame rateAnimation on the web can be done via `SVGAnimationElement`, `window.requestAnimationFrame`, including `canvas` and `WebGL_API`, CSS `animation`, `video`, animated gifs and even animated PNGs and other image types. The performance cost of animating a CSS property can vary from one property to another, and animating expensive CSS properties can result in jank as the browser struggles to hit a smooth FPS.

Critical rendering pathThe Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance.
 The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

CSS and JavaScript animation performanceAnimations are critical for a pleasurable user experience on many applications. There are many ways to implement web animations, such as CSS `transition`/`animation` or JavaScript-based animations (using `Window.requestAnimationFrame`). In this article, we analyze the performance differences between CSS-based and JavaScript-based animation.

Lazy loading**Lazy loading** is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times.

Navigation and resource timings**Navigation timings** are metrics measuring a browser's document navigation events. **Resource timings** are detailed network timing measurements regarding the loading of an application's resources. Both provide the same read-only properties, but navigation timing measures the main document's timings whereas the resource timing provides the times for all the assets or resources called in by that main document and the resources' requested resources.

Optimizing startup performanceImproving your startup performance is often one of the highest value performance optimizations that can be made. How long does your app take to start up? Does it seem to lock up the device or the user's browser while the app loads? That makes users worry that your application has crashed, or that something else is wrong. Good user experience includes ensuring your app loads quickly. This article provides performance tips and suggestions for both writing new applications and porting applications to the web from other platforms.

Performance budgetsA performance budget is a limit to prevent regressions. It can apply to a file, a file type, all files loaded on a page, a specific metric (e.g. Time to Interactive), a custom metric (e.g. Time to Hero Element), or a threshold over a period of time.

Performance fundamentalsPerformance means efficiency. In the context of Open Web Apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.

Performance Monitoring: RUM vs. synthetic monitoring**Synthetic monitoring** and **real user monitoring (RUM)** are two approaches for monitoring and providing insight into web performance. RUM and synthetic monitoring provide for different views of performance and have benefits, good use cases and shortfalls. RUM is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term performance issues during development. In this article we define and compare these two performance monitoring approaches.

Populating the page: how browsers workUsers want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.

Recommended Web Performance Timings: How long is too long?There are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7ms) and responding to user input (50 to 200ms).

Speculative loading**Speculative loading** refers to the practice of performing navigation actions (such as DNS fetching, fetching resources, or rendering documents) before the associated pages are actually visited, based on predictions as to what pages the user is most likely to visit next.

Understanding latency**Latency** is the time it takes for a packet of data to travel from source to a destination. In terms of performance optimization, it's important to optimize to reduce causes of latency and to test site performance emulating high latency to optimize for users with lousy connections. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it.

Using dns-prefetch**`DNS-prefetch`** is an attempt to resolve domain names before resources get requested. This could be a file loaded later or link target a user tries to follow.

Beginner's tutorials
--------------------

The MDN Web Performance Learning Area contains modern, up-to-date tutorials covering Performance essentials. Start here if you are a newcomer to performance:

Web performance: brief overview

Overview of the web performance learning path. Start your journey here.

What is web performance?

This article starts the module off with a good look at what performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make performance part of our web development workflow.

How do users perceive performance?

More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.

Web performance basics

In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.

HTML performance features

Some attributes and the source order of your markup can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.

Multimedia: images and video

The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. Additional tips like removing audio tracks from background videos can improve performance even further. In this article we discuss the impact video, audio, and image content has on performance, and the methods to ensure that impact is as minimal as possible.

CSS performance features

CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.

JavaScript performance best practices

JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.

Using Performance APIs
----------------------

Resource Timing API

Resource loading and timing the loading of those resources, including managing the resource buffer and coping with CORS

User Timing API

Create application specific timestamps using the user timing API's "mark" and "measure" entry types - that are part of the browser's performance timeline.

Beacon API

The Beacon interface schedules an asynchronous and non-blocking request to a web server.

Intersection Observer API

Learn to time element visibility with the Intersection Observer API and be asynchronously notified when elements of interest becomes visible.

Other documentation
-------------------

Firefox Profiler Performance Features

This website provides information on how to use and understand the performance features in your developer tools, including Call Tree, Flame Graph, Stack Chart, Marker Chart and Network Chart.

Profiling with the built-in profiler

Learn how to profile app performance with Firefox's built-in profiler.

Glossary Terms
--------------

* Beacon
* Brotli compression
* Client hints
* Code splitting
* CSSOM
* Domain sharding
* Effective connection type
* First contentful paint
* First CPU idle
* First input delay
* First meaningful paint
* First paint
* HTTP
* HTTP/2
* Jank
* Latency
* Lazy load
* Long task
* Lossless compression
* Lossy compression
* Main thread
* Minification
* Network throttling
* Packet
* Page load time
* Page prediction
* Parse
* Perceived performance
* Prefetch
* Prerender
* QUIC
* RAIL
* Real User Monitoring
* Resource Timing
* Round Trip Time (RTT)
* Server Timing
* Speculative parsing
* Speed index
* SSL
* Synthetic monitoring
* TCP handshake
* TCP slow start
* Time to first byte
* Time to interactive
* TLS
* Transmission Control Protocol (TCP)
* Tree shaking
* Web performance
See also
--------

HTML

* The `<picture>` Element
* The `<video>` Element
* The `<source>` Element
* The `<img> srcset` attribute
    + Responsive images
* Preloading content with `rel="preload"`
* https://w3c.github.io/preload/

CSS

* will-change
* GPU v CPU
* Measuring layout
* Font-loading best practices

JavaScript

* DOMContentLoaded
* Garbage collection
* requestAnimationFrame

APIs

* Performance API
* Navigation Timing API
* Media Capabilities API
* Network Information API
* PerformanceNavigationTiming
* Battery Status API
* Navigator.deviceMemory
* Intersection Observer
* Using the User Timing API
* High Resolution Timing API (https://w3c.github.io/hr-time/)
* Resource Timing API
* Page Visibility
* Cooperative Scheduling of Background Tasks API
    + requestIdleCallback()
* Beacon API
* Resource Hints - dns-prefetch, preconnect, prefetch, and prerender
* FetchEvent.preloadResponse
* Performance Server Timing API

Headers

* Content-encoding
* HTTP/2
* gZip
* Client Hints

Tools

* Performance in Firefox Developer Tools

Additional Metrics

* Speed Index and Perceptual Speed Index

Best Practices

* Using Service Workers
* Using Web Workers
    + Web Workers API
* Offline and background operation
* Caching
* Content Delivery Networks (CDN)


Demos of open web technologies

Demos of open web technologies
==============================

Mozilla supports a wide variety of exciting open web technologies, and we encourage their use. This page offers links to interesting demonstrations of these technologies.

If you know of a good demonstration or application of open web technology, please add a link to the appropriate section here.

2D Graphics
-----------

### Canvas

* Blob Sallad: an interactive blob using JavaScript and canvas (code demos)
* miniPaint: Image editor (source code)
* Zen Photon Garden (source code)
* Multi touch in canvas demo (source code)
### SVG

* Bubblemenu (visual effects and interaction)
* Blobular (interactive)
* Summer HTML image map creator (source code)
### Video

* Video 3D Animation "mozilla constantly evolving"
* Video 3D Animation "Floating Dance"
* Video 3D Animation "The Gravel Institute: Monopoly
3D Graphics
-----------

### WebGL

* Web Audio Fireworks
* Aquarium
* Dynamic cubemap
* Kai 'Opua (source code)
### Virtual Reality

* The Polar Sea (source code)
* Sechelt fly-through (source code)
CSS
---

* CSS floating logo "mozilla"
* CSS Blockout
* Rubik's cube
* Loader with blend modes
* CSS-based single page application (source code)
### Transformations

* Impress.js (source code)
* Flickr Polaroid Stack
Games
-----

* IoQuake3 (source code)
* Kai 'Opua (source code)
Web APIs
--------

### Notifications API

* HTML Notifications (source code)
### Web Audio API

* Audio Context states demo
* Audio analyser - graphical visualization of an audio signal
* IIR filter node
* Multi track
* Stereo-panner-node
### File API

* Slide My Text - presentation from plain text files
### Web Workers

* Web Worker Fractals
* Photo editor
* Coral generator
* Raytracer
* Fibonacci


WebDriver

WebDriver
=========

WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform- and language-neutral wire protocol as a way for out-of-process programs to remotely instruct the behavior of web browsers.

To have the ability to write instruction sets that can be run interchangeably in many browsers on different platforms is critical to deliver a consistent experience to users. With the new wave of developments on the web platform, the increase diversity in devices and demands for real interoperability between the technologies, WebDriver provides tooling for cross-browser testing.

Provided is a set of interfaces to discover and manipulate DOM elements in web documents and to control the behavior of a user agent. It is primarily intended to allow web authors to write tests that automate a user agent from a separate controlling process, but may also be used in such a way as to allow in-browser scripts to control a — possibly separate — browser.

Usage
-----

So what does WebDriver let you do and what does it look like? Since WebDriver is programming language neutral, the answer to this question depends on which WebDriver client you're using and the choice of language.

But using a popular client written in Python, your interaction with WebDriver might look like this:

```python
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support.expected_conditions import presence_of_element_located

with webdriver.Firefox() as driver:

    driver.get("https://google.com/ncr")
    wait = WebDriverWait(driver, 10)
    driver.find_element(By.NAME, "q").send_keys("cheese" + Keys.RETURN)
    wait.until(presence_of_element_located((By.XPATH, '//\*[@id="rcnt"]')))
    results = driver.find_elements(By.XPATH, "//a[@href]")

    for i, elem in enumerate(results):
        print(f'#{i} {elem.text} ({elem.get\_attribute("href")})')
```

This might produce output akin to this:
```

#1 Cheese - Wikipedia (https://en.wikipedia.org/wiki/Cheese)
```

Reference
---------

### Commands

Commands

* Close Window
* Get Element Attribute
* Get Element Property
* Get Element Tag Name
* Get Timeouts
* Get Window Handles
* Get Window Rect
* New Window
* Set Timeouts
* Set Window Rect
### Types

Types

* Error object
* Timeouts object
* WebElement
* WebWindow
### Capabilities

Capabilities

* acceptInsecureCerts
* firefoxOptions
* webSocketUrl
### Errors

Errors

* Insecure certificate
* Invalid argument
* Invalid cookie domain
* Invalid selector
* Invalid session ID
* JavaScript error
* Script timeout
* Stale element reference
* Unknown command
* Unknown error
* Unknown method
Specifications
--------------

* WebDriver
See also
--------

* Cross browser testing
* Selenium documentation


Web APIs

Web APIs
========

When writing code for the Web, there are a large number of Web APIs available. Below is a list of all the APIs and interfaces (object types) that you may be able to use while developing your Web app or site.

Web APIs are typically used with JavaScript, although this doesn't always have to be the case.

Specifications
--------------

This is a list of all the APIs that are available.

### A

* Audio Output Devices API
Experimental

### B

* Background Fetch API
Experimental
* Background Sync
Experimental
* Background Tasks
* Badging API
* Barcode Detection API
Experimental
* Battery API
* Beacon
* Bluetooth API
Experimental
* Broadcast Channel API

### C

* CSS Counter Styles
* CSS Custom Highlight API
* CSS Font Loading API
* CSS Painting API
Experimental
* CSS Properties and Values API
* CSS Typed Object Model API
* CSSOM
* Canvas API
* Channel Messaging API
* Clipboard API
* Compression Streams API
* Console API
* Contact Picker API
Experimental
* Content Index API
Experimental
* Cookie Store API
Experimental
* Credential Management API

### D

* DOM
* Device Memory API
* Device Orientation Events
* Document Picture-in-Picture API
Experimental

### E

* EditContext API
Experimental
* Encoding API
* Encrypted Media Extensions
* EyeDropper API
Experimental

### F

* FedCM API
Experimental
* Fetch API
* File API
* File System API
* File and Directory Entries API
* Force Touch Events
Non-standard
* Fullscreen API

### G

* Gamepad API
* Geolocation API
* Geometry Interfaces

### H

* HTML DOM
* HTML Drag and Drop API
* HTML Sanitizer API
Experimental
* History API
* Houdini API

### I

* Idle Detection API
Experimental
* Image Capture API
Experimental
* IndexedDB
* Ink API
Experimental
* Input Device Capabilities API
Experimental
* Insertable Streams for MediaStreamTrack API
* Intersection Observer API

### K

* Keyboard API
Experimental

### L

* Launch Handler API
Experimental
* Local Font Access API
Experimental

### M

* Media Capabilities API
* Media Capture and Streams
* Media Session API
* Media Source Extensions
Experimental
* MediaStream Recording

### N

* Navigation API
Experimental
* Network Information API
Experimental

### P

* Page Visibility API
* Payment Handler API
Experimental
* Payment Request API
* Performance API
* Periodic Background Sync
Experimental
* Permissions API
* Picture-in-Picture API
* Pointer Events
* Pointer Lock API
* Popover API
* Presentation API
Experimental
* Prioritized Task Scheduling API
* Push API

### R

* Remote Playback API
* Reporting API
Experimental
* Resize Observer API

### S

* SVG
* Screen Capture API
* Screen Orientation API
* Screen Wake Lock API
* Selection API
* Sensor API
* Server Sent Events
* Service Workers API
* Shared Storage API
Experimental
* Speculation Rules API
Experimental
* Storage
* Storage Access API
* Streams

### T

* Touch Events
* Trusted Types API

### U

* UI Events
* URL API
* URL Pattern API
Experimental
* User-Agent Client Hints API
Experimental

### V

* Vibration API
* View Transitions API
Experimental
* VirtualKeyboard API
Experimental
* Visual Viewport

### W

* Web Animations
* Web Audio API
* Web Authentication API
* Web Components
* Web Crypto API
* Web Locks API
* Web MIDI API
* Web NFC API
Experimental
* Web Notifications
* Web Serial API
Experimental
* Web Share API
* Web Speech API
* Web Storage API
* Web Workers API
* WebCodecs API
* WebGL
* WebGPU API
Experimental
* WebHID API
Experimental
* WebOTP API
* WebRTC
* WebTransport API
* WebUSB API
Experimental
* WebVR API
Non-standard

Deprecated
* WebVTT
* WebXR Device API
Experimental
* Websockets API
* Window Controls Overlay API
Experimental
* Window Management API
Experimental

### X

* XMLHttpRequest API

Interfaces
----------

This is a list of all the interfaces (that is, types of objects) that are available.

### A

* `AbortController`
* `AbortSignal`
* `AbsoluteOrientationSensor`
* `AbstractRange`
* `Accelerometer`
Experimental
* `AesCbcParams`
* `AesCtrParams`
* `AesGcmParams`
* `AesKeyGenParams`
* `AmbientLightSensor`
Experimental
* `AnalyserNode`
* `ANGLE_instanced_arrays`
* `Animation`
* `AnimationEffect`
* `AnimationEvent`
* `AnimationPlaybackEvent`
* `AnimationTimeline`
* `Attr`
* `AudioBuffer`
* `AudioBufferSourceNode`
* `AudioContext`
* `AudioData`
Experimental
* `AudioDecoder`
Experimental
* `AudioDestinationNode`
* `AudioEncoder`
Experimental
* `AudioListener`
* `AudioNode`
* `AudioParam`
* `AudioParamDescriptor`
* `AudioParamMap`
* `AudioProcessingEvent`
Deprecated
* `AudioScheduledSourceNode`
* `AudioSinkInfo`
Experimental
* `AudioTrack`
* `AudioTrackList`
* `AudioWorklet`
* `AudioWorkletGlobalScope`
* `AudioWorkletNode`
* `AudioWorkletProcessor`
* `AuthenticatorAssertionResponse`
* `AuthenticatorAttestationResponse`
* `AuthenticatorResponse`

### B

* `BackgroundFetchEvent`
Experimental
* `BackgroundFetchManager`
Experimental
* `BackgroundFetchRecord`
Experimental
* `BackgroundFetchRegistration`
Experimental
* `BackgroundFetchUpdateUIEvent`
Experimental
* `BarcodeDetector`
Experimental
* `BarProp`
* `BaseAudioContext`
* `BatteryManager`
* `BeforeInstallPromptEvent`
Experimental

Non-standard
* `BeforeUnloadEvent`
* `BiquadFilterNode`
* `Blob`
* `BlobEvent`
* `Bluetooth`
Experimental
* `BluetoothCharacteristicProperties`
Experimental
* `BluetoothDevice`
Experimental
* `BluetoothRemoteGATTCharacteristic`
Experimental
* `BluetoothRemoteGATTDescriptor`
Experimental
* `BluetoothRemoteGATTServer`
Experimental
* `BluetoothRemoteGATTService`
Experimental
* `BluetoothUUID`
* `BroadcastChannel`
* `ByteLengthQueuingStrategy`

### C

* `Cache`
* `CacheStorage`
* `CanMakePaymentEvent`
Experimental
* `CanvasCaptureMediaStreamTrack`
* `CanvasGradient`
* `CanvasPattern`
* `CanvasRenderingContext2D`
* `CaptureController`
Experimental
* `CaretPosition`
Experimental
* `CDATASection`
* `ChannelMergerNode`
* `ChannelSplitterNode`
* `CharacterBoundsUpdateEvent`
Experimental
* `CharacterData`
* `Client`
* `Clients`
* `Clipboard`
* `ClipboardEvent`
* `ClipboardItem`
* `CloseEvent`
* `Comment`
* `CompositionEvent`
* `CompressionStream`
* `console`
* `ConstantSourceNode`
* `ContactAddress`
Experimental
* `ContactsManager`
Experimental
* `ContentIndex`
Experimental
* `ContentIndexEvent`
Experimental
* `ContentVisibilityAutoStateChangeEvent`
Experimental
* `ConvolverNode`
* `CookieChangeEvent`
Experimental
* `CookieStore`
Experimental
* `CookieStoreManager`
Experimental
* `CountQueuingStrategy`
* `Credential`
* `CredentialsContainer`
* `Crypto`
* `CryptoKey`
* `CryptoKeyPair`
* `CSPViolationReportBody`
* `CSS`
* `CSSAnimation`
* `CSSConditionRule`
* `CSSContainerRule`
* `CSSCounterStyleRule`
* `CSSFontFaceRule`
* `CSSFontFeatureValuesRule`
* `CSSFontPaletteValuesRule`
* `CSSGroupingRule`
* `CSSImageValue`
* `CSSImportRule`
* `CSSKeyframeRule`
* `CSSKeyframesRule`
* `CSSKeywordValue`
* `CSSLayerBlockRule`
* `CSSLayerStatementRule`
* `CSSMathInvert`
* `CSSMathMax`
* `CSSMathMin`
* `CSSMathNegate`
* `CSSMathProduct`
* `CSSMathSum`
* `CSSMathValue`
* `CSSMatrixComponent`
* `CSSMediaRule`
* `CSSNamespaceRule`
* `CSSNumericArray`
* `CSSNumericValue`
* `CSSPageRule`
* `CSSPerspective`
* `CSSPositionValue`
Non-standard

Deprecated
* `CSSPrimitiveValue`
Deprecated
* `CSSPropertyRule`
* `CSSPseudoElement`
Experimental
* `CSSRotate`
* `CSSRule`
* `CSSRuleList`
* `CSSScale`
* `CSSScopeRule`
Experimental
* `CSSSkew`
* `CSSSkewX`
* `CSSSkewY`
* `CSSStartingStyleRule`
Experimental
* `CSSStyleDeclaration`
* `CSSStyleRule`
* `CSSStyleSheet`
* `CSSStyleValue`
* `CSSSupportsRule`
* `CSSTransformComponent`
* `CSSTransformValue`
* `CSSTransition`
* `CSSTranslate`
* `CSSUnitValue`
* `CSSUnparsedValue`
* `CSSValue`
Deprecated
* `CSSValueList`
Deprecated
* `CSSVariableReferenceValue`
* `CustomElementRegistry`
* `CustomEvent`
* `CustomStateSet`
Experimental

### D

* `DataTransfer`
* `DataTransferItem`
* `DataTransferItemList`
* `DecompressionStream`
* `DedicatedWorkerGlobalScope`
* `DelayNode`
* `DeprecationReportBody`
Experimental
* `DeviceMotionEvent`
* `DeviceMotionEventAcceleration`
* `DeviceMotionEventRotationRate`
* `DeviceOrientationEvent`
* `DirectoryEntrySync`
Non-standard

Deprecated
* `DirectoryReaderSync`
Non-standard

Deprecated
* `Document`
* `DocumentFragment`
* `DocumentPictureInPicture`
Experimental
* `DocumentPictureInPictureEvent`
Experimental
* `DocumentTimeline`
* `DocumentType`
* `DOMError`
Deprecated
* `DOMException`
* `DOMHighResTimeStamp`
* `DOMImplementation`
* `DOMMatrix` (WebKitCSSMatrix)
* `DOMMatrixReadOnly`
* `DOMParser`
* `DOMPoint`
* `DOMPointReadOnly`
* `DOMQuad`
* `DOMRect`
* `DOMRectReadOnly`
* `DOMStringList`
* `DOMStringMap`
* `DOMTokenList`
* `DragEvent`
* `DynamicsCompressorNode`

### E

* `EcdhKeyDeriveParams`
* `EcdsaParams`
* `EcKeyGenParams`
* `EcKeyImportParams`
* `EditContext`
Experimental
* `Element`
* `ElementInternals`
* `EncodedAudioChunk`
Experimental
* `EncodedVideoChunk`
* `ErrorEvent`
* `Event`
* `EventCounts`
* `EventSource`
* `EventTarget`
* `ExtendableCookieChangeEvent`
* `ExtendableEvent`
* `ExtendableMessageEvent`
* `EyeDropper`
Experimental

### F

* `FeaturePolicy`
Experimental
* `FederatedCredential`
Experimental
* `FetchEvent`
* `File`
* `FileEntrySync`
Non-standard

Deprecated
* `FileList`
* `FileReader`
* `FileReaderSync`
* `FileSystem`
* `FileSystemDirectoryEntry`
* `FileSystemDirectoryHandle`
* `FileSystemDirectoryReader`
* `FileSystemEntry`
* `FileSystemFileEntry`
* `FileSystemFileHandle`
* `FileSystemHandle`
* `FileSystemSync`
Non-standard

Deprecated
* `FileSystemSyncAccessHandle`
* `FileSystemWritableFileStream`
* `FocusEvent`
* `FontData`
Experimental
* `FontFace`
* `FontFaceSet`
* `FontFaceSetLoadEvent`
* `FormData`
* `FormDataEvent`
* `FragmentDirective`
Experimental

### G

* `GainNode`
* `Gamepad`
* `GamepadButton`
* `GamepadEvent`
* `GamepadHapticActuator`
* `GamepadPose`
Experimental
* `Geolocation`
* `GeolocationCoordinates`
* `GeolocationPosition`
* `GeolocationPositionError`
* `GestureEvent`
Non-standard
* `GPU`
Experimental
* `GPUAdapter`
Experimental
* `GPUAdapterInfo`
Experimental
* `GPUBindGroup`
Experimental
* `GPUBindGroupLayout`
Experimental
* `GPUBuffer`
Experimental
* `GPUCanvasContext`
Experimental
* `GPUCommandBuffer`
Experimental
* `GPUCommandEncoder`
Experimental
* `GPUCompilationInfo`
Experimental
* `GPUCompilationMessage`
Experimental
* `GPUComputePassEncoder`
Experimental
* `GPUComputePipeline`
Experimental
* `GPUDevice`
Experimental
* `GPUDeviceLostInfo`
Experimental
* `GPUError`
Experimental
* `GPUExternalTexture`
Experimental
* `GPUInternalError`
Experimental
* `GPUOutOfMemoryError`
Experimental
* `GPUPipelineError`
Experimental
* `GPUPipelineLayout`
Experimental
* `GPUQuerySet`
Experimental
* `GPUQueue`
Experimental
* `GPURenderBundle`
Experimental
* `GPURenderBundleEncoder`
Experimental
* `GPURenderPassEncoder`
Experimental
* `GPURenderPipeline`
Experimental
* `GPUSampler`
Experimental
* `GPUShaderModule`
Experimental
* `GPUSupportedFeatures`
Experimental
* `GPUSupportedLimits`
Experimental
* `GPUTexture`
Experimental
* `GPUTextureView`
Experimental
* `GPUUncapturedErrorEvent`
Experimental
* `GPUValidationError`
Experimental
* `GravitySensor`
* `Gyroscope`

### H

* `HashChangeEvent`
* `Headers`
* `HID`
Experimental
* `HIDConnectionEvent`
Experimental
* `HIDDevice`
Experimental
* `HIDInputReportEvent`
Experimental
* `Highlight`
* `HighlightRegistry`
* `History`
* `HkdfParams`
* `HmacImportParams`
* `HmacKeyGenParams`
* `HMDVRDevice`
Non-standard

Deprecated
* `HTMLAllCollection`
* `HTMLAnchorElement`
* `HTMLAreaElement`
* `HTMLAudioElement`
* `HTMLBaseElement`
* `HTMLBodyElement`
* `HTMLBRElement`
* `HTMLButtonElement`
* `HTMLCanvasElement`
* `HTMLCollection`
* `HTMLDataElement`
* `HTMLDataListElement`
* `HTMLDetailsElement`
* `HTMLDialogElement`
* `HTMLDivElement`
* `HTMLDListElement`
* `HTMLDocument`
* `HTMLElement`
* `HTMLEmbedElement`
* `HTMLFieldSetElement`
* `HTMLFontElement`
Deprecated
* `HTMLFormControlsCollection`
* `HTMLFormElement`
* `HTMLFrameSetElement`
Deprecated
* `HTMLHeadElement`
* `HTMLHeadingElement`
* `HTMLHRElement`
* `HTMLHtmlElement`
* `HTMLIFrameElement`
* `HTMLImageElement`
* `HTMLInputElement`
* `HTMLLabelElement`
* `HTMLLegendElement`
* `HTMLLIElement`
* `HTMLLinkElement`
* `HTMLMapElement`
* `HTMLMarqueeElement`
Deprecated
* `HTMLMediaElement`
* `HTMLMenuElement`
* `HTMLMenuItemElement`
Non-standard

Deprecated
* `HTMLMetaElement`
* `HTMLMeterElement`
* `HTMLModElement`
* `HTMLObjectElement`
* `HTMLOListElement`
* `HTMLOptGroupElement`
* `HTMLOptionElement`
* `HTMLOptionsCollection`
* `HTMLOutputElement`
* `HTMLParagraphElement`
* `HTMLParamElement`
Deprecated
* `HTMLPictureElement`
* `HTMLPreElement`
* `HTMLProgressElement`
* `HTMLQuoteElement`
* `HTMLScriptElement`
* `HTMLSelectElement`
* `HTMLSlotElement`
* `HTMLSourceElement`
* `HTMLSpanElement`
* `HTMLStyleElement`
* `HTMLTableCaptionElement`
* `HTMLTableCellElement`
* `HTMLTableColElement`
* `HTMLTableElement`
* `HTMLTableRowElement`
* `HTMLTableSectionElement`
* `HTMLTemplateElement`
* `HTMLTextAreaElement`
* `HTMLTimeElement`
* `HTMLTitleElement`
* `HTMLTrackElement`
* `HTMLUListElement`
* `HTMLUnknownElement`
* `HTMLVideoElement`

### I

* `IDBCursor`
* `IDBCursorWithValue`
* `IDBDatabase`
* `IDBFactory`
* `IDBIndex`
* `IDBKeyRange`
* `IDBLocaleAwareKeyRange`
Experimental

Non-standard
* `IDBObjectStore`
* `IDBOpenDBRequest`
* `IDBRequest`
* `IDBTransaction`
* `IDBVersionChangeEvent`
* `IdentityCredential`
Experimental
* `IdentityProvider`
Experimental
* `IdleDeadline`
* `IdleDetector`
Experimental
* `IIRFilterNode`
* `ImageBitmap`
* `ImageBitmapRenderingContext`
* `ImageCapture`
Experimental
* `ImageData`
* `ImageDecoder`
Experimental
* `ImageTrack`
Experimental
* `ImageTrackList`
Experimental
* `Ink`
Experimental
* `InkPresenter`
Experimental
* `InputDeviceCapabilities`
Experimental
* `InputDeviceInfo`
* `InputEvent`
* `InstallEvent`
Non-standard

Deprecated
* `IntersectionObserver`
* `IntersectionObserverEntry`
* `InterventionReportBody`
Experimental

### K

* `Keyboard`
Experimental
* `KeyboardEvent`
* `KeyboardLayoutMap`
Experimental
* `KeyframeEffect`

### L

* `LargestContentfulPaint`
* `LaunchParams`
Experimental
* `LaunchQueue`
Experimental
* `LayoutShift`
Experimental
* `LayoutShiftAttribution`
Experimental
* `LinearAccelerationSensor`
* `Location`
* `Lock`
* `LockManager`

### M

* `Magnetometer`
Experimental
* `MathMLElement`
* `MediaCapabilities`
* `MediaDeviceInfo`
* `MediaDevices`
* `MediaElementAudioSourceNode`
* `MediaEncryptedEvent`
* `MediaError`
* `MediaKeyMessageEvent`
* `MediaKeys`
* `MediaKeySession`
* `MediaKeyStatusMap`
* `MediaKeySystemAccess`
* `MediaList`
* `MediaMetadata`
* `MediaQueryList`
* `MediaQueryListEvent`
* `MediaRecorder`
* `MediaRecorderErrorEvent`
Non-standard

Deprecated
* `MediaSession`
* `MediaSource`
* `MediaSourceHandle`
Experimental
* `MediaStream`
* `MediaStreamAudioDestinationNode`
* `MediaStreamAudioSourceNode`
* `MediaStreamEvent`
Non-standard

Deprecated
* `MediaStreamTrack`
* `MediaStreamTrackAudioSourceNode`
* `MediaStreamTrackEvent`
* `MediaStreamTrackGenerator`
Experimental

Non-standard
* `MediaStreamTrackProcessor`
Experimental
* `MediaTrackConstraints`
* `MediaTrackSettings`
* `MediaTrackSupportedConstraints`
* `MerchantValidationEvent`
Deprecated
* `MessageChannel`
* `MessageEvent`
* `MessagePort`
* `Metadata`
Experimental

Non-standard
* `MIDIAccess`
* `MIDIConnectionEvent`
* `MIDIInput`
* `MIDIInputMap`
* `MIDIMessageEvent`
* `MIDIOutput`
* `MIDIOutputMap`
* `MIDIPort`
* `MimeType`
Deprecated
* `MimeTypeArray`
Deprecated
* `MouseEvent`
* `MouseScrollEvent`
Non-standard

Deprecated
* `MutationEvent`
Deprecated
* `MutationObserver`
* `MutationRecord`

### N

* `NamedNodeMap`
* `NavigateEvent`
Experimental
* `Navigation`
Experimental
* `NavigationCurrentEntryChangeEvent`
Experimental
* `NavigationDestination`
Experimental
* `NavigationHistoryEntry`
Experimental
* `NavigationPreloadManager`
* `NavigationTransition`
Experimental
* `Navigator`
* `NavigatorUAData`
Experimental
* `NDEFMessage`
Experimental
* `NDEFReader`
Experimental
* `NDEFReadingEvent`
Experimental
* `NDEFRecord`
Experimental
* `NetworkInformation`
Experimental
* `Node`
* `NodeIterator`
* `NodeList`
* `Notification`
* `NotificationEvent`

### O

* `OES_draw_buffers_indexed`
* `OfflineAudioCompletionEvent`
* `OfflineAudioContext`
* `OffscreenCanvas`
* `OffscreenCanvasRenderingContext2D`
* `OrientationSensor`
* `OscillatorNode`
* `OTPCredential`
Experimental
* `OverconstrainedError`

### P

* `PageTransitionEvent`
* `PaintWorkletGlobalScope`
Experimental
* `PannerNode`
* `PasswordCredential`
Experimental
* `Path2D`
* `PaymentAddress`
Non-standard

Deprecated
* `PaymentManager`
Experimental
* `PaymentMethodChangeEvent`
* `PaymentRequest`
* `PaymentRequestEvent`
Experimental
* `PaymentRequestUpdateEvent`
* `PaymentResponse`
* `Pbkdf2Params`
* `Performance`
* `PerformanceElementTiming`
Experimental
* `PerformanceEntry`
* `PerformanceEventTiming`
* `PerformanceLongTaskTiming`
Experimental
* `PerformanceMark`
* `PerformanceMeasure`
* `PerformanceNavigation`
Deprecated
* `PerformanceNavigationTiming`
* `PerformanceObserver`
* `PerformanceObserverEntryList`
* `PerformancePaintTiming`
* `PerformanceResourceTiming`
* `PerformanceServerTiming`
* `PerformanceTiming`
Deprecated
* `PeriodicSyncEvent`
Experimental
* `PeriodicSyncManager`
Experimental
* `PeriodicWave`
* `Permissions`
* `PermissionStatus`
* `PictureInPictureEvent`
* `PictureInPictureWindow`
* `Plugin`
Deprecated
* `PluginArray`
Deprecated
* `Point`
Non-standard

Deprecated
* `PointerEvent`
* `PopStateEvent`
* `PositionSensorVRDevice`
Non-standard

Deprecated
* `Presentation`
Experimental
* `PresentationAvailability`
Experimental
* `PresentationConnection`
Experimental
* `PresentationConnectionAvailableEvent`
Experimental
* `PresentationConnectionCloseEvent`
Experimental
* `PresentationConnectionList`
Experimental
* `PresentationReceiver`
Experimental
* `PresentationRequest`
Experimental
* `ProcessingInstruction`
* `ProgressEvent`
* `PromiseRejectionEvent`
* `PublicKeyCredential`
* `PushEvent`
* `PushManager`
* `PushMessageData`
* `PushSubscription`
* `PushSubscriptionOptions`

### R

* `RadioNodeList`
* `Range`
* `ReadableByteStreamController`
* `ReadableStream`
* `ReadableStreamBYOBReader`
* `ReadableStreamBYOBRequest`
* `ReadableStreamDefaultController`
* `ReadableStreamDefaultReader`
* `RelativeOrientationSensor`
* `RemotePlayback`
* `Report`
* `ReportBody`
* `ReportingObserver`
* `Request`
* `ResizeObserver`
* `ResizeObserverEntry`
* `ResizeObserverSize`
* `Response`
* `RsaHashedImportParams`
* `RsaHashedKeyGenParams`
* `RsaOaepParams`
* `RsaPssParams`
* `RTCAudioSourceStats`
* `RTCCertificate`
* `RTCCertificateStats`
* `RTCDataChannel`
* `RTCDataChannelEvent`
* `RTCDtlsTransport`
* `RTCDTMFSender`
* `RTCDTMFToneChangeEvent`
* `RTCEncodedAudioFrame`
* `RTCEncodedVideoFrame`
* `RTCError`
* `RTCErrorEvent`
* `RTCIceCandidate`
* `RTCIceCandidatePair`
* `RTCIceCandidatePairStats`
* `RTCIceCandidateStats`
* `RTCIceParameters`
* `RTCIceTransport`
* `RTCIdentityAssertion`
Experimental
* `RTCInboundRtpStreamStats`
* `RTCOutboundRtpStreamStats`
* `RTCPeerConnection`
* `RTCPeerConnectionIceErrorEvent`
* `RTCPeerConnectionIceEvent`
* `RTCPeerConnectionStats`
* `RTCRemoteOutboundRtpStreamStats`
* `RTCRtpCodecParameters`
* `RTCRtpReceiver`
* `RTCRtpScriptTransform`
* `RTCRtpScriptTransformer`
* `RTCRtpSender`
* `RTCRtpStreamStats`
* `RTCRtpTransceiver`
* `RTCSctpTransport`
* `RTCSessionDescription`
* `RTCStatsReport`
* `RTCTrackEvent`
* `RTCTransformEvent`
* `RTCTransportStats`

### S

* `Sanitizer`
Experimental
* `Scheduler`
* `Scheduling`
Experimental
* `Screen`
* `ScreenDetailed`
Experimental
* `ScreenDetails`
Experimental
* `ScreenOrientation`
* `ScriptProcessorNode`
Deprecated
* `ScrollTimeline`
Experimental
* `SecurePaymentConfirmationRequest`
* `SecurityPolicyViolationEvent`
* `Selection`
* `Sensor`
* `SensorErrorEvent`
* `Serial`
Experimental
* `SerialPort`
Experimental
* `ServiceWorker`
* `ServiceWorkerContainer`
* `ServiceWorkerGlobalScope`
* `ServiceWorkerRegistration`
* `ShadowRoot`
* `SharedStorage`
Experimental
* `SharedStorageOperation`
Experimental
* `SharedStorageRunOperation`
Experimental
* `SharedStorageSelectURLOperation`
Experimental
* `SharedStorageWorklet`
Experimental
* `SharedStorageWorkletGlobalScope`
Experimental
* `SharedWorker`
* `SharedWorkerGlobalScope`
* `SourceBuffer`
* `SourceBufferList`
* `SpeechGrammar`
Experimental
* `SpeechGrammarList`
Experimental
* `SpeechRecognition`
* `SpeechRecognitionAlternative`
* `SpeechRecognitionErrorEvent`
* `SpeechRecognitionEvent`
* `SpeechRecognitionResult`
* `SpeechRecognitionResultList`
* `SpeechSynthesis`
* `SpeechSynthesisErrorEvent`
* `SpeechSynthesisEvent`
* `SpeechSynthesisUtterance`
* `SpeechSynthesisVoice`
* `StaticRange`
* `StereoPannerNode`
* `Storage`
* `StorageEvent`
* `StorageManager`
* `StylePropertyMap`
* `StylePropertyMapReadOnly`
* `StyleSheet`
* `StyleSheetList`
* `SubmitEvent`
* `SubtleCrypto`
* `SVGAElement`
* `SVGAngle`
* `SVGAnimateColorElement`
Deprecated
* `SVGAnimatedAngle`
* `SVGAnimatedBoolean`
* `SVGAnimatedEnumeration`
* `SVGAnimatedInteger`
* `SVGAnimatedLength`
* `SVGAnimatedLengthList`
* `SVGAnimatedNumber`
* `SVGAnimatedNumberList`
* `SVGAnimatedPreserveAspectRatio`
* `SVGAnimatedRect`
* `SVGAnimatedString`
* `SVGAnimatedTransformList`
* `SVGAnimateElement`
* `SVGAnimateMotionElement`
* `SVGAnimateTransformElement`
* `SVGAnimationElement`
* `SVGCircleElement`
* `SVGClipPathElement`
* `SVGComponentTransferFunctionElement`
* `SVGCursorElement`
Deprecated
* `SVGDefsElement`
* `SVGDescElement`
* `SVGElement`
* `SVGEllipseElement`
* `SVGEvent`
* `SVGFEBlendElement`
* `SVGFEColorMatrixElement`
* `SVGFEComponentTransferElement`
* `SVGFECompositeElement`
* `SVGFEConvolveMatrixElement`
* `SVGFEDiffuseLightingElement`
* `SVGFEDisplacementMapElement`
* `SVGFEDistantLightElement`
* `SVGFEDropShadowElement`
* `SVGFEFloodElement`
* `SVGFEFuncAElement`
* `SVGFEFuncBElement`
* `SVGFEFuncGElement`
* `SVGFEFuncRElement`
* `SVGFEGaussianBlurElement`
* `SVGFEImageElement`
* `SVGFEMergeElement`
* `SVGFEMergeNodeElement`
* `SVGFEMorphologyElement`
* `SVGFEOffsetElement`
* `SVGFEPointLightElement`
* `SVGFESpecularLightingElement`
* `SVGFESpotLightElement`
* `SVGFETileElement`
* `SVGFETurbulenceElement`
* `SVGFilterElement`
* `SVGFontElement`
Deprecated
* `SVGFontFaceElement`
Deprecated
* `SVGFontFaceFormatElement`
Deprecated
* `SVGFontFaceNameElement`
Deprecated
* `SVGFontFaceSrcElement`
Deprecated
* `SVGFontFaceUriElement`
Deprecated
* `SVGForeignObjectElement`
* `SVGGElement`
* `SVGGeometryElement`
* `SVGGlyphElement`
Deprecated
* `SVGGlyphRefElement`
Deprecated
* `SVGGradientElement`
* `SVGGraphicsElement`
* `SVGHKernElement`
Deprecated
* `SVGImageElement`
* `SVGLength`
* `SVGLengthList`
* `SVGLinearGradientElement`
* `SVGLineElement`
* `SVGMarkerElement`
* `SVGMaskElement`
* `SVGMetadataElement`
* `SVGMissingGlyphElement`
Deprecated
* `SVGMPathElement`
* `SVGNumber`
* `SVGNumberList`
* `SVGPathElement`
* `SVGPatternElement`
* `SVGPoint`
Deprecated
* `SVGPointList`
* `SVGPolygonElement`
* `SVGPolylineElement`
* `SVGPreserveAspectRatio`
* `SVGRadialGradientElement`
* `SVGRect`
* `SVGRectElement`
* `SVGRenderingIntent`
Deprecated
* `SVGScriptElement`
* `SVGSetElement`
* `SVGStopElement`
* `SVGStringList`
* `SVGStyleElement`
* `SVGSVGElement`
* `SVGSwitchElement`
* `SVGSymbolElement`
* `SVGTextContentElement`
* `SVGTextElement`
* `SVGTextPathElement`
* `SVGTextPositioningElement`
* `SVGTitleElement`
* `SVGTransform`
* `SVGTransformList`
* `SVGTRefElement`
Deprecated
* `SVGTSpanElement`
* `SVGUnitTypes`
* `SVGUseElement`
* `SVGViewElement`
* `SVGVKernElement`
Deprecated
* `SyncEvent`
Experimental
* `SyncManager`
Experimental

### T

* `TaskAttributionTiming`
Experimental
* `TaskController`
* `TaskPriorityChangeEvent`
* `TaskSignal`
* `Text`
* `TextDecoder`
* `TextDecoderStream`
* `TextEncoder`
* `TextEncoderStream`
* `TextFormat`
Experimental
* `TextFormatUpdateEvent`
Experimental
* `TextMetrics`
* `TextTrack`
* `TextTrackCue`
* `TextTrackCueList`
* `TextTrackList`
* `TextUpdateEvent`
Experimental
* `TimeEvent`
* `TimeRanges`
* `ToggleEvent`
* `Touch`
* `TouchEvent`
* `TouchList`
* `TrackEvent`
* `TransformStream`
* `TransformStreamDefaultController`
* `TransitionEvent`
* `TreeWalker`
* `TrustedHTML`
* `TrustedScript`
* `TrustedScriptURL`
* `TrustedTypePolicy`
* `TrustedTypePolicyFactory`

### U

* `UIEvent`
* `URL`
* `URLPattern`
Experimental
* `URLSearchParams`
* `USB`
Experimental
* `USBAlternateInterface`
Experimental
* `USBConfiguration`
Experimental
* `USBConnectionEvent`
Experimental
* `USBDevice`
Experimental
* `USBEndpoint`
Experimental
* `USBInterface`
Experimental
* `USBInTransferResult`
Experimental
* `USBIsochronousInTransferPacket`
Experimental
* `USBIsochronousInTransferResult`
Experimental
* `USBIsochronousOutTransferPacket`
Experimental
* `USBIsochronousOutTransferResult`
Experimental
* `USBOutTransferResult`
Experimental
* `UserActivation`

### V

* `ValidityState`
* `VideoColorSpace`
* `VideoDecoder`
* `VideoEncoder`
* `VideoFrame`
* `VideoPlaybackQuality`
* `VideoTrack`
* `VideoTrackList`
* `ViewTimeline`
Experimental
* `ViewTransition`
Experimental
* `VirtualKeyboard`
Experimental
* `VisibilityStateEntry`
Experimental
* `VisualViewport`
* `VRDisplay`
Non-standard

Deprecated
* `VRDisplayCapabilities`
Non-standard

Deprecated
* `VRDisplayEvent`
Non-standard

Deprecated
* `VREyeParameters`
Non-standard

Deprecated
* `VRFieldOfView`
Non-standard

Deprecated
* `VRFrameData`
Non-standard

Deprecated
* `VRLayerInit`
Deprecated
* `VRPose`
Non-standard

Deprecated
* `VRStageParameters`
Non-standard

Deprecated
* `VTTCue`
* `VTTRegion`

### W

* `WakeLock`
* `WakeLockSentinel`
* `WaveShaperNode`
* `WebGL2RenderingContext`
* `WebGLActiveInfo`
* `WebGLBuffer`
* `WebGLContextEvent`
* `WebGLFramebuffer`
* `WebGLObject`
* `WebGLProgram`
* `WebGLQuery`
* `WebGLRenderbuffer`
* `WebGLRenderingContext`
* `WebGLSampler`
* `WebGLShader`
* `WebGLShaderPrecisionFormat`
* `WebGLSync`
* `WebGLTexture`
* `WebGLTransformFeedback`
* `WebGLUniformLocation`
* `WebGLVertexArrayObject`
* `WebSocket`
* `WebTransport`
* `WebTransportBidirectionalStream`
* `WebTransportDatagramDuplexStream`
* `WebTransportError`
* `WebTransportReceiveStream`
Experimental
* `WebTransportSendStream`
Experimental
* `WGSLLanguageFeatures`
Experimental
* `WheelEvent`
* `Window`
* `WindowClient`
* `WindowControlsOverlay`
Experimental
* `WindowControlsOverlayGeometryChangeEvent`
Experimental
* `WindowSharedStorage`
Experimental
* `Worker`
* `WorkerGlobalScope`
* `WorkerLocation`
* `WorkerNavigator`
* `Worklet`
* `WorkletGlobalScope`
* `WorkletSharedStorage`
Experimental
* `WritableStream`
* `WritableStreamDefaultController`
* `WritableStreamDefaultWriter`

### X

* `XMLDocument`
* `XMLHttpRequest`
* `XMLHttpRequestEventTarget`
* `XMLHttpRequestUpload`
* `XMLSerializer`
* `XPathEvaluator`
* `XPathException`
* `XPathExpression`
* `XPathNSResolver`
* `XPathResult`
* `XRAnchor`
Experimental
* `XRAnchorSet`
Experimental
* `XRBoundedReferenceSpace`
Experimental
* `XRCompositionLayer`
Experimental
* `XRCPUDepthInformation`
Experimental
* `XRCubeLayer`
Experimental
* `XRCylinderLayer`
Experimental
* `XRDepthInformation`
Experimental
* `XREquirectLayer`
Experimental
* `XRFrame`
Experimental
* `XRHand`
* `XRHitTestResult`
Experimental
* `XRHitTestSource`
Experimental
* `XRInputSource`
* `XRInputSourceArray`
Experimental
* `XRInputSourceEvent`
* `XRInputSourcesChangeEvent`
* `XRJointPose`
* `XRJointSpace`
* `XRLayer`
Experimental
* `XRLayerEvent`
Experimental
* `XRLightEstimate`
Experimental
* `XRLightProbe`
Experimental
* `XRMediaBinding`
Experimental
* `XRPose`
* `XRProjectionLayer`
Experimental
* `XRQuadLayer`
Experimental
* `XRRay`
Experimental
* `XRReferenceSpace`
* `XRReferenceSpaceEvent`
* `XRRenderState`
Experimental
* `XRRigidTransform`
* `XRSession`
Experimental
* `XRSessionEvent`
* `XRSpace`
* `XRSubImage`
Experimental
* `XRSystem`
Experimental
* `XRTransientInputHitTestResult`
Experimental
* `XRTransientInputHitTestSource`
Experimental
* `XRView`
Experimental
* `XRViewerPose`
* `XRViewport`
* `XRWebGLBinding`
Experimental
* `XRWebGLDepthInformation`
Experimental
* `XRWebGLLayer`
Experimental
* `XRWebGLSubImage`
Experimental
* `XSLTProcessor`

See also
--------

* Web API event reference


XML: Extensible Markup Language

XML: Extensible Markup Language
===============================

The **Extensible Markup Language** is a strict serialization of the Document Object Model.

Parsing and serializing XMLAt times, you may need to parse XML content and convert it into a DOM tree, or, conversely, serialize an existing DOM tree into XML. In this article, we'll look at the objects provided by the web platform to make the common tasks of serializing and parsing XML easy.

XML introductionXML (Extensible Markup Language) is a markup language similar to HTML, but without predefined tags to use. Instead, you define your own tags designed specifically for your needs. This is a powerful way to store data in a format that can be stored, searched, and shared. Most importantly, since the fundamental format of XML is standardized, if you share or transmit XML across systems or platforms, either locally or over the internet, the recipient can still parse the data due to the standardized XML syntax.


Web media technologies

Web media technologies
======================

Over the years, the Web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace. Today, there are a large number of APIs available, as well as HTML elements, DOM interfaces, and other features that make it possible to not only perform these tasks, but use media in tandem with other technologies to do truly remarkable things. This article lists the various APIs with links to documentation you may find helpful in mastering them.

References
----------

### HTML

These articles cover HTML features for media developers.

`<audio>`

The `<audio>` element is used to play audio in a Web context. These can be used invisibly as a destination for more complex media, or with visible controls for user-controlled playback of audio files. Accessible from JavaScript as `HTMLAudioElement` objects.

`<video>`

The `<video>` element is an endpoint for video content in a Web context. It can be used to present video files, or as a destination for streamed video content. `<video>` can also be used as a way to link media APIs with other HTML and DOM technologies, including `<canvas>` (for frame grabbing and manipulation), for example. Accessible from JavaScript as `HTMLVideoElement` objects.

`<track>`

The HTML `<track>` element can be placed within an `<audio>` or `<video>` element to provide a reference to a WebVTT format subtitle or caption track to be used when playing the media. Accessible from JavaScript as `HTMLTrackElement` objects.

`<source>`

The HTML `<source>` element is used within an `<audio>` or `<video>` element to specify source media to present. Multiple sources can be used to provide the media in different formats, sizes, or resolutions. Accessible from JavaScript as `HTMLSourceElement` objects.

### APIs

Media Capabilities API

The Media Capabilities API lets you determine the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.

Media Capture and Streams API

A reference for the API which makes it possible to stream, record, and manipulate media both locally and across a network. This includes using local cameras and microphones to capture video, audio, and still images.

Media Session API

The Media Session API provides a way to customize media notifications. It does this by providing metadata for display by the user agent for the media your web app is playing. It also provides action handlers that the browser can use to access platform media keys such as hardware keys found on keyboards, headsets, remote controls, and software keys found in notification areas and on lock screens of mobile devices.

MediaStream Recording API

The MediaStream Recording API lets you capture media streams to process or filter the data or record it to disk.

Web Audio API

The Web Audio API lets you generate, filter, and manipulate sound data both in real-time and on pre-recorded material, then send that audio to a destination such as an `<audio>` element, a media stream, or to disk.

WebRTC

WebRTC (Web Real-Time Communication) makes it possible to stream live audio and video, as well as transfer arbitrary data, between two peers over the Internet, without requiring an intermediary.

Guides
------

Using audio and video in HTML

A guide to using the HTML `<audio>` and `<video>` elements.

Accessible multimedia

In this guide, we cover ways web designers and developers can create content that is accessible to people with different capabilities. This ranges from using the `alt` attribute on `<img>` elements to captions to tagging media for screen readers.

Guide to media types and formats on the web

A guide to the file types and codecs available for images, audio, and video media on the web. This includes recommendations for what formats to use for what kinds of content, best practices including how to provide fallbacks and how to prioritize media types, and also includes general browser support information for each media container and codec.

Streaming audio and video

A guide which covers how to stream audio and video, as well as techniques and technologies you can take advantage of to ensure the best possible quality and/or performance of your streams.

Autoplay guide for media and Web Audio APIs

Unexpected automatic playback of media or audio can be an unwelcome surprise to users. While autoplay serves a purpose, it should be used carefully. To give users control over this, many browsers now provide forms of autoplay blocking. This article is a guide to autoplay, with tips on when and how to use it and how to work with browsers to handle autoplay blocking gracefully.

Web Audio spatialization basics

In 3D environments, which may either be 3D scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. This guide covers how to accomplish this.

Other topics
------------

Related topics which may be of interest, since they can be used in tandem with media APIs in interesting ways.

The Canvas API

The Canvas API lets you draw into an `<canvas>`, manipulating and changing the contents of an image. This can be used with media in many ways, including by setting a `<canvas>` element as the destination for video playback or camera capture so that you can capture and manipulate video frames.

WebGL

WebGL provides an OpenGL ES compatible API on top of the existing Canvas API, making it possible to do powerful 3D graphics on the Web. Through a canvas, this can be used to add 3D imagery to media content.

WebXR

WebXR, which has replaced the now-obsolete WebVR API, is a technology that provides support for creating virtual reality (VR) and augmented reality (AR) content. The mixed reality content can then be displayed on the device's screen or using goggles or a headset.

WebVR
Deprecated

The Web Virtual Reality API supports virtual reality (VR) devices such as the Oculus Rift or the HTC Vive, making it possible for developers to translate position and movement of the user into movement within a 3D scene which is then presented on the device. WebVR has been replaced by WebXR, and is due to be removed from browsers soon.


XSLT: Extensible Stylesheet Language Transformations
====================================================

**Extensible Stylesheet Language Transformations (XSLT)** is an XML-based language used, in conjunction with specialized processing software, for the transformation of XML documents.

Although the process is referred to as "transformation," the original document is not changed; rather, a new XML document is created based on the content of an existing document. Then, the new document may be serialized (output) by the processor in standard XML syntax or in another format, such as HTML or plain text.

XSLT is most often used to convert data between different XML schemas or to convert XML data into web pages or PDF documents.

Documentation
-------------

XSLT Element Reference

Reference.

Transforming XML with XSLT

XSLT allows a stylesheet author to transform a primary XML document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format.

Specifying parameters using processing instructions

Firefox allows stylesheet parameters to be specified when using the `<?xml-stylesheet?>` processing instruction. This is done using the `<?xslt-param?>` PI described in this document.

XSLT Tutorial

This W3Schools tutorial teaches the reader how to use XSLT to transform XML documents into other formats, like XHTML.

What is XSLT?

This extensive introduction to XSLT and XPath assumes no prior knowledge of the technologies and guides the reader through background, context, structure, concepts and introductory terminology.

Common XSLT Errors

This article lists some common problems using XSLT in Firefox.

Related Topics
--------------

* XML, XPath


EXSLT

EXSLT
=====

EXSLT is a set of extensions to XSLT. There are a number of modules; those that are supported by Firefox are listed below:

Common (exsl)The EXSLT Common package provides basic functions that expand upon the capabilities of XSLT. The namespace for the Common package is `http://exslt.org/common`.

Math (math)The EXSLT Math package provides functions for working with numeric values and comparing nodes. The namespace for the Math package is `http://exslt.org/math`.

Regular expressions (regexp)The EXSLT Regular Expressions package provides functions that allow testing, matching, and replacing text using JavaScript style regular expressions. The namespace for the Regular Expressions package is `http://exslt.org/regular-expressions`.

Sets (set)The EXSLT Sets package offers functions that let you perform set manipulation. The namespace for these functions is `http://exslt.org/sets`.

Strings (str)The EXSLT Strings package provides functions that allow the manipulation of strings. The namespace for the Strings package is `http://exslt.org/strings`.

EXSLT modules
-------------

To use an EXSLT function, you need to declare the namespace the function is in, and then use the appropriate prefix when calling the function. For example, to use the regular expressions package:

```xml
<xsl:stylesheet version="1.0"
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
 xmlns:regexp="http://exslt.org/regular-expressions">
  <xsl:template match="/">
    …
    <xsl:value-of select="regexp:replace(/root/@value, 'before', 'gi', 'AFTER')"/>
    …
  </xsl:template>

</xsl:stylesheet>
```

### Common

The EXSLT Common package provides basic functions that expand upon the capabilities of XSLT. The namespace for the Common package is `http://exslt.org/common`.

#### Functions

* `exsl:node-set()`
* `exsl:object-type()`
### Math

The EXSLT Math package provides functions for working with numeric values and comparing nodes. The namespace for the Math package is `http://exslt.org/math`.

#### Functions

* `math:highest()`
* `math:lowest()`
* `math:max()`
* `math:min()`
### Regular expressions

The EXSLT Regular Expressions package provides functions that allow testing, matching, and replacing text using JavaScript style regular expressions.

The EXSLT Regular Expressions namespace is `http://exslt.org/regular-expressions`.

#### Functions

* `regexp:match()`
* `regexp:replace()`
* `regexp:test()`
### Sets

The EXSLT Sets package offers functions that let you perform set manipulation. The namespace for these functions is `http://exslt.org/sets`.

#### Functions

* `set:difference()`
* `set:distinct()`
* `set:intersection()`
* `set:has-same-node()`
* `set:leading()`
* `set:trailing()`
### Strings

The EXSLT Strings package provides functions that allow the manipulation of strings. The namespace for the Strings package is `http://exslt.org/strings`.

#### Functions

* `str:concat()`
* `str:split()`
* `str:tokenize()`
See also
--------

* EXSLT website


Event reference

Event reference
===============

Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events from the operating system), and other causes.

Each event is represented by an object that is based on the `Event` interface, and may have additional custom fields and/or functions to provide information about what happened. The documentation for every event has a table (near the top) that includes a link to the associated event interface, and other relevant information. A full list of the different event types is given in Event > Interfaces based on Event.

This topic provides an index to the main *sorts* of events you might be interested in (animation, clipboard, workers etc.) along with the main classes that implement those sorts of events. At the end is a flat list of all documented events.

**Note:** This page lists many of the most common events you'll come across on the web. If you are searching for an event that isn't listed here, try searching for its name, topic area, or associated specification on the rest of MDN.

Event index
-----------

| Event type | Description | Documentation |
| --- | --- | --- |
| Animation |
 Events related to the
 Web Animation API.

 Used to respond to changes in animation status (e.g. when an animation
 starts or ends).
  |
 Animation events fired on
 `Document`,
 `Window`,
 `HTMLElement`.
  |
| Asynchronous data fetching | Events related to the fetching data. |
 Events fired on
 `AbortSignal`,
 `XMLHttpRequest`,
 `FileReader`.
  |
| Clipboard |
 Events related to the
 Clipboard API.

Used to notify when content is cut, copied, or pasted. |
 Events fired on
 `Document`,
 `Element`,
 `Window`.
  |
| Composition |
 Events related to composition; entering text "indirectly" (rather than
 using normal keyboard presses).

 For example, text entered via a speech to text engine, or using
 special key combinations that modify keyboard presses to represent new
 characters in another language.
  |
 Events fired on
 `Element`.
  |
| CSS transition |
 Events related to
 CSS Transitions.

 Provides notification events when CSS transitions start, stop, are
 cancelled, etc.
  |
 Events fired on
 `Document`,
 `HTMLElement`,
 `Window`.
  |
| Database |
 Events related to database operations: opening, closing, transactions,
 errors, etc.
  |
 Events fired on
 `IDBDatabase`,
 `IDBOpenDBRequest`,
 `IDBRequest`,
 `IDBTransaction`.
  |
| DOM mutation |
 Events related to modifications to the Document Object Model (DOM)
 hierarchy and nodes.
  |

**Warning:**
Mutation Events are
 deprecated.
 Mutation Observers
 should be used instead.

 |
| Drag'n'drop, Wheel |
 Events related to using the
 HTML Drag and Drop API
 and wheel events.

 Drag and Wheel events are derived from mouse events. While they are
 fired when using mouse wheel or drag/drop, they may also be used with
 other appropriate hardware.
  |
 Drag events fired on
 `Document`

 Wheel events fired on
 `Document`
 and
 `Element`
 |
| Focus | Events related to elements gaining and losing focus. |
 Events fired on
 `Element`,
 `Window`.
  |
| Form | Events related to forms being constructed, reset and submitted. |
 Events fired on
 `HTMLFormElement`.
  |
| Fullscreen |
 Events related to the
 Fullscreen API.

 Used to notify when the transitioning between full screen and windowed
 modes, and also of errors occurring during this transition.
  |
 Events fired on
 `Document`,
 `Element`.
  |
| Gamepad |
 Events related to the
 Gamepad API.
  |
 Events fired on
 `Window`.
  |
| Gestures |
Touch events are
 recommended for implementing gestures.
  |
 Events fired on
 `Document`,
 `Element`.

In addition there are a number of non-standard gesture events:* Non-standard WebKit specific events on
 `Element`:
 `gesturestart` event,
 `gesturechange` event,
 `gestureend` event.
 |
| History |
 Events related to the
 History API.
  |
 Events fired on
 `Window`.
  |
| HTML element content display management | Events related to changing the state of a display or textual element. |
 Events fired on
 `HTMLDetailsElement`,
 `HTMLDialogElement`,
 `HTMLSlotElement`.
  |
| Inputs |
 Events related to HTML input elements e.g.
 `<input>`, `<select>`, or
 `<textarea>`.
  |
 Events fired on
 `HTMLElement`,
 `HTMLInputElement`.
  |
| Keyboard |
 Events related to using a
 keyboard.

Used to notify when keys are moved up, down, or just pressed. |
 Events fired on
 `Document`,
 `Element`.
  |
| Loading/unloading documents | Events related to loading and unloading documents. |
 Events fired on
 `Document`
 and
 `Window`.
  |
| Manifests |
 Events related to installation of
 progressive web app manifests.
  |
 Events fired on
 `Window`.
  |
| Media |
 Events related to media usage (including the
 Media Capture and Streams API,
 Web Audio API,
 Picture-in-Picture API, etc.).
  |
 Events fired on
 `ScriptProcessorNode`,
 `HTMLMediaElement`,
 `AudioTrackList`,
 `AudioScheduledSourceNode`,
 `MediaRecorder`,
 `MediaStream`,
 `MediaStreamTrack`,
 `VideoTrackList`,
 `HTMLTrackElement`,
 `OfflineAudioContext`,
 `TextTrack`,
 `TextTrackList`,
 Element/audio,
 Element/video.
  |
| Messaging |
 Events related to a window receiving a message from another browsing
 context.
  |
 Events fired on
 `Window`.
  |
| Mouse |
 Events related to using a
 computer mouse.

 Used to notify when the mouse is clicked, doubleclicked, up and down
 events, right-click, movement in and out of an element, text
 selection, etc.

 Pointer events provide a hardware-agnostic alternative to mouse
 events. Drag and Wheel events are derived from mouse events.
  |
 Mouse events fired on
 `Element` |
| Network/Connection | Events related to gaining and losing network connection. |
 Events fired on
 `Window`.

 Events fired on
 `NetworkInformation`
 (Network Information API).
  |
| Payments |
 Events related to the
 Payment Request API.
  |
 Events fired on
 `PaymentRequest`,
 `PaymentResponse`.
  |
| Performance |
 Events related to any performance-related spec grouped into
 Performance APIs.
  |
 Events fired on
 `Performance`.
  |
| Pointer |
 Events related to the
 Pointer Events API.

 Provides hardware-agnostic notification from pointing devices
 including Mouse, Touch, pen/stylus.
  |
 Events fired on
 `Document`,
 `HTMLElement`.
  |
| Print | Events related to printing. |
 Events fired on
 `Window`.
  |
| Promise rejection |
 Events sent to the global script context when any JavaScript promise
 is rejected.
  |
 Events fired on
 `Window`.
  |
| Sockets |
 Events related to the
 WebSockets API.
  |
 Events fired on
 `Websocket`.
  |
| SVG | Events related to SVG images. |
 Events fired on
 `SVGElement`,
 `SVGAnimationElement`,
 `SVGGraphicsElement`.
  |
| Text selection |
Selection API events
 related to selecting text.
  |
 Event (`selectionchange`) fired on
 `HTMLTextAreaElement`,
 `HTMLInputElement`.
  |
| Touch |
 Events related to the
 Touch Events API.

 Provides notification events from interacting with a touch sensitive
 screen (i.e. using a finger or stylus). Not related to the
 Force Touch API.
  |
 Events fired on
 `Document`,
 `Element`.
  |
| Virtual reality |
 Events related to the
 WebXR Device API.

**Warning:** The
 WebVR API (and
 associated
 `Window` events) are deprecated.

 |
 Events fired on
 `XRSystem`,
 `XRSession`,
 `XRReferenceSpace`.
  |
| RTC (real time communication) |
 Events related to the
 WebRTC API.
  |
 Events fired on
 `RTCDataChannel`,
 `RTCDTMFSender`,
 `RTCIceTransport`,
 `RTCPeerConnection`.
  |
| Server-sent events |
 Events related to the
 server sent events API.
  |
 Events fired on
 `EventSource`.
  |
| Speech |
 Events related to the
 Web Speech API.
  |
 Events fired on
 `SpeechSynthesisUtterance`.
  |
| Workers |
 Events related to the
 Web Workers API,
 Service Worker API,
 Broadcast Channel API, and
 Channel Messaging API.

 Used to respond to new messages and message sending errors. Service
 workers can also be notified of other events, including push
 notifications, users clicking on displayed notifications, that push
 subscription has been invalidated, deletion of items from the content
 index, etc.
  |
 Events fired on
 `ServiceWorkerGlobalScope`,
 `DedicatedWorkerGlobalScope`,
 `SharedWorkerGlobalScope`,
 `WorkerGlobalScope`, `Worker`,
 `WorkerGlobalScope`,
 `BroadcastChannel`,
 `MessagePort`.
  |

Specifications
--------------

| Specification |
| --- |
| HTML Standard # events-2 |