Chrome 133 里程碑式更新 - moveBefore, 或开启前端框架未来新纪元?

相关背景:

Chrome 133 版本（将于 2 月 4 日发布稳定版）引入了一个新的 DOM 操作方法：Node.prototype.moveBefore。这一方法虽然看似简单，但其意义重大，因为它能够在移动 DOM 元素时保留元素的状态。传统的 DOM 移动操作通常需要先移除元素再重新插入，这会导致元素的状态重置，而 moveBefore 则避免了这一问题。

特性:

1、保留元素状态

moveBefore 方法能够在移动 DOM 元素时保留其状态，这意味着：内嵌框架 (iframe) 会保持加载状态，活动元素会保持焦点，弹出窗口、全屏模式、模态对话框会保持打开状态，CSS 过渡和动画会继续执行。

moveBefore 可以用于各种需要移动 DOM 元素并保留其状态的场景，例如：

• 拖放操作
• 动态排序列表
• 创建动画效果
• .....

2、语法简洁

moveBefore 的语法与 insertBefore 类似，开发者可以轻松替换现有的代码。例子：

传统上，开发者使用 Node.prototype.insertBefore 方法来替换 DOM 元素。然而，使用 insertBefore 方法会导致被替换的节点重新加载状态。

 document.querySelector('#classic').addEventListener('click', () => {
   const $newSibling = getRandomElementInBody();
   const $iframe = document.querySelector('iframe');
   // document.body.insertBefore($iframe, $newSibling); //无状态替换,需要重新注册
   document.body.moveBefore($iframe, $newSibling); //状态可保留
 });

以下这个演示为我们展示了 moveBefore 的强大魔力:

state-preserving-atomic-move.glitch.me/?scenario=selection

意义解读:

1. 性能更优,避免了传统无状态DOM操作中产生的重排消耗

2. 从无状态的DOM操作提供了一个过渡到有状态的DOM操作的方法

3. 为前端MVVM机制提供了更优的性能保障

未来展望:

1. diff 将或与成为历史, 随着更多现代浏览器和更多先进的 DOM-API 加入后, 以react,vue为代表的现代前端框架设计理念或许将会被修正; 包括数据流,vdom的概念

2. 以 moveBefore 为里程碑或许未来将会加入更多的带状态操作的 DOM API.

   在这里就不得不提到 C39 Signal 提案 , 如果对前端前沿技术比较关注的同学,对状态管理的Signal解决方案想必是已经熟悉了,useSignal 的核心概念基于 TC39 的信号提案，这是一个旨在标准化 JavaScript 中响应式状态管理的提案。

   类似于 useSignal 的概念早在十年前就已经出现，例如在 Knockout 框架中就已经使用了类似的信号机制。然而，由于当时的编译技术和开发体验的限制，这种机制并未广泛流行。

   该提案的目标是通过信号（Signal）机制，提供一种细粒度的响应式状态管理方式，允许开发者更高效地管理状态变化。如果这一标准能够无缝集成到浏览器中或许复杂的前端"框架"也将成为历史,一切回归到本真,从简出发

3. 驱动开源社区提供更优质的MVVM架构设计, 简化现代MVVM架构中冗余和糟粕的部分,让开发学习成本更低,也让机器学习的成本更低,为未来的自动化应用的落地成为更现实的可能.

当然最终结果还是取决于开源社区和开发者是否积极向上的去拥抱新特性,就让历史见证一切