Chrome 66 Beta: CSS Typed Object Model Async Clipboard API AudioWorklet

Unless otherwise noted, the changes described below apply to the latest Beta version of Chrome for Android, Chrome OS, Linux, macOS and Windows. See the full list of features in Chrome 66 on ChromeStatus.

<canvas> 的 ImageBitmapRender context

Historically, rendering an image to a canvas started by creating a tag and then rendering its contents to the canvas. This causes multiple copies of the image to be stored in memory. The new rendering context streamlines the display of ImageBitmap objects, thus avoiding memory duplication and being more efficient.

This example shows how to use ImageBitmapRenderingContext. Examples mainly demonstrate the transfer of image pixels. This example is to move pixels from blob to canvas, but pixels can also move between canvas> elements. Note that the BLOB is compressed, so it is not a full copy in memory.

const image = await createImageBitmap(imageBlob);
const canvas = document.createElement('canvas');
const context = canvas.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

canvas.toBlob((outputJPEGBlob) = > {
  // Do something with outputJPEGBlob.
}, 'image/jpeg');
Copy the code

If createImageBitmap() is not used, imageBlob decoding is delayed (Lazily decoded), which can cause problems. CreateImageBitmap (), on the other hand, is asynchronous and allows you to fully decode it before using it. For example, it can be used to load new textures at any time during a WebGL game run.

CSS type object model

Historically, developers who wanted to manipulate CSS properties had to manipulate only strings before converting them to typed representations. Worse, when a developer tries to read the value of a CSS property in a javascript, the value of this type is converted to a string.

In Chrome 66, CSS Type Object Model (OM) Level 1 is implemented for a subset of CSS properties that are part of Houdini. Type OM reduces the burden on developers and browsers by exposing CSS values as typed JavaScript objects instead of strings. In addition to allowing efficient processing of the values assigned to CSS properties, Typed OM also allows developers to write code that is easier to maintain and understand.

A simple example illustrates the point. Previously, if I wanted to set the opacity of an element, I could do this:

el.style.opacity = 0.3;
el.style.opacity === "0.3"
Copy the code

Using CSSOM:

el.attributeStyleMap.set("opacity", CSS.number("0.3"));
el.attributeStyleMap.get("opacity").value === 0.3
Copy the code

The type returned above is CSSUnitValue, which is easier to manipulate than strings.

Asynchronous Clipboard API

Unblocking Clipboard Access is a blocking API that you can use to Access the Google Developer Center.

AudioWorklet

Traditional ScriptProcessorNode is asynchronous and requires thread jumping, which can produce erratic audio output. The AudioWorklet object provides a new synchronous JavaScript execution context that allows developers to programmatically control audio without additional latency in the output audio, making it more stable and efficient.

You can view the sample code and others at Google Chrome Labs.

In addition to AudioWorklet, other Worklet apis are under construction. PaintWorklet is available in Chrome 65 / Opera 52. AnimationWorklet project. ScriptProcessorNode will be deprecated some time after AudioWorklet is released.

Additional features in this release

Blink > Animation

The add and accumulate compositing operations are intended for building modularized animations. The add and accumulate keywords will be supported in Chrome soon. Until then, they will no longer throw errors. This is to maintain compatibility with Firefox and other implementations.

Blink > CSS

The CSS has two new features.

  • CSS Values and Units Module Level 4 supports mathematical expressionscalc().min().max().
  • rgb() 和 rgba()Floating-point values are now allowed in functions.

Blink > Feature Policy

By default, the deviceorientation deviceorientationabsolute, and devicemotion event is limited to top the document and the same source of framework, The feature policy is set to ‘self’ for these features. To modify this behavior, explicitly enable or disable the specific feature.

Blink > File API

When trying to read from an invalid or nonexistent BLOB URL, the File API causes a network error instead of 404.

Blink > Forms

HTML forms have two new features.

  • According to the specification,

  • As required by the HTML specification, a mutable checkbox now triggers three events: a click event, then an input event, then a change event. Previously only the click and change events were triggered.

Blink > Fullscreen

If a page in full-screen mode opens a pop-up window and calls window.focus(), the page exits full-screen. This does not happen if the pop-up window receives focus in some other way.

