Location>code7788 >text

Chrome 133 milestone update - moveBefore, or will it open a new era of the front-end framework?

Popularity：118 ℃/2025-02-28 08:55:18

Related background:

Chrome 133 version (stable version will be released on February 4) introduces a new DOM operation method:. Although this method may seem simple, it is of great significance because it can preserve the state of the element when moving the DOM element. Traditional DOM move operations usually require the element to be removed first and then reinserted, which causes the element's state to be reset, andmoveBeforeThis problem is avoided.

characteristic:

1. Keep element state

moveBeforeThe method can retain its state when moving the DOM element, which means that the embedded frame (iframe) remains loaded, the active element remains focus, the pop-up window, full-screen mode, modal dialog box remains open, and the CSS transition and animation continue to be executed.

moveBefore can be used in various scenarios where DOM elements need to be moved and preserved, for example:

  • Drag and drop operation
  • Dynamic sorting list
  • Create animation effects
  • .....

2. Concise grammar

moveBeforeSyntax andinsertBeforeSimilarly, developers can easily replace existing code. example:

Traditionally, developers useMethod to replace the DOM element. However, using the insertBefore method causes the replaced node to reload the state.

('#classic').addEventListener('click', () => {
    const $newSibling = getRandomElementInBody();
    const $iframe = ('iframe');
    // ($iframe, $newSibling); //Stateless replacement, re-registration is required
    ($iframe, $newSibling); //Status can be retained
  });

The following demonstration shows us the powerful magic of moveBefore:
/?scenario=selection

Interpretation of meaning:

  1. Better performance, avoiding the rearrangement consumption generated in traditional stateless DOM operations

  2. From stateless DOM operations provide a way to transition to stateful DOM operations

  3. Provides better performance guarantees for the front-end MVVM mechanism

Future Outlook:

  1. diff will become history, with more modern browsers and more advanced DOM-APIs added, the modern front-end framework design concept represented by react and vue may be corrected; including data flow and vdom concepts

  2. bymoveBeforeAs a milestone, more DOM APIs with state operations will be added in the future.

    I have to mention hereC39 Signal Proposal, If you are more concerned about front-end cutting-edge technologies, you must be familiar with the Signal solution for state management.useSignalThe core concept is based on the TC39 signaling proposal, a proposal designed to standardize responsive state management in JavaScript.

    Similar touseSignalThe concept of , which has appeared ten years ago, has been used in the Knockout framework, for example, similar signaling mechanisms have been used. However, due to the limitations of the compilation technology and development experience at that time, this mechanism was not widely popular.

    The goal of the proposal is to pass the signal (Signal) mechanism provides a fine-grained responsive state management method, allowing developers to manage state changes more efficiently. If this standard can be seamlessly integrated into the browser, perhaps the complex front-end "framework" will also become history, everything will return to the truth and start from simplicity

  3. Drive the open source community to provide better MVVM architecture design, simplifying the redundant and dross parts of modern MVVM architecture, making development learning costs lower, and machine learning costs lower, making it a more realistic possibility for the implementation of future automation applications.

Of course, the final result still depends on whether the open source community and developers actively embrace new features, so that history can witness everything

<Previous Next>