相關(guān)背景:

Chrome 133 版本（將于 2 月 4 日發(fā)布穩(wěn)定版）引入了一個新的 DOM 操作方法：Node.prototype.moveBefore。這一方法雖然看似簡單，但其意義重大，因為它能夠在移動 DOM 元素時保留元素的狀態(tài)。傳統(tǒng)的 DOM 移動操作通常需要先移除元素再重新插入，這會導(dǎo)致元素的狀態(tài)重置，而 moveBefore 則避免了這一問題。

特性:

1、保留元素狀態(tài)

moveBefore 方法能夠在移動 DOM 元素時保留其狀態(tài)，這意味著：內(nèi)嵌框架 (iframe) 會保持加載狀態(tài)，活動元素會保持焦點，彈出窗口、全屏模式、模態(tài)對話框會保持打開狀態(tài)，CSS 過渡和動畫會繼續(xù)執(zhí)行。

moveBefore 可以用于各種需要移動 DOM 元素并保留其狀態(tài)的場景，例如：

• 拖放操作
• 動態(tài)排序列表
• 創(chuàng)建動畫效果
• .....

2、語法簡潔

moveBefore 的語法與 insertBefore 類似，開發(fā)者可以輕松替換現(xiàn)有的代碼。例子：

傳統(tǒng)上，開發(fā)者使用 Node.prototype.insertBefore 方法來替換 DOM 元素。然而，使用 insertBefore 方法會導(dǎo)致被替換的節(jié)點重新加載狀態(tài)。

 document.querySelector('#classic').addEventListener('click', () => {

   const $newSibling = getRandomElementInBody();

   const $iframe = document.querySelector('iframe');

   // document.body.insertBefore($iframe, $newSibling); //無狀態(tài)替換,需要重新注冊

   document.body.moveBefore($iframe, $newSibling); //狀態(tài)可保留

 });

以下這個演示為我們展示了 moveBefore 的強(qiáng)大魔力:

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

意義解讀:

1. 性能更優(yōu),避免了傳統(tǒng)無狀態(tài)DOM操作中產(chǎn)生的重排消耗

2. 從無狀態(tài)的DOM操作提供了一個過渡到有狀態(tài)的DOM操作的方法

3. 為前端MVVM機(jī)制提供了更優(yōu)的性能保障

未來展望:

1. diff 將或與成為歷史, 隨著更多現(xiàn)代瀏覽器和更多先進(jìn)的 DOM-API 加入后, 以react,vue為代表的現(xiàn)代前端框架設(shè)計理念或許將會被修正; 包括數(shù)據(jù)流,vdom的概念

2. 以 moveBefore 為里程碑或許未來將會加入更多的帶狀態(tài)操作的 DOM API.

   在這里就不得不提到 C39 Signal 提案 , 如果對前端前沿技術(shù)比較關(guān)注的同學(xué),對狀態(tài)管理的Signal解決方案想必是已經(jīng)熟悉了,useSignal 的核心概念基于 TC39 的信號提案，這是一個旨在標(biāo)準(zhǔn)化 JavaScript 中響應(yīng)式狀態(tài)管理的提案。

   類似于 useSignal 的概念早在十年前就已經(jīng)出現(xiàn)，例如在 Knockout 框架中就已經(jīng)使用了類似的信號機(jī)制。然而，由于當(dāng)時的編譯技術(shù)和開發(fā)體驗的限制，這種機(jī)制并未廣泛流行。

   該提案的目標(biāo)是通過信號（Signal）機(jī)制，提供一種細(xì)粒度的響應(yīng)式狀態(tài)管理方式，允許開發(fā)者更高效地管理狀態(tài)變化。如果這一標(biāo)準(zhǔn)能夠無縫集成到瀏覽器中或許復(fù)雜的前端"框架"也將成為歷史,一切回歸到本真,從簡出發(fā)

3. 驅(qū)動開源社區(qū)提供更優(yōu)質(zhì)的MVVM架構(gòu)設(shè)計, 簡化現(xiàn)代MVVM架構(gòu)中冗余和糟粕的部分,讓開發(fā)學(xué)習(xí)成本更低,也讓機(jī)器學(xué)習(xí)的成本更低,為未來的自動化應(yīng)用的落地成為更現(xiàn)實的可能.

當(dāng)然最終結(jié)果還是取決于開源社區(qū)和開發(fā)者是否積極向上的去擁抱新特性,就讓歷史見證一切

總結(jié)

以上是生活随笔為你收集整理的Chrome 133 里程碑式更新 - moveBefore, 或开启前端框架未来新纪元?的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。