JavaScript | web.dev

<!doctype html> <html lang="en" dir="ltr"> <head> <meta name="google-signin-client-id" content="157101835696-ooapojlodmuabs2do2vuhhnf90bccmoi.apps.googleusercontent.com"> <meta name="google-signin-scope" content="profile email https://www.googleapis.com/auth/developerprofiles https://www.googleapis.com/auth/developerprofiles.award"> <meta property="og:site_name" content="web.dev"> <meta property="og:type" content="website"><meta name="theme-color" content="#3740ff"><meta charset="utf-8"> <meta content="IE=Edge" http-equiv="X-UA-Compatible"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="manifest" href="/_pwa/web/manifest.json" crossorigin="use-credentials"> <link rel="preconnect" href="//www.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.gstatic.com" crossorigin> <link rel="preconnect" href="//fonts.googleapis.com" crossorigin> <link rel="preconnect" href="//apis.google.com" crossorigin> <link rel="preconnect" href="//www.google-analytics.com" crossorigin><link rel="stylesheet" href="//fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Material+Icons&family=Material+Symbols+Outlined&display=block"><link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/css/app.css"> <link rel="stylesheet" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/css/dark-theme.css" disabled> <link rel="shortcut icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/favicon.png"> <link rel="apple-touch-icon" href="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/touchicon-180.png"><link rel="canonical" href="https://web.dev/javascript"><link rel="search" type="application/opensearchdescription+xml" title="web.dev" href="https://web.dev/s/opensearch.xml"> <title>JavaScript  |  web.dev</title> <meta property="og:title" content="JavaScript  |  web.dev"><meta property="og:url" content="https://web.dev/javascript"><meta property="og:image" content="https://web.dev/static/images/social-wide.jpg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="675"><meta property="og:locale" content="en"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://web.dev/static/images/social-wide.jpg"><meta name="twitter:site" content="@ChromiumDev"><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "headline": "JavaScript" } </script> <link rel="stylesheet" href="/extras.css"></head> <body class="" template="landing" theme="web-theme" type="article" appearance layout="full" pending> <devsite-progress type="indeterminate" id="app-progress"></devsite-progress> <a href="#main-content" class="skip-link button"> Skip to main content </a> <section class="devsite-wrapper"> <devsite-cookie-notification-bar></devsite-cookie-notification-bar><devsite-header role="banner"> <div class="devsite-header--inner" data-nosnippet> <div class="devsite-top-logo-row-wrapper-wrapper"> <div class="devsite-top-logo-row-wrapper"> <div class="devsite-top-logo-row"> <button type="button" id="devsite-hamburger-menu" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Navigation menu button" visually-hidden aria-label="Open menu"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> <div class="devsite-top-logo-row-middle"> <div class="devsite-header-upper-tabs"> <devsite-tabs class="upper-tabs"> <nav class="devsite-tabs-wrapper" aria-label="Upper tabs"> <tab class="devsite-dropdown devsite-dropdown-full "> <button class="devsite-tabs-content devsite-tabs-dropdown-only gc-analytics-event devsite-icon devsite-icon-arrow-drop-down" track-type="nav" track-metadata-position="nav - resources" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > Resources </button> <div class="devsite-tabs-dropdown" role="menu" aria-label="submenu" hidden> <div class="devsite-tabs-dropdown-content"> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Web Platform</li> <li class="devsite-nav-description">Dive into the web platform, at your pace. </li> <li class="devsite-nav-item"> <a href="https://web.dev/html" track-type="nav" track-metadata-eventdetail="https://web.dev/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/css" track-type="nav" track-metadata-eventdetail="https://web.dev/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="web platform" tooltip > <div class="devsite-nav-item-title"> JavaScript </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section build-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>User experience</li> <li class="devsite-nav-description">Learn how to build better user experiences. </li> <li class="devsite-nav-item"> <a href="https://web.dev/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/identity" track-type="nav" track-metadata-eventdetail="https://web.dev/identity" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="user experience" tooltip > <div class="devsite-nav-item-title"> Identity </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section productivity-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Learn</li> <li class="devsite-nav-description">Get up to speed on web development.</li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/html" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/html" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn HTML </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/css" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/css" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn CSS </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/javascript" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/javascript" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn JavaScript </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/performance" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/performance" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Performance </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn/accessibility" track-type="nav" track-metadata-eventdetail="https://web.dev/learn/accessibility" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> Learn Accessibility </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/learn" track-type="nav" track-metadata-eventdetail="https://web.dev/learn" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="learn" tooltip > <div class="devsite-nav-item-title"> More courses </div> </a> </li> </ul> </div> <div class="devsite-tabs-dropdown-column "> <ul class="devsite-tabs-dropdown-section experience-icon web-dev-subnav"> <li class="devsite-nav-title" role="heading" tooltip>Additional resources</li> <li class="devsite-nav-description">Explore content collections, patterns, and more.</li> <li class="devsite-nav-item"> <a href="https://web.dev/explore/ai" track-type="nav" track-metadata-eventdetail="https://web.dev/explore/ai" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> AI and the web </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/explore" track-type="nav" track-metadata-eventdetail="https://web.dev/explore" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Explore </div> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" track-type="nav" track-metadata-eventdetail="https://pagespeed.web.dev/" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> PageSpeed Insights </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/patterns" track-type="nav" track-metadata-eventdetail="https://web.dev/patterns" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Patterns </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/shows" track-type="nav" track-metadata-eventdetail="https://web.dev/shows" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Podcasts & shows </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/newsletter" track-type="nav" track-metadata-eventdetail="https://web.dev/newsletter" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> Developer Newsletter </div> </a> </li> <li class="devsite-nav-item"> <a href="https://web.dev/about" track-type="nav" track-metadata-eventdetail="https://web.dev/about" track-metadata-position="nav - resources" track-metadata-module="tertiary nav" track-metadata-module_headline="additional resources" tooltip > <div class="devsite-nav-item-title"> About web.dev </div> </a> </li> </ul> </div> </div> </div> </tab> <tab > <a href="https://web.dev/baseline" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/baseline" track-type="nav" track-metadata-position="nav - baseline" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" > Baseline </a> </tab> <tab > <a href="https://web.dev/blog" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/blog" track-type="nav" track-metadata-position="nav - blog" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" > Blog </a> </tab> <tab > <a href="https://web.dev/case-studies" class="devsite-tabs-content gc-analytics-event " track-metadata-eventdetail="https://web.dev/case-studies" track-type="nav" track-metadata-position="nav - case studies" track-metadata-module="primary nav" data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" > Case Studies </a> </tab> </nav> </devsite-tabs> </div> <devsite-search enable-signin enable-search enable-suggestions enable-query-completion project-name="web.dev" tenant-name="web.dev" > <form class="devsite-search-form" action="https://web.dev/s/results" method="GET"> <div class="devsite-search-container"> <button type="button" search-open class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Open search"></button> <div class="devsite-searchbox"> <input aria-activedescendant="" aria-autocomplete="list" aria-label="Search" aria-expanded="false" aria-haspopup="listbox" autocomplete="off" class="devsite-search-field devsite-search-query" name="q" placeholder="Search" role="combobox" type="text" value="" > <div class="devsite-search-image material-icons" aria-hidden="true"> </div> <div class="devsite-search-shortcut-icon-container" aria-hidden="true"> <kbd class="devsite-search-shortcut-icon">/</kbd> </div> </div> </div> </form> <button type="button" search-close class="devsite-search-button devsite-header-icon-button button-flat material-icons" aria-label="Close search"></button> </devsite-search> </div> <devsite-appearance-selector></devsite-appearance-selector> <devsite-user enable-profiles id="devsite-user"> <span class="button devsite-top-button" aria-hidden="true" visually-hidden>Sign in</span> </devsite-user> </div> </div> </div> <div class="devsite-collapsible-section devsite-header-no-lower-tabs "> <div class="devsite-header-background"> </div> </div> </div> </devsite-header> <devsite-book-nav scrollbars hidden> <div class="devsite-book-nav-filter" hidden> <span class="filter-list-icon material-icons" aria-hidden="true"></span> <input type="text" placeholder="Filter" aria-label="Type to filter" role="searchbox"> <span class="filter-clear-button hidden" data-title="Clear filter" aria-label="Clear filter" role="button" tabindex="0"></span> </div> <nav class="devsite-book-nav devsite-nav nocontent" aria-label="Side menu"> <div class="devsite-mobile-header"> <button type="button" id="devsite-close-nav" class="devsite-header-icon-button button-flat material-icons gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Close navigation" aria-label="Close navigation"> </button> <div class="devsite-product-name-wrapper"> <a href="/" class="devsite-site-logo-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Site logo" track-type="globalNav" track-name="webDev" track-metadata-position="nav" track-metadata-eventDetail="nav"> <picture> <source srcset="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup-dark-theme.svg" media="(prefers-color-scheme: dark)" class="devsite-dark-theme"> <img src="https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg" class="devsite-site-logo" alt="web.dev"> </picture> </a> <span class="devsite-product-name"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> </li> </ul> </span> </div> </div> <div class="devsite-book-nav-wrapper"> <div class="devsite-mobile-nav-top"> <ul class="devsite-nav-list"> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip > Resources </span> </span> <ul class="devsite-nav-responsive-tabs devsite-nav-has-menu "> <li class="devsite-nav-item"> <span class="devsite-nav-title" tooltip data-category="Site-Wide Custom Events" data-label="Tab: Resources" track-name="resources" > <span class="devsite-nav-text" tooltip menu="Resources"> More </span> <span class="devsite-nav-icon material-icons" data-icon="forward" menu="Resources"> </span> </span> </li> </ul> </li> <li class="devsite-nav-item"> <a href="/baseline" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Baseline" track-name="baseline" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Baseline" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Baseline </span> </a> </li> <li class="devsite-nav-item"> <a href="/blog" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Blog" track-name="blog" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Blog" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Blog </span> </a> </li> <li class="devsite-nav-item"> <a href="/case-studies" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Tab: Case Studies" track-name="case studies" data-category="Site-Wide Custom Events" data-label="Responsive Tab: Case Studies" track-type="globalNav" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Case Studies </span> </a> </li> </ul> </div> <div class="devsite-mobile-nav-bottom"> <ul class="devsite-nav-list" menu="Resources" aria-label="Side menu" hidden> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Web Platform </span> </span> </li> <li class="devsite-nav-item"> <a href="/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > JavaScript </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > User experience </span> </span> </li> <li class="devsite-nav-item"> <a href="/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/identity" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Identity" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Identity </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Learn </span> </span> </li> <li class="devsite-nav-item"> <a href="/learn/html" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn HTML" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn HTML </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/css" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn CSS" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn CSS </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/javascript" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn JavaScript" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn JavaScript </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/performance" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Performance" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Performance </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn/accessibility" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Learn Accessibility" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Learn Accessibility </span> </a> </li> <li class="devsite-nav-item"> <a href="/learn" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: More courses" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > More courses </span> </a> </li> <li class="devsite-nav-item devsite-nav-heading"> <span class="devsite-nav-title" tooltip > <span class="devsite-nav-text" tooltip > Additional resources </span> </span> </li> <li class="devsite-nav-item"> <a href="/explore/ai" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: AI and the web" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > AI and the web </span> </a> </li> <li class="devsite-nav-item"> <a href="/explore" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Explore" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Explore </span> </a> </li> <li class="devsite-nav-item"> <a href="https://pagespeed.web.dev/" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: PageSpeed Insights" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > PageSpeed Insights </span> </a> </li> <li class="devsite-nav-item"> <a href="/patterns" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Patterns" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Patterns </span> </a> </li> <li class="devsite-nav-item"> <a href="/shows" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Podcasts &amp; shows" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Podcasts &amp; shows </span> </a> </li> <li class="devsite-nav-item"> <a href="/newsletter" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: Developer Newsletter" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > Developer Newsletter </span> </a> </li> <li class="devsite-nav-item"> <a href="/about" class="devsite-nav-title gc-analytics-event " data-category="Site-Wide Custom Events" data-label="Responsive Tab: About web.dev" track-type="navMenu" track-metadata-eventDetail="globalMenu" track-metadata-position="nav"> <span class="devsite-nav-text" tooltip > About web.dev </span> </a> </li> </ul> </div> </div> </nav> </devsite-book-nav> <section id="gc-wrapper"> <main role="main" id="main-content" class="devsite-main-content" > <div class="devsite-sidebar"> <div class="devsite-sidebar-content"> <devsite-toc class="devsite-nav" role="navigation" aria-label="On this page" depth="2" scrollbars disabled></devsite-toc> <devsite-recommendations-sidebar class="nocontent devsite-nav"> </devsite-recommendations-sidebar> </div> </div> <devsite-content> <article class="devsite-article"> <div class="devsite-banner devsite-banner-announcement nocontent" > <div class="devsite-banner-message"> <div class="devsite-banner-message-text"> Chrome is back at Google I/O on May 20-21! <a href="https://io.google/2025/register/?utm_source=devsite&utm_medium=embedded_marketing&utm_campaign=wdd&utm_content=">Register now</a> </div> </div> </div> <div class="devsite-article-meta nocontent" role="navigation"> <ul class="devsite-breadcrumb-list" > <li class="devsite-breadcrumb-item "> <a href="https://web.dev/" class="devsite-breadcrumb-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Breadcrumbs" data-value="1" track-type="globalNav" track-name="breadcrumb" track-metadata-position="1" track-metadata-eventdetail="web.dev" > web.dev </a> </li> </ul> </div> <div class="devsite-actions" data-nosnippet><devsite-feature-tooltip ack-key="AckCollectionsBookmarkTooltipDismiss" analytics-category="Site-Wide Custom Events" analytics-action-show="Callout Profile displayed" analytics-action-close="Callout Profile dismissed" analytics-label="Create Collection Callout" class="devsite-page-bookmark-tooltip nocontent" dismiss-button="true" id="devsite-collections-dropdown" dismiss-button-text="Dismiss" close-button-text="Got it"> <devsite-bookmark></devsite-bookmark> <span slot="popout-heading"> Stay organized with collections </span> <span slot="popout-contents"> Save and categorize content based on your preferences. </span> </devsite-feature-tooltip></div> <devsite-toc class="devsite-nav" depth="2" devsite-toc-embedded disabled> </devsite-toc> <div class="devsite-article-body clearfix "> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-hero devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <picture> <img alt="" src="https://web.dev/static/javascript/image/hero-javascript.png" srcset="https://web.dev/static/javascript/image/hero-javascript_36.png 36w,https://web.dev/static/javascript/image/hero-javascript_48.png 48w,https://web.dev/static/javascript/image/hero-javascript_72.png 72w,https://web.dev/static/javascript/image/hero-javascript_96.png 96w,https://web.dev/static/javascript/image/hero-javascript_480.png 480w,https://web.dev/static/javascript/image/hero-javascript_720.png 720w,https://web.dev/static/javascript/image/hero-javascript_856.png 856w,https://web.dev/static/javascript/image/hero-javascript_960.png 960w,https://web.dev/static/javascript/image/hero-javascript_1440.png 1440w,https://web.dev/static/javascript/image/hero-javascript_1920.png 1920w,https://web.dev/static/javascript/image/hero-javascript_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" fetchpriority="high"> </picture> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="javascript" data-text="JavaScript" class="hide-from-toc no-link" tabindex="0"> JavaScript </h3> <div class="devsite-landing-row-item-description-content"> JavaScript is the scripting language of the web. It provides rich interactivity and dynamic content for web applications. With it, you can build user experiences that can help users accomplish complex tasks, store user data, and more. Here, you can peruse our collection of JavaScript content and learn a variety of concepts and techniques to help you improve your JavaScript skills. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="jump-ahead-on-this-page" data-text="Jump ahead on this page:" class="hide-from-toc no-link" tabindex="0"> Jump ahead on this page: </h3> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/javascript#new-to-javascript"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> javascript </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="plearn-javascriptp" data-text="Learn JavaScript" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/javascript#new-to-javascript"> <p>Learn JavaScript</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> If you're new to JavaScript, we've got you covered. Our Learn JavaScript course teaches the ins and outs of JavaScript, helping you to get up to speed. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/javascript#baseline-newly-available-javascript-features"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pbaseline-newly-available-javascript-featuresp" data-text="Baseline Newly available JavaScript features" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/javascript#baseline-newly-available-javascript-features"> <p>Baseline Newly available JavaScript features</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn about the latest JavaScript features that are newly available in all major browser engines. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/javascript#get-familiar-with-common-and-useful-javascript-features"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> data_object </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pget-familiar-with-common-and-useful-javascript-featuresp" data-text="Get familiar with common and useful JavaScript features" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/javascript#get-familiar-with-common-and-useful-javascript-features"> <p>Get familiar with common and useful JavaScript features</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> JavaScript provides many features to help you build applications that respond to the needs of your users. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/javascript#optimize-poor-inp-caused-by-javascript"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> timer </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="poptimize-poor-inp-caused-by-javascriptp" data-text="Optimize poor INP caused by JavaScript" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/javascript#optimize-poor-inp-caused-by-javascript"> <p>Optimize poor INP caused by JavaScript</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> <a href="/articles/inp">Interaction to Next Paint (INP)</a> is an important responsiveness metric that measures page responsiveness. These guides contain JavaScript tips to help you keep your pages responsive to users. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/javascript#optimize-third-party-javascript-resources"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> bolt </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="poptimize-third-party-javascript-resourcesp" data-text="Optimize third-party JavaScript resources" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/javascript#optimize-third-party-javascript-resources"> <p>Optimize third-party JavaScript resources</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Third-party JavaScript can be a cause of performance issues in web applications. Learn how to manage third-party scripts to keep your web applications fast. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/javascript#dive-into-javascript-patterns"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> code </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="pdive-into-javascript-patternsp" data-text="Dive into JavaScript patterns" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/javascript#dive-into-javascript-patterns"> <p>Dive into JavaScript patterns</p> </a> </h3> <div class="devsite-landing-row-item-description-content"> Check out these JavaScript patterns you can use to quickly accomplish common tasks in your web applications. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-75 devsite-landing-row-no-image-background" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/learn/javascript"> <picture> <img alt="" src="https://web.dev/static/learn/javascript/card.png" srcset="https://web.dev/static/learn/javascript/card_36.png 36w,https://web.dev/static/learn/javascript/card_48.png 48w,https://web.dev/static/learn/javascript/card_72.png 72w,https://web.dev/static/learn/javascript/card_96.png 96w,https://web.dev/static/learn/javascript/card_480.png 480w,https://web.dev/static/learn/javascript/card_720.png 720w,https://web.dev/static/learn/javascript/card_856.png 856w,https://web.dev/static/learn/javascript/card_960.png 960w,https://web.dev/static/learn/javascript/card_1440.png 1440w,https://web.dev/static/learn/javascript/card_1920.png 1920w,https://web.dev/static/learn/javascript/card_2880.png 2880w" sizes="(max-width: 600px) 100vw, (max-width: 840px) 50vw, 342px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <div class="devsite-landing-row-item-labels"> <span class=" " >COURSE</span> </div> <h3 id="new-to-javascript" data-text="New to JavaScript?" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/learn/javascript"> New to JavaScript? </a> </h3> <div class="devsite-landing-row-item-description-content"> <p>If you're new to JavaScript, we've got you covered. Our <a href="/learn/javascript">Learn JavaScript</a> course guides you through how JavaScript works, beginning with the basics such as variables, functions, and conditional statements. From there, you'll tackle more complex topics such as prototypal inheritance, classes, and other topics to help you hone your JavaScript skills so that you can build rich web applications.</p> </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/learn/javascript" class="button left " >Learn JavaScript!</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="baseline-newly-available-javascript-features" data-text="Baseline Newly available JavaScript features" class="hide-from-toc no-link" tabindex="0"> Baseline Newly available JavaScript features </h3> <div class="devsite-landing-row-item-description-content"> <p><a href="/baseline">Baseline</a> signals to web developers when web platform features can be safely used in all major browser engines. Here are some JavaScript features that are now Baseline Newly available.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-2-up" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/blog/promise-try-baseline"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="promisetry" data-text="Promise.try()" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/blog/promise-try-baseline"> Promise.try() </a> </h3> <div class="devsite-landing-row-item-description-content"> Promise.try() became Baseline Newly available in January 2025. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/resize"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="resizable-arraybuffer" data-text="Resizable ArrayBuffer" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/resize"> Resizable ArrayBuffer </a> </h3> <div class="devsite-landing-row-item-description-content"> Resizable ArrayBuffer became Baseline Newly available in July 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/blog/set-methods"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="set-methods" data-text="Set methods" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/blog/set-methods"> Set methods </a> </h3> <div class="devsite-landing-row-item-description-content"> Set methods became Baseline Newly available in June 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/API/CustomStateSet"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="customstateset" data-text="CustomStateSet" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/API/CustomStateSet"> CustomStateSet </a> </h3> <div class="devsite-landing-row-item-description-content"> CustomStateSet became Baseline Newly available in May 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/blog/screen-wake-lock-supported-in-all-browsers"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="screen-wake-lock-api" data-text="Screen Wake Lock API" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/blog/screen-wake-lock-supported-in-all-browsers"> Screen Wake Lock API </a> </h3> <div class="devsite-landing-row-item-description-content"> The Screen Wake Lock API became Baseline Newly available in May 2024. </div> </div> </div> </div> </div> <div class="devsite-landing-row-column"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://web.dev/blog/intl-segmenter"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="intlsegmenter" data-text="intl.Segmenter" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/blog/intl-segmenter"> intl.Segmenter </a> </h3> <div class="devsite-landing-row-item-description-content"> intl.Segmenter became Baseline Newly available in April 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="promisewithresolvers" data-text="Promise.withResolvers()" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers"> Promise.withResolvers() </a> </h3> <div class="devsite-landing-row-item-description-content"> promise.withResolvers() became Baseline Newly available in March 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="groupby-functions" data-text="groupBy() functions" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy"> groupBy() functions </a> </h3> <div class="devsite-landing-row-item-description-content"> groupBy() functions became Baseline Newly available in March 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/transfer"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="arraybuffer-transfer-and-transfertofixedlength" data-text="ArrayBuffer transfer() and transferToFixedLength()" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/transfer"> ArrayBuffer transfer() and transferToFixedLength() </a> </h3> <div class="devsite-landing-row-item-description-content"> The ArrayBuffer transfer() and transferToFixedLength() methods became Baseline Newly available in March 2024. </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media wd-2col-icons-list" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="left" > <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/fromAsync"> <div class="devsite-landing-row-item-icon-container" size="medium" > <picture> <img class="devsite-landing-row-item-icon" alt="" src="https://web.dev/static/baseline/image/newly-available.svg" srcset="https://web.dev/static/baseline/image/newly-available.svg" sizes="64px" loading="lazy" > </picture> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="array-fromasync-static-method" data-text="Array fromAsync() static method" class="hide-from-toc no-link" tabindex="0"> <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/fromAsync"> Array fromAsync() static method </a> </h3> <div class="devsite-landing-row-item-description-content"> Array.fromAsync() became Baseline Newly available in January 2024. </div> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="get-familiar-with-common-and-useful-javascript-features" data-text="Get familiar with common and useful JavaScript features" class="hide-from-toc no-link" tabindex="0"> Get familiar with common and useful JavaScript features </h3> <div class="devsite-landing-row-item-description-content"> <p>JavaScript gives you a lot of tools to help you build applications that respond to the needs of your users. Here are some common features might want to use in your web applications that are worth knowing about!</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-item-centered" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/promises"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="promises" data-text="Promises" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/promises"> Promises </a> </h3> <div class="devsite-landing-row-item-description-content"> Promises allow you asynchronously execute code after a certain event occurs. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/promises" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/introduction-to-fetch"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="the-code-translateno-dirltrfetchcode-api" data-text="The fetch API" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/introduction-to-fetch"> The <code translate="no" dir="ltr">fetch</code> API </a> </h3> <div class="devsite-landing-row-item-description-content"> The <code translate="no" dir="ltr">fetch</code> API allows you to make HTTP requests to fetch data from the web on the front end. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/introduction-to-fetch" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/indexeddb"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="indexeddb" data-text="IndexedDB" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/indexeddb"> IndexedDB </a> </h3> <div class="devsite-landing-row-item-description-content"> The IndexedDB API offers client-side storage of structured data, including files and blobs. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/indexeddb" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="optimize-poor-inp-caused-by-javascript" data-text="Optimize poor INP caused by JavaScript" class="hide-from-toc no-link" tabindex="0"> Optimize poor INP caused by JavaScript </h3> <div class="devsite-landing-row-item-description-content"> <p>How you use JavaScript can have an effect on your web application's <a href="/articles/inp">Interaction to Next Paint (INP)</a>. These guides will help you to get a handle on page repsonsiveness issues caused by JavaScript. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-item-centered" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/optimize-long-tasks"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="optimize-long-tasks" data-text="Optimize long tasks" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/optimize-long-tasks"> Optimize long tasks </a> </h3> <div class="devsite-landing-row-item-description-content"> Long tasks on the main thread can cause your web application to be unresponsive. Learn how to optimize long tasks to improve your web application's INP. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/optimize-long-tasks" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/optimize-input-delay"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="optimize-input-delay" data-text="Optimize input delay" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/optimize-input-delay"> Optimize input delay </a> </h3> <div class="devsite-landing-row-item-description-content"> Long input delays occur when users interact with a page and the browser takes too long respond鈥攁nd JavaScript can be a common culprit. Read this guide and learn how you can keep input delays shorter and your web application snappier. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/optimize-input-delay" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/script-evaluation-and-long-tasks"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="script-evaluation-and-long-tasks" data-text="Script evaluation and long tasks" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/script-evaluation-and-long-tasks"> Script evaluation and long tasks </a> </h3> <div class="devsite-landing-row-item-description-content"> When scripts are downloaded during page load, they can cause long tasks that can affect your web application's INP. Learn how to optimize for long script evaluation tasks to keep your INP low. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/script-evaluation-and-long-tasks" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" background="grey" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/off-main-thread"> <div class="devsite-landing-row-item-icon-container" background="white" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="use-web-workers-to-run-javascript-off-the-browsers-main-thread" data-text="Use web workers to run JavaScript off the browser's main thread" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/off-main-thread"> Use web workers to run JavaScript off the browser's main thread </a> </h3> <div class="devsite-landing-row-item-description-content"> Not everything needs to run on the main thread. If you have large batches of work that take a long time to run, you can offload them to web worker threads to keep your web application as responsive as it can be. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/off-main-thread" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="optimize-third-party-javascript-resources" data-text="Optimize third-party JavaScript resources" class="hide-from-toc no-link" tabindex="0"> Optimize third-party JavaScript resources </h3> <div class="devsite-landing-row-item-description-content"> A common performance problem on the web involves the use of third-party JavaScript, which can cause pages to load more slowly and even cause problems with page responsiveness. Check out these guides to get a handle on some common third-party JavaScript performance problems. </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-4-up devsite-landing-row-cards devsite-landing-row-item-centered" background="grey" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/third-party-javascript"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="third-party-javascript-performance" data-text="Third-party JavaScript performance" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/third-party-javascript"> Third-party JavaScript performance </a> </h3> <div class="devsite-landing-row-item-description-content"> Find out how third-party JavaScript can affect performance and what you can do to keep it from slowing down your sites. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/third-party-javascript" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/identify-slow-third-party-javascript"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="identify-slow-third-party-javascript" data-text="Identify slow third-party JavaScript" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/identify-slow-third-party-javascript"> Identify slow third-party JavaScript </a> </h3> <div class="devsite-landing-row-item-description-content"> Supercharge your performance detective skills with Lighthouse and Chrome DevTools. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/identify-slow-third-party-javascript" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/efficiently-load-third-party-javascript"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="efficiently-load-third-party-javascript" data-text="Efficiently load third-party JavaScript" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/efficiently-load-third-party-javascript"> Efficiently load third-party JavaScript </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to load third-party JavaScript efficiently so you can improve the performance of your web applications. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/efficiently-load-third-party-javascript" class="button button-primary " >Learn more</a> </div> </div> </div> </div> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" icon-position="top" > <a href="https://web.dev/articles/tag-best-practices"> <div class="devsite-landing-row-item-icon-container" background="grey" foreground="light-blue" size="medium" > <div class="devsite-landing-row-item-icon material-icons" aria-hidden="true"> article </div> </div> </a> <div class="devsite-landing-row-item-body"> <h3 id="best-practices-for-tags-and-tag-managers" data-text="Best practices for tags and tag managers" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/articles/tag-best-practices"> Best practices for tags and tag managers </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to optimize tags and tag managers for Core Web Vitals, so that these useful tools have the least impact on your web application's performance. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/articles/tag-best-practices" class="button button-primary " >Learn more</a> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-1-up devsite-landing-row-100 devsite-landing-row-padding-small" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item devsite-landing-row-item-no-media" description-position="bottom" > <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="dive-into-javascript-patterns" data-text="Dive into JavaScript patterns" class="hide-from-toc no-link" tabindex="0"> Dive into JavaScript patterns </h3> <div class="devsite-landing-row-item-description-content"> <p>Check out these patterns you can use to quickly accomplish common tasks in your web applications using JavaScript.</p> </div> </div> </div> </div> </div> </div> </section> <section class="devsite-landing-row devsite-landing-row-3-up devsite-landing-row-cards devsite-landing-row-padding-small devsite-landing-row-no-image-background" background="white" header-position="top" > <div class="devsite-landing-row-inner"> <div class="devsite-landing-row-group"> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/web-apps"> <picture> <img alt="" src="https://web.dev/static/patterns/web-apps/hero.png" srcset="https://web.dev/static/patterns/web-apps/hero_36.png 36w,https://web.dev/static/patterns/web-apps/hero_48.png 48w,https://web.dev/static/patterns/web-apps/hero_72.png 72w,https://web.dev/static/patterns/web-apps/hero_96.png 96w,https://web.dev/static/patterns/web-apps/hero_480.png 480w,https://web.dev/static/patterns/web-apps/hero_720.png 720w,https://web.dev/static/patterns/web-apps/hero_856.png 856w,https://web.dev/static/patterns/web-apps/hero_960.png 960w,https://web.dev/static/patterns/web-apps/hero_1440.png 1440w,https://web.dev/static/patterns/web-apps/hero_1920.png 1920w,https://web.dev/static/patterns/web-apps/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="web-applications" data-text="Web applications" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/web-apps"> Web applications </a> </h3> <div class="devsite-landing-row-item-description-content"> Check out these patterns to accomplish common tasks in your web applications. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/web-apps" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/files"> <picture> <img alt="" src="https://web.dev/static/patterns/files/hero.png" srcset="https://web.dev/static/patterns/files/hero_36.png 36w,https://web.dev/static/patterns/files/hero_48.png 48w,https://web.dev/static/patterns/files/hero_72.png 72w,https://web.dev/static/patterns/files/hero_96.png 96w,https://web.dev/static/patterns/files/hero_480.png 480w,https://web.dev/static/patterns/files/hero_720.png 720w,https://web.dev/static/patterns/files/hero_856.png 856w,https://web.dev/static/patterns/files/hero_960.png 960w,https://web.dev/static/patterns/files/hero_1440.png 1440w,https://web.dev/static/patterns/files/hero_1920.png 1920w,https://web.dev/static/patterns/files/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="files-and-directories" data-text="Files and directories" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/files"> Files and directories </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn patterns for working with files and directories in JavaScript. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/files" class="button button-primary " >See patterns</a> </div> </div> </div> </div> <div class="devsite-landing-row-item" description-position="bottom" > <div class="devsite-landing-row-item-media "> <figure class="devsite-landing-row-item-image"> <a href="https://web.dev/patterns/clipboard"> <picture> <img alt="" src="https://web.dev/static/patterns/files/hero.png" srcset="https://web.dev/static/patterns/files/hero_36.png 36w,https://web.dev/static/patterns/files/hero_48.png 48w,https://web.dev/static/patterns/files/hero_72.png 72w,https://web.dev/static/patterns/files/hero_96.png 96w,https://web.dev/static/patterns/files/hero_480.png 480w,https://web.dev/static/patterns/files/hero_720.png 720w,https://web.dev/static/patterns/files/hero_856.png 856w,https://web.dev/static/patterns/files/hero_960.png 960w,https://web.dev/static/patterns/files/hero_1440.png 1440w,https://web.dev/static/patterns/files/hero_1920.png 1920w,https://web.dev/static/patterns/files/hero_2880.png 2880w" sizes="(max-width: 840px) 50vw, 464px" loading="lazy" > </picture> </a> </figure> </div> <div class="devsite-landing-row-item-description" > <div class="devsite-landing-row-item-body"> <h3 id="clipboard" data-text="Clipboard" class="hide-from-toc no-link" tabindex="0"> <a href="https://web.dev/patterns/clipboard"> Clipboard </a> </h3> <div class="devsite-landing-row-item-description-content"> Learn how to use Clipboard APIs in JavaScript to provide copy and paste functionality in your web applications. </div> <div class="devsite-landing-row-item-buttons"> <a href="https://web.dev/patterns/clipboard" class="button button-primary " >See patterns</a> </div> </div> </div> </div> </div> </div> </section> </div> <div class="devsite-floating-action-buttons"> </div> </article> <devsite-notification > </devsite-notification> <div class="devsite-content-data"> <template class="devsite-content-data-template"> [[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],[],[],[]] </template> </div> </devsite-content> </main> <devsite-footer-promos class="devsite-footer"> </devsite-footer-promos> <devsite-footer-linkboxes class="devsite-footer"> <nav class="devsite-footer-linkboxes nocontent" aria-label="Footer links"> <ul class="devsite-footer-linkboxes-list"> <li class="devsite-footer-linkbox wd-footer-promo"> <h3 class="devsite-footer-linkbox-heading no-link">web.dev</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <h3 class="devsite-footer-linkbox-heading no-link"> web.dev </h3> <div class="devsite-footer-linkbox-description">We want to help you build beautiful, accessible, fast, and secure websites that work cross-browser, and for all of your users. This site is our home for content to help you on that journey, written by members of the Chrome team, and external experts.</div> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Contribute</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues/new?component=1400680&template=1857359" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > File a bug </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://issuetracker.google.com/issues?q=status:open%20componentid:1400680&s=created_time:desc" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > See open issues </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Related Content</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://developer.chrome.com/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > Chrome for Developers </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://blog.chromium.org/" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > Chromium updates </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/case-studies" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Case studies </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/shows" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > Podcasts & shows </a> </li> </ul> </li> <li class="devsite-footer-linkbox "> <h3 class="devsite-footer-linkbox-heading no-link">Follow</h3> <ul class="devsite-footer-linkbox-list"> <li class="devsite-footer-linkbox-item"> <a href="https://twitter.com/ChromiumDev" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 1)" > @ChromiumDev on X </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.youtube.com/user/ChromeDevelopers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 2)" > YouTube </a> </li> <li class="devsite-footer-linkbox-item"> <a href="https://www.linkedin.com/showcase/chrome-for-developers" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 3)" > Chrome for Developers on LinkedIn </a> </li> <li class="devsite-footer-linkbox-item"> <a href="/static/blog/feed.xml" class="devsite-footer-linkbox-link gc-analytics-event" data-category="Site-Wide Custom Events" data-label="Footer Link (index 4)" > RSS </a> </li> </ul> </li> </ul> </nav> </devsite-footer-linkboxes> <devsite-footer-utility class="devsite-footer"> <div class="devsite-footer-utility nocontent"> <nav class="devsite-footer-utility-links" aria-label="Utility links"> <ul class="devsite-footer-utility-list"> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/terms" data-category="Site-Wide Custom Events" data-label="Footer Terms link" > Terms </a> </li> <li class="devsite-footer-utility-item "> <a class="devsite-footer-utility-link gc-analytics-event" href="//policies.google.com/privacy" data-category="Site-Wide Custom Events" data-label="Footer Privacy link" > Privacy </a> </li> <li class="devsite-footer-utility-item glue-cookie-notification-bar-control"> <a class="devsite-footer-utility-link gc-analytics-event" href="#" data-category="Site-Wide Custom Events" data-label="Footer Manage cookies link" aria-hidden="true" > Manage cookies </a> </li> </ul> </nav> </div> </devsite-footer-utility> <devsite-panel></devsite-panel> </section></section> <devsite-sitemask></devsite-sitemask> <devsite-snackbar></devsite-snackbar> <devsite-tooltip ></devsite-tooltip> <devsite-heading-link></devsite-heading-link> <devsite-analytics> <script type="application/json" analytics>[]</script> <script type="application/json" tag-management>{"at": "True", "ga4": [], "ga4p": [], "gtm": [{"id": "GTM-MZWCJPP", "purpose": 0}], "parameters": {"internalUser": "False", "language": {"machineTranslated": "False", "requested": "en", "served": "en"}, "pageType": "article", "projectName": "web.dev", "signedIn": "False", "tenant": "web", "recommendations": {"sourcePage": "", "sourceType": 0, "sourceRank": 0, "sourceIdenticalDescriptions": 0, "sourceTitleWords": 0, "sourceDescriptionWords": 0, "experiment": ""}, "experiment": {"ids": ""}}}</script> </devsite-analytics> <devsite-badger></devsite-badger> <script nonce="3hHg+p/mycISVH4RmZ9/rDEsKvhBxr"> (function(d,e,v,s,i,t,E){d['GoogleDevelopersObject']=i; t=e.createElement(v);t.async=1;t.src=s;E=e.getElementsByTagName(v)[0]; E.parentNode.insertBefore(t,E);})(window, document, 'script', 'https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/js/app_loader.js', '[27,"en",null,"/js/devsite_app_module.js","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web","https://web-dot-devsite-v2-prod-3p.appspot.com",1,null,["/_pwa/web/manifest.json","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/images/video-placeholder.svg","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/favicon.png","https://www.gstatic.com/devrel-devsite/prod/vd31e3ed8994e05c7f2cd0cf68a402ca7902bb92b6ec0977d7ef2a1c699fae3f9/web/images/lockup.svg","https://fonts.googleapis.com/css?family=Google+Sans:400,500|Roboto:400,400italic,500,500italic,700,700italic|Roboto+Mono:400,500,700&display=swap"],1,null,[1,6,8,12,14,17,21,25,50,52,63,70,75,76,80,87,91,92,93,97,98,100,101,102,103,104,105,107,108,109,110,112,113,117,118,120,122,124,125,126,127,129,130,131,132,133,134,135,136,138,140,141,147,148,149,151,152,156,157,158,159,161,163,164,168,169,170,179,180,182,183,186,191,193,196],"AIzaSyCNm9YxQumEXwGJgTDjxoxXK6m1F-9720Q","AIzaSyCc76DZePGtoyUjqKrLdsMGk_ry7sljLbY","web.dev","AIzaSyB9bqgQ2t11WJsOX8qNsCQ6U-w91mmqF-I","AIzaSyAdYnStPdzjcJJtQ0mvIaeaMKj7_t6J_Fg",null,null,null,["Profiles__enable_recognition_badges","MiscFeatureFlags__enable_variable_operator_index_yaml","Profiles__enable_awarding_url","DevPro__enable_developer_subscriptions","BookNav__enable_tenant_cache_key","Cloud__enable_cloud_dlp_service","Cloud__enable_cloudx_ping","MiscFeatureFlags__enable_framebox_badge_methods","MiscFeatureFlags__developers_footer_image","MiscFeatureFlags__developers_footer_dark_image","Search__enable_page_map","Profiles__enable_completecodelab_endpoint","Concierge__enable_actions_menu","Cloud__enable_llm_concierge_chat","Profiles__enable_completequiz_endpoint","MiscFeatureFlags__enable_project_variables","MiscFeatureFlags__enable_view_transitions","Search__enable_suggestions_from_borg","MiscFeatureFlags__enable_firebase_utm","MiscFeatureFlags__enable_variable_operator","Profiles__enable_profile_collections","Search__enable_dynamic_content_confidential_banner","DevPro__enable_cloud_innovators_plus","DevPro__enable_devpro_offers","TpcFeatures__enable_unmirrored_page_left_nav","Profiles__enable_complete_playlist_endpoint","Cloud__enable_legacy_calculator_redirect","Profiles__enable_page_saving","CloudShell__cloud_shell_button","TpcFeatures__enable_mirror_tenant_redirects","Search__enable_ai_eligibility_checks","OnSwitch__enable","Profiles__enable_purchase_prompts","CloudShell__cloud_code_overflow_menu","Concierge__enable_pushui","Profiles__enable_release_notes_notifications","Profiles__enable_public_developer_profiles","MiscFeatureFlags__enable_explain_this_code","Experiments__reqs_query_experiments","Cloud__enable_cloud_facet_chat","Cloud__enable_cloud_shell","Profiles__enable_join_program_group_endpoint","Profiles__enable_dashboard_curated_recommendations","EngEduTelemetry__enable_engedu_telemetry","Cloud__enable_cloud_shell_fte_user_flow","Cloud__enable_free_trial_server_call","Analytics__enable_clearcut_logging","Profiles__enable_stripe_subscription_management","Profiles__enable_developer_profiles_callout","Profiles__require_profile_eligibility_for_signin","MiscFeatureFlags__emergency_css","Cloud__enable_cloudx_experiment_ids"],null,null,"AIzaSyA58TaKli1DculwmAmbpzLVGuWc8eCQgQc","https://developerscontentserving-pa.googleapis.com","AIzaSyDWBU60w0P9hEkr29kkksYs8Z7gvZ8u_wc","https://developerscontentsearch-pa.googleapis.com",2,4,null,"https://developerprofiles-pa.googleapis.com",[27,"web","web.dev","web.dev",null,"web-dot-devsite-v2-prod-3p.appspot.com",null,null,[null,null,null,null,null,null,null,null,null,null,null,[1],null,null,null,null,null,null,[1],null,null,null,null,[1,null,1],[1,1,null,1,1]],null,[38,null,null,null,null,null,"/images/lockup.svg","/images/touchicon-180.png",null,null,null,1,1,null,null,null,null,null,null,null,null,2,null,null,null,"/images/lockup-dark-theme.svg",[]],[],null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,[[],[1,1]],[[null,null,null,null,null,["GTM-MZWCJPP"],null,null,null,null,null,[["GTM-MZWCJPP",1]],1]],null,4],null,null,1,null,"https://developerscontentinsights-pa.googleapis.com","AIzaSyC11xEGtFhkmSh_iF6l_itbxnFz2GrIBOg","AIzaSyAXJ10nRF73mmdSDINgkCNX5bbd2KPcWm8"]') </script> <devsite-a11y-announce></devsite-a11y-announce> </body> </html>

CINXE.COM

JavaScript | web.dev