Blink > GetUserMedia

The MediaStreamTrack interface has a new method, getCapabilities().

Returns a MediaTrackCapabilities object that specifies the value or range of values for each restricted property. This function varies from device to device.

Blink > JavaScript

Several JavaScript changes.

  • Function. The prototype. The toString () Function returns now write the content of the source code. This includes white space and other text that may have been used. For example, if there is a comment between the function keyword and the function name, the comment is now returned in addition to the keyword and name.

  • JSON is now a syntax subset of ECMAScript, which allows line delimiters (U+2028) and paragraph delimiters (U+2029) in string text.

  • The catch clause of the try statement can now be used without arguments.

  • In addition to string.prototype.trim (), Chrome 66 implements String. Prototype. TrimStart () and String. The prototype, trimLeft () is used to remove the blank on both sides of the String. TrimLeft () and trimRight() are non-standard method aliases provided to maintain backward compatibility.

  • The array.prototype.values () method returns a new Array iterator object containing the value of each index in the Array.

Blink > Layout

Layout has two new features.

  • The grid prefix:

    • grid-gap 变 gap
    • grid-row-gap 变 row-gap
    • grid-column-gap 变 column-gap

  • The default value for all three is Normal, and the prefix attribute is an alias for the new name. Note that the column-gap attribute already exists and is used by CSS-Multicol.

  • If the display property of an element is table-row, table-row-group, table-header-group, table-footer-group, table-cell, table-caption, With a transform attribute, this element can be used as a contain block for a fixed-position element. Blink currently cannot include , , , and as contained blocks for fixed-position elements.

Blink > Media

Media has two new features.

  • As mentioned in the previous blog, AutoPlay only allows media toplay when the sound is not playing, after the user actively clicks, or (desktop) if the user has previously shown an interest in media on the site. This will reduce unexpected video playback and sound when the page is opened for the first time.

(translator (justjavac) note: currently run automatically broadcast content includes: content is mute, it contains only video (no audio), user click somewhere on the site during the browsing session, on mobile devices, if the site has been the user added to the main screen, if the user often play the media on a desktop browser)

  • Media Capabilities, Decoding Info API allows web sites to obtain more information about a client’s Decoding Capabilities. This gives users more choices about media streams and allows clients to decode more smoothly and efficiently, rather than just decoding based on available bandwidth and screen size resolution.

Blink > Network

The Fetch API has two new features.

  • Request objects now support the Keepalive property, which allows fetch to continue after closing the tag. This function is called by passing a Boolean value in the constructor’s initializer object. Its value can be read back from the object itself. This property can also be used with sendBeacon().

  • The new AbortSignal and AbortController interfaces allow the FETCH operation to be cancelled. Create an AbortController object and pass its signal property to fetch as option. Call abortController.abort() to abort the fetch. There is more information in the Abortable Fetch article we wrote earlier, and here is a code example.

const controller = new AbortController();
const signal = controller.signal;
const requestPromise = fetch(url, { signal });

// Abort the fetch:
controller.abort();
Copy the code

(原 文 : Cancelable – Promises were canceled when they went to Stage 1.)

Blink > ServiceWorker

ServiceWorker has two changes.

  • If the request mode is Same-Origin and the response mode is CORS, the ServiceWorker cannot respond. This is a security measure recently added to the Fetch specification.

  • Fetchevent. clientId now returns an empty string instead of null. For example, this happens during a navigation request.

Blink > WebRTC

Chrome now supports the rtCrTPSender.dTMF attribute. This replaces the functionality not yet deprecated by CreateDTMFSender().

Deprecation and interoperability improvements

Blink > CSS

The Object-position and Perspective-Origin attributes no longer accept three-part values, such as top Right 20%. This change also applies to basic shapes and gradients. The valid position value must always have 1, 2, or 4 parts.

Blink > HTML

According to the specification, ImageCapture. Prototype. SetOptions () has been deleted.

Blink > Input

Document.createtouch () and document.createTouchList() have been removed as per the specification.

Blink > Web Audio

After the specification change AudioParam. Prototype. The value of decompression function automatically removed from the Chrome. If you need smoothing AudioParam changes, please use the AudioParam. Prorotype. SetTargetAtTime ().