New in Chrome 83

Chrome 83 is starting to roll out to stable now.

Here's what you need to know:

• .


• There’s a new way to starts a new origin trial with added
  functionality.


• There are new program, to provide unified
  guidance for quality signals that, we believe, are essential to delivering
  a great user experience on the web.


• And , working and shooting from home,
  let’s dive in and see what’s new for developers in Chrome 83!
  
  
  
  
  

  Note: App shortcuts were supposed to be landing in Chrome 83, but were
  delayed until Chrome 84, scheduled for July 14th.

  
  

  Trusted types

  
  

  DOM-based cross-site scripting is one of the most common security
  vulnerabilities on the web. It can be easy to accidentally introduce
  one to your page. Trusted types can help prevent these kinds of
  vulnerabilities, because they require you to process the data before
  passing it into a potentially dangerous function.

  
  

  Take innerHTML for example, with trusted types turned on, if I try to pass
  a string, it'll fail with a TypeError because the browser doesn’t know if it
  can trust the string.

  
  
  JS Kopieren

  // Trusted types turned on
  
  const elem = document.getElementById('myDiv');
  
  elem.innerHTML = `Hello, world!`;
  
  // Will throw a TypeError
  
  

  
  

  Instead, I need to either use a safe function, like textContent, pass in
  a trusted type, or create the element and use appendChild().

  
  
  JS Kopieren

  // Use a safe function
  
  elem.textContent = ''; // OK
  
  
  
  // Pass in a trusted type
  
  import DOMPurify from 'dompurify';
  
  const str = `Hello, world!`;
  
  elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});
  
  
  
  // Create an element
  
  const img = document.createElement('img');
  
  img.src = 'xyz.jpg';
  
  elem.appendChild(img);
  
  

  
  

  Before you turn on trusted types, you’ll want to identify and fix any
  violations using a report-only CSP header.

  
  
  TEXT Kopieren

  Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com
  
  

  
  

  Then once you’ve got everything buttoned up, you can turn it on properly.
  Complete details are in
  
  on the Chromium blog.

  
  

  Origin trials

  
  

  Measure memory with measureMemory()

  
  

  Starting an origin trial in Chrome 83, performance.measureMemory() is a
  new API that makes it possible to measure the memory usage of your page, and
  detect memory leaks.

  
  

  Memory leaks are easy to introduce:

  
  
  • Forgetting to unregister an event listener
  
  
  • Capturing objects from an iframe
  
  
  • Not closing a worker
  
  
  • Accumulating objects in arrays
  
  
  • and so on.
  
  

  Memory leaks lead to pages that appear slow, and bloated to users.

  
  
  JS Kopieren

  if (performance.measureMemory) {
  
    try {
  
      const result = await performance.measureMemory();
  
      console.log(result);
  
    } catch (err) {
  
      console.error(err);
  
    }
  
  }
  
  

  
  

  Check out
  
  on web.dev with all the details, and how to get your new origin trial token.

  
  

  Other origin trials

  
  

  Check for
  complete details.

  
  

  Web vitals

  
  

  Measuring the quality of user experience has many facets. While some aspects
  of user experience are site and context specific, there is a common set of
  signals — "Core Web Vitals" — that is critical to all web experiences.
  Such measures perceived load speed and
  marks the point in the page load timeline when the page's main content has
  likely loaded.



• measures visual stability and
  quantifies the amount of unexpected layout shift of visible page content.

All of these metrics capture important user-centric outcomes, are field
measurable, and have supporting lab diagnostic metric equivalents and
tooling. For example, while Largest Contentful Paint is the topline loading
metric, it is also highly dependent on First Contentful Paint (FCP) and
Time to First Byte (TTFB), which remain critical to monitor and improve.

To learn more, check out
, which
provides the ability to detect and decode barcodes.

Note: Curious about what's coming in the future? Check out the

Subscribe

Want to stay up to date with our videos, then ,
and you’ll get an email notification whenever we launch a new video, or add our
RSS feed to your feed reader.

I’m Pete LePage, and I need a hair cut, but as soon as Chrome 84 is
released, I’ll be right here to tell you -- what’s new in Chrome!

Feedback