ContextQMD
Back to Partytown

Atomics

docs/src/routes/atomics/index.mdx

0.13.24.0 KB
Original Source

Atomics

Partytown will use Atomics and SharedArrayBuffer when they're available by the browser. Some of the advantages include:

  • 10x faster communication between threads compared to the service-worker requests
  • 5% smaller build file compared to the service-worker build
  • No proxytown requests in the network tab
  • Fewer http requests to initialize the Partytown library
  • Partytown service-worker and iframe is no longer used

It's important to note that not all browsers support Atomics, and the server hosting the site must be configured with the correct response headers. If neither of those are true, then Partytown will fallback to using the service-worker communication layer instead.

Document Response Headers

To enable Atomics communication, the browser's crossOriginIsolated readonly property should be true. The crossOriginIsolated property is only set to true, by the browser, when the document includes these http response headers:

Cross-Origin-Embedder-Policy: credentialless
Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy (COEP) response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission. At the time of writing, credentialless is not a supported value in Safari, so Safari will fallback to using the Service Worker communication. An alternative to credentialless is to use require-corp, which does work in Safari too. Please see Setting Cross-Origin Attribute for more info.
  • Cross-Origin-Opener-Policy (COOP) response header allows you to ensure a top-level document does not share a browsing context group with cross-origin documents.

Setting Cross-Origin Attribute

An alternative to setting Cross-Origin-Embedder-Policy: credentialless, is to instead use Cross-Origin-Embedder-Policy: require-corp. The biggest thing to highlight is that the require-corp does not allow images, scripts, videos, etc. to be loaded from another origin. For example, when this header is set, any scripts or images to a CDN will no longer work.

However, the crossorigin attribute can be used on individual elements, such as <audio>, ``, <link>, <script>, and <video>, which allows these requests to go through and not be blocked.

Below is an example of setting the crossorigin attribute on an image:

html

Browser Atomics Support

Can I Use: Atomics

  • Desktop:
    • Chrome 68+ (Jul 2018)
    • Edge 79+ (Jan 2020)
    • Firefox 78+ (June 2020)
    • Safari 15.2+ (Dec 2021)
  • Mobile:
    • Android, Chrome 97+
    • Android, Edge 97+
    • Android, Firefox 98+
    • iOS, Safari 15.2+ (Dec 2021)

Test Atomics

You can test if a browser is capable of enabling Atomics by visiting these test pages which respond with the correct headers.

Additional Resources