Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about whether Chrome84 supports private methods and user idle detection. Many people may not know much about it. In order to make you understand better, the editor has summarized the following for you. I hope you can get something according to this article.

Security update

Restore changes to SameSite Cookie

In April, Chrome temporarily delayed the implementation of the SameSite Cookie attribute to ensure the stability of websites that provide basic services during the critical initial phase of the COVID-19 response.

Over the past few months, Chrome has been watching the preparation of these sites, and Chrome 84 will also restore the mandatory opening of SameSite cookie and enable forced opening of Chrome 80 +.

Discard TLS1.0 and TLS1.1

TLS (Transport layer Security) is a protocol that protects HTTPS. With a history dating back nearly 20 years, TLS1.0 and its earlier predecessors, SSL,TLS1.0 and 1.1, have many shortcomings:

TLS 1. 0 and 1. 1 use MD5 and SHA-1, which are both weak hashes, in the complete hash.

TLS 1.0 and 1.1 use MD5 and SHA-1 in server signatures.

TLS 1.0 and 1.1 only support RC4 and CBC passwords. The RC4 is corrupted and will be deleted later. TLS's CBC schema construction is flawed and vulnerable to attack.

The CBC password of TLS 1. 0 also mistakenly constructs its initialization vector.

TLS 1.0 is no longer PCI-DSS compliant.

Support for TLS1.2 is a prerequisite for avoiding the above problems. The TLS working group has deprecated TLS 1.0 and 1.1. Chrome has now deprecated these protocols as well.

Web animations API

Chrome 84 adds a large number of previously unsupported features to Web animations API.

Promise support

Animation.ready and animation.finished support Promise calls:

Const transformAnimation = modal.animate (openModal, openModalSettings); transformAnimation.finished.then (() = > {text.animate (fadeIn, fadeInSettings)})

Performance improvement

When you create an animation based on an event, such as mousemove, a new animation is created each time, which quickly consumes memory and degrades performance. To solve this problem, replaceable animation is introduced into the browser, which enables automatic cleaning, marks the completed animation as replaceable, and automatically deletes it if it is replaced by another completed animation.

Elem.addEventListener ('mousemove', evt = > {rectangle.animate ({transform: translate (${evt.clientX} px, ${evt.clientY} px)}, {duration: 500, fill:' forwards'});})

Each time the mouse moves, the browser recalculates the position of each ball in it and creates an animation for the new point. Browsers now know to delete old animations in the following situations:

After the animation is completed.

One or more animations have also been completed in the compositing order.

The new animation is the same property of the animation.

Smoother animation composite mode

You can now set the compositing mode of the animation, which means that the animation can be cumulative in addition to the default replace mode. The compositing mode allows developers to write different animations and control how the effects are combined. Three composite modes are now supported: 'replace' (default mode)' add', and 'accumulate'.

In the default 'replace' compound mode, the final animation replaces the transform attribute and eventually appears as rotate (360deg) scale (1.4). For 'add',Composite add rotation and multiply the scale, the final state is rotate (720deg) scale (1.96). Accumulate' merge transformation, the result is rotate (720deg) scale (1.8).

Content indexing API

With the newly added Content Indexing API, you can add URL and metadata to content that can be used offline. The content is then presented to the user through this metadata to improve discoverability.

In this way, your site is also available when there is no web link.

Here is an example of a call:

