1.The Shared Element Transitions API and Origin Trials

Chrome has a new proposal called the Shared Element Transitions API, which gives us “an advanced dynamic effect for Transitions between page states.” This new API is designed to make all of these transitions easier for single-page applications. You can now try it out on the Origin Trial version of Chrome.

2.The React Native 0.65

React Native version 0.65 is available with new Hermes, accessibility improvements, and software package upgrades. Hermes is Facebook’s Open source JavaScript VIRTUAL machine optimized for React Native and upgraded to version 0.8.1. Some outstanding features in this release include:

  • A new concurrent garbage collector called “Hades” reduces pause times on 64-bit devices by up to 30 times.
  • The ECMAScript internationalization API (ECMA-402 or Intl) is now built into Hermes on Android and enabled by default
  • Hermes for iOS now supports Apple M1 Mac and Mac Catalyst!
  • Memory improvements, including SMI (small integer) and pointer compression, reduce the JS heap by 30%.
  • Function. The prototype. ToString repaired due to improper Function detection problem of performance degradation, and support the source code into a use case.

3.CSS module scripts: import stylesheets like JavaScript modules

Microsoft and Google have worked together to bring CSS module scripting support to Chromium, which will be available starting with Microsoft Edge and Chrome 93. The new CSS module scripting feature can be used to load CSS stylesheets with import statements, just like JavaScript modules. import sheet from ‘./styles.css’ assert { type: ‘css’ }; document.adoptedStyleSheets = [sheet]; shadowRoot.adoptedStyleSheets = [sheet];

4.An amazing error message if you put more than 2^24 items in a JS Map object

If you place more than 2^24 items in a JS Map object, an error message will appear :” Uncaught range error: undefined value out of range undefined option attribute undefined.” This is not an error, just an implementation-defined limitation.

Restrictions are determined by:

Map’s FixedArray backup store has a maximum size of 1GB (independent of the overall heap size limit) on 64-bit systems, which means 1GB / 8B = 2^ 30/2 ^3 = 2^27, The maximum number of elements per FixedArray is 134M. Each Map entry requires 3 elements (key, value, next bucket link), a maximum load factor of 50%, and its capacity must be a power of 2. 2 to the 27 over 3 times 2 rounded to the next power of 2 is 2 to the 24.

5.Compat2021: Improving CSS Grid compatibility with GridNG

Microsoft Edge 93 will release a rewrite of the CSS Grid 1 module (” GridNG “) that will greatly improve Edge’s compatibility and support for CSS Grid properties and improve Edge’s performance against complex nested Grid layouts.

6.HTTP/3: Performance Improvements

HTTP/3 is really HTTP/ 2-over-quic, so there are no real, significant new features introduced in the new release.

  • 1. QUIC theoretically suffers less packet loss (and associated wardrobe (HOL) blocking) because it handles packet loss on each resource byte stream independently. But QUIC actually uses very similar bandwidth management techniques to TCP. This means it won’t magically download your web site resources any faster than TCP. However, QUIC’s flexibility means it will become easier to experiment with new congestion control algorithms, which should improve the situation for TCP and QUIC in the future.
  • 2. The QUIC handshake takes only one round trip in total, which is one less round trip than TCP + TLS 1.3 without a significant additional speed boost.
  • 3.QUIC’s connection ID (CID) allows it to perform connection migration when switching networks. We illustrate this by migrating a client from a Wi-Fi network to 4G, while doing a large file download. On TCP, the download may have to be aborted, while for QUIC, it may continue.
  • 4. Make QUIC faster on networks with a lot of packet loss by alleviating HoL blocking problem. While this is true in theory, we will see that in practice this may provide only a small benefit to web page load performance.
  • 5. The fifth performance aspect of QUIC and HTTP/3 concerns their efficiency and performance in actually creating and sending packets over the network. We’ll see that QUIC’s use of UDP and reencryption can make it a bit slower than TCP (but things are improving).

7.How does React 18 support Strict Effects

StrictMode added support for Strict Effects with the release of React 18. In strict mode, React calls effect twice on newly installed components (mount -> unmount -> mount). As with other strict mode behavior, React only performs this action in the development environment. This article focuses on modifying existing components to support strict Effects mode. The cases that are most likely to be affected by multiple mounts, resulting in the need to modify effect, fall into the following two categories:

  • Effects that need to be cleaned up at uninstall time
  • Effect that only executes once (mount or dependency change)

8.Front-end engineering: All you need to know about the latest Babel compatibility implementations

On the basis of the latest babel7, the author brings you the latest analysis of Babel compatibility scheme, so that you can have a more thorough understanding of Babel compatibility processing mechanism. Currently, Babel handles compatibility in two ways:

  • @babel/ PRESET -env + corejs@3 Implement syntax conversion + add APIS on global and instance, support full loading and on-demand loading, we refer to polyfill scheme;
  • @babel/preset-env + @babel/runtime-corejs3 + @babel/ plugin-transform-Runtime Implement the syntax conversion + simulation replacement API, and only support on-demand loading, we refer to the Runtime scenario for short.

Both solutions rely on the core package corejs@3, but rely on different modules, resulting in different implementations. Both schemes have advantages and disadvantages:

  • The obvious disadvantages of polyfill schemes are global contamination and the injection of redundant tool code; The advantage is that the compatibility can be selectively processed according to the browser’s support for new features.
  • The Runtime solution addresses some of the drawbacks of polyfill, but it does not selectively implement compatibility based on browser support for the new feature. That is, any API identified in the code that exists in the Core-js-Pure package is automatically replaced. This can cause unnecessary conversions and increase the size of the code.