Const registration = await navigator.serviceWorker.ready; await registration.index.add ({/ / Required; set to something unique within your web app. Id: 'article-123', / / Required; url needs to be an offline-capable HTML page. / / For compatibility during the Origin Trial, include launchUrl as well. Url: / articles/123', launchUrl:'/ articles/123', / / Required; used in user-visible lists of content. Title: 'Article title', / / Required; used in user-visible lists of content. Description: 'Amazing article about thanks, / / Required; used in user-visible lists of content. Icons: [{src:'/ img/article-123.png', sizes: '64x64, type:' image/png',}], / / Optional; valid categories are currently: / / 'homepage',' article', 'video',' audio', or'(default). Category: 'article',})

Wake lock API

Have you ever had the trouble of looking at the computer screen while doing something else, and then the computer went into the screen saver without responding for a long time?

Wake lock API allows web pages to request wake-up locks to prevent the screen from dimming or entering the screen saver.

You can use navigator.wakeLock.request () to set the wake-up lock and release it automatically after a period of time in conjunction with setTimeout:

/ / The wake lock sentinel. Let wakeLock = null; / / Function that attempts to request a screen wake lock. Const requestWakeLock = async () = > {try {wakeLock = await navigator.wakeLock.request ('screen'); wakeLock.addEventListener (' release', () = > {console.log ('Screen WakeLock was released');}); console.log (' Screen WakeLock is active');} catch (err) {console.error (`${err.name}, ${err.message}`);}}; / / Request a screen wake lock … Await requestWakeLock () / / … And release it again after 5s. Window.setTimeout (() = > {wakeLock.release (); wakeLock = null;}, 5000)

Idle Detection API

Idle detection (Idle Detection API) notifies the developer when the user is idle, indicating things such as no interaction with the keyboard, mouse, or screen for a long time, screen saver activation, screen locking or moving to another screen. Developers can customize thresholds to trigger notifications.

The following scenarios are suitable for using idle detection:

Chat software or online social networking sites can use this API to inform users whether they can currently contact their contacts.

For example, applications of museum display programs can use this API to return to the home page after no interaction.

Applications that require complex calculations, such as charting, can limit these calculations to when users interact with their devices.

Detect if idle detection is available:

If ('IdleDetector' in window) {/ / IdleDetector API supported}

Call example:

/ / Create the idle detector const idleDetector = new IdleDetector (); / / Set up an event listener that fires when idle state changes. IdleDetector.addEventListener ('change', () = > {const uState = idleDetector.userState; const sState = idleDetector.screenState; console.log (`Idle change: ${uState}, ${sState} .`);}); / / Start the idle detector. Await idleDetector.start ({threshold: 60000, signal,})

Web Assembly SIMD

SIMD (Single Instruction Multiple Data), that is, single instruction stream and multiple data stream, is a technology that uses a controller to control multiple processors and performs the same operation on each of a group of data (also known as "data vector") to achieve spatial parallelism. To put it simply, an instruction can process multiple data at the same time.

The ultimate goal of WebAssembly SIMD's proposal is to introduce vector computing into the WebAssembly specification, which can greatly accelerate advanced computing applications such as audio / video codec, image processing applications, cryptographic applications, and so on. Although it is still in the experimental stage, it is now widely used by open source programs (such as Halide, OpenCV.js, XNNPACK) to support WebAssembly SIMD.

We can clearly see the performance difference of SIMD. Without SIMD, modern laptops can only get about 3 frames of images per second, while when SIMD is enabled, you can get a smooth experience of 15-16 frames per second.

Here is a more interesting example of "invisibility":

The trial version of the original version of WebAssembly SIMD can be tested in Chrome 84-86.

DevTools update

Issues Tab

A new issues tab has been added to the drawer to help reduce the clutter in the console output.

Currently, the console is the central location for website developers, libraries, frameworks, and Chrome itself to log messages, warnings, and errors. The Issues tab displays warnings from browsers in a structured, aggregated, and actionable manner, links to affected resources in DevTools, and provides guidance on how to fix these problems. Over time, more and more Chrome warnings will appear on the Issues tab rather than on the console, which will help reduce console clutter.

Performance panel update

The performance panel now displays the Total blocking time (TBT) message in the footer. TBT is a load performance indicator that helps quantify how long it takes for a page to reach availability. It essentially measures how long the page appears to be available (because its content has been rendered to the screen), but in fact it is not available because JavaScript blocks the main thread, so the page cannot respond to user input. TBT is a major laboratory indicator similar to the first input delay, and it is one of the new Core Web Vitals of Google.

To get TBT, do not use the Reload Page reload page workflow to record page load performance. Instead, click the Record record, manually reload the page, wait for the page to load, and then stop recording. If you see it, Total Blocking Time: Unavailable means that DevTools cannot get the required information from the internal profile data of Chrome.

In addition, CLS is supported:

Picture preview

Hover over the background-image to see a preview of the picture in the prompt tool:

V8 v8.4-support for private methods

The newly added private fields in v7.4 further support private methods and accessors. Syntactically, the names of private methods and accessors start with #, just like private fields. Here is a brief introduction to this syntax:

Class Component {# privateMethod () {console.log ("I'm only callable inside Component!");} get # privateAccessor () {return 42;} set # privateAccessor (x) {}}

Private methods and accessors have the same scope rules and semantics as private fields.

V8 v8.4-weak referenc

JavaScript is a garbage collection language, which means that when the garbage collector runs, the memory occupied by objects that the program can no longer access may be automatically reclaimed. With the exception of WeakSet references in WeakMap and, all references in JavaScript are powerful to prevent garbage collection of referenced objects. For example, the following code: as long as globalRef is accessible through the global scope, neither it nor the functions in its callback properties will be recycled.

Const globalRef = {callback () {console.log ('foo');}}

JavaScript developers can now make weak references to objects through the WeakRef feature. If the objects referenced by weak references are not strongly referenced, they do not prevent them from being garbage collected.

Const globalWeakRef = new WeakRef ({callback () {console.log ('foo');}}); (async function () {globalWeakRef.deref (). Callback (); await new Promise ((resolve, reject) = > {setTimeout () = > {resolve (' foo');}, 42);}); globalWeakRef.deref ()? .callback ();}) () After reading the above, do you have any further understanding of whether Chrome84 supports private methods and user idle detection? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.