Iframe在Vue中的狀態保持技術

来源:https://www.cnblogs.com/Jcloud/archive/2023/05/25/17430626.html
-Advertisement-
Play Games

Iframe是一個歷史悠久的HTML元素,根據MDN WEB DOCS官方介紹,Iframe定義為HTML內聯框架元素,表示嵌套的Browsing Context,它能夠將另一個HTML頁面嵌入到當前頁面中。Iframe可以廉價實現跨應用級的頁面共用,並且具有使用簡單、高相容性、內容隔離等優點,因此... ...


引言

Iframe是一個歷史悠久的HTML元素,根據MDN WEB DOCS官方介紹,Iframe定義為HTML內聯框架元素,表示嵌套的Browsing Context,它能夠將另一個HTML頁面嵌入到當前頁面中。Iframe可以廉價實現跨應用級的頁面共用,並且具有使用簡單、高相容性、內容隔離等優點,因此以Iframe為核心形成了前端平臺架構領域第1代技術。

眾所周知,當Iframe在DOM中初始渲染時,會自動載入其指向的資源鏈接Url,並重置內部的狀態。在一個典型的平臺應用中,一個父應用主頁面要掛載多個視窗(每一個視窗對應一個Iframe),那麼如何在切換視窗時,實現每一個視窗中的狀態(包括輸入狀態、錨點信息等)不丟失,也即“狀態保持”呢?

如果採用父子應用通信來記錄視窗狀態,那麼改造成本是非常巨大的。答案是利用Iframe的CSS Display特性,切換視窗時,非激活狀態的視窗並不消失,僅是Display狀態變更為none,激活狀態視窗的Display狀態變更為非none。在Display狀態切換時,Iframe不會重新載入。在Vue應用中,一行v-show指令即可替我們實現這一需求。

競爭機制

上述的狀態保持模型存在一個性能缺陷,即父應用主頁面實際上要提前擺放多個Iframe視窗。即使是這些不可見的視窗,也會發出資源request請求。大量的併發請求,會導致頁面性能下降。(值得一提的是,Chrome最新版本已經支持了Iframe的滾動懶載入策略,但是在此場景下,並不能改善併發請求的問題。)因此,我們需要引入資源池和競爭機制來管理多個Iframe。

引入一個容量為N的Iframe資源池來管理多開視窗,當資源池未滿時,新激活的視窗可以直接插入至資源池中;當資源池已滿時,資源池按照競爭策略,淘汰若幹池中的視窗並丟棄,然後插入新激活的視窗至資源池中。通過調整容量N,可以限制父應用主頁面上多開視窗的數量,從而限制併發請求數量,實現資源管控的目的。

Vue Patch原理探索

日前遇到了一個基於Vue應用的Iframe狀態保持問題,在上述模型下,資源池不僅保存視窗對象,而且記錄了每個視窗的點擊激活時間。資源池使用以下競爭淘汰策略:對視窗激活時間進行先後次序排序,激活時間排序次序較前的視窗優先被淘汰。當資源池滿時,會偶發池中視窗狀態不能保持的問題。

在Vue中,組件是一個可復用的Vue實例,Vue 會儘可能高效地渲染元素,通常會復用已有元素而不是從頭開始渲染。組件狀態是否正確保持,依賴關鍵屬性key。基於此,首先排查了Iframe組件的key屬性。事實上,Iframe組件已經正確分配了唯一的Uid,此種情況可以排除。

既然不是組件復用的問題,那麼在Vue內部的Diff Patch機制到底是如何運行的呢?讓我們看一下Vue 2.0的源代碼:

/**
 * 頁面首次渲染和後續更新的入口位置,也是 patch 的入口位置 
 */
Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  if (!prevVnode) {
    // 老 VNode 不存在,表示首次渲染,即初始化頁面時走這裡
    ……
  } else {
    // 響應式數據更新時,即更新頁面時走這裡
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
}

(1)在update生命周期下,主要執行了vm.__patch__方法。

/** 
* vm.__patch__ 
* 1、新節點不存在,老節點存在,調用 destroy,銷毀老節點 
* 2、如果 oldVnode 是真實元素,則表示首次渲染,創建新節點,並插入 body,然後移除老節點 
* 3、如果 oldVnode 不是真實元素,則表示更新階段,執行 patchVnode 
*/
function patch(oldVnode, vnode, hydrating, removeOnly) {
  …… // 1、新節點不存在,老節點存在,調用 destroy,銷毀老節點
  if (isUndef(oldVnode)) {
    …… // 2、老節點不存在,執行創建新節點
  } else {
    // 判斷 oldVnode 是否為真實元素
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // 3、不是真實元素,但是老節點和新節點是同一個節點,則是更新階段,執行 patch 更新節點
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      ……// 是真實元素,則表示初次渲染
    }
  }
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  return vnode.elm
}

(2)在__patch__方法內部,觸發patchVnode方法。

function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  ……
  if (isUndef(vnode.text)) {// 新節點不為文本節點
    if (isDef(oldCh) && isDef(ch)) {// 新舊節點的子節點都存在,執行diff遞歸
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else {
      ……
    }
  } else {
    ……
  }
}

(3)在patchVnode方法內部,觸發updateChildren方法。

/**
 * diff 過程:
 *   diff 優化:做了四種假設,假設新老節點開頭結尾有相同節點的情況,一旦命中假設,就避免了一次迴圈,以提高執行效率
 *   如果不幸沒有命中假設,則執行遍歷,從老節點中找到新開始節點
 *   找到相同節點,則執行 patchVnode,然後將老節點移動到正確的位置
 *   如果老節點先於新節點遍歷結束,則剩餘的新節點執行新增節點操作
 *   如果新節點先於老節點遍歷結束,則剩餘的老節點執行刪除操作,移除這些老節點
 */
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  // 老節點的開始索引
  let oldStartIdx = 0
  // 新節點的開始索引
  let newStartIdx = 0
  // 老節點的結束索引
  let oldEndIdx = oldCh.length - 1
  // 第一個老節點
  let oldStartVnode = oldCh[0]
  // 最後一個老節點
  let oldEndVnode = oldCh[oldEndIdx]
  // 新節點的結束索引
  let newEndIdx = newCh.length - 1
  // 第一個新節點
  let newStartVnode = newCh[0]
  // 最後一個新節點
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  // 遍歷新老兩組節點,只要有一組遍歷完(開始索引超過結束索引)則跳出迴圈
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (isUndef(oldStartVnode)) {
      // 如果節點被移動,在當前索引上可能不存在,檢測這種情況,如果節點不存在則調整索引
      oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
    } else if (isUndef(oldEndVnode)) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else if (sameVnode(oldStartVnode, newStartVnode)) {
      // 老開始節點和新開始節點是同一個節點,執行 patch
      patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
      // patch 結束後老開始和新開始的索引分別加 1
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 老結束和新結束是同一個節點,執行 patch
      patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
      // patch 結束後老結束和新結束的索引分別減 1
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
      // 老開始和新結束是同一個節點,執行 patch
      ……
    } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
      // 老結束和新開始是同一個節點,執行 patch
      ……
    } else {
      // 如果上面的四種假設都不成立,則通過遍歷找到新開始節點在老節點中的位置索引
      ……
        // 在老節點中找到新開始節點了
        if (sameVnode(vnodeToMove, newStartVnode)) {
          // 如果這兩個節點是同一個,則執行 patch
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          // patch 結束後將該老節點置為 undefined
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
        } else {
          // 最後這種情況是,找到節點了,但是發現兩個節點不是同一個節點,則視為新元素,執行創建
          ……
        }
      // 老節點向後移動一個
      newStartVnode = newCh[++newStartIdx]
    }
  }
  // 走到這裡,說明老姐節點或者新節點被遍歷完了,執行剩餘節點的處理
  ……
}

(4)咱們終於來到了主角updateChildren。在updateChildren內部實現中,使用了2套指針分別指向新舊Vnode頭尾,並向中間聚攏遞歸,以實現新舊數據對比刷新。

在前述資源池模型下,當查找到新舊Iframe組件時,會執行如下邏輯:

if (sameVnode(vnodeToMove, newStartVnode)) {
          // 如果這兩個節點是同一個,則執行 patch
          patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
          // patch 結束後將該老節點置為 undefined
          oldCh[idxInOld] = undefined
          canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
}

看來出現問題的罪魁禍首是執行了nodeOps.insertBefore。在WEB的運行環境下實際上執行的是DOM的insertBefore API。那麼我們移步來看看在DOM環境下,Iframe究竟是採取了何種刷新策略。

Iframe的狀態刷新機制

為了更清晰地看到DOM節點的變化情況,我們可以引入MutationObserver在最新版Chrome中來觀測DOM根節點。
首先設置容器節點下有兩個子節點:<span/><iframe/>,分別執行以下方案並記錄結果:
對比方案A:使用insertBefore在iframe節點前再插入一個新的span節點
對比方案B:使用insertBefore在iframe節點後再插入一個新的span節點
對比方案C:使用insertBefore交換span和iframe節點
對比方案D:使用insertBefore原地操作iframe自身
其結果如下:

方案名稱 Iframe是否刷新 DOM節點變化
A 新增一個子節點span
B 新增一個子節點span
C 先移除一個iframe,再插入一個iframe
D 先移除一個iframe,再插入一個iframe

實驗結果顯示,對Iframe執行insertBefore時,實際上DOM會依次執行移除、新增節點操作,導致Iframe狀態刷新。

在Vuejs Issues #9473中提到了類似的問題,一種解決方案是在Vue Patch時優先對非Iframe類型元素進行DOM操作,但是目前這個優化策略尚未被採用,在Vue 3.0版本中也依然存在這個問題。

那麼在資源池模型下,如何才能保證Iframe不執行insertBefore呢?重新回到Vue Patch機制下,我們發現,只有新舊Iframe在新舊Vnode列表中的相對位置保持不變時,才會只執行patchVnode方法,而不會觸發insertBefore方法。

因此,採取的最終解決方案是,更改淘汰機制,將排序操作改為搜索操作,保證了多開視窗在Vue中的狀態保持。

作者:京東零售 陳震

內容來源:京東雲開發者社區


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 雖然已經有《7千多兒童故事網ACCESS\EXCEL資料庫》這種記錄數的童話故事類數據,但是遇到了好採集的就總想採集下來,後續有時間或有需求可以再做合併等操作。 分類情況統計為: 兒童故事:兒童小故事(1895)、睡前故事(1229)、益智故事(233)、哲理故事(177)。民間故事:世界上下五千年 ...
  • 原本我以為《3萬5千英語句子英語例句大全ACCESS資料庫》例句已經夠多了,沒想到今天遇到一個10萬條英語單詞例句的數據,非常適合與單詞詞典進行關聯學習,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的用法以及句子的掌握都更有效率,例句多了單詞的 ...
  • CSS中,*的作用是通配表示“全部”。遺憾的是,並沒有一種通配元素名的方法。 例如,我有好幾個東西class都標記為了my-element-序號,就像這樣: ```html ... ``` 我現在希望讓所有這些class的東西都應用同一個css規則。可惜,css並不支持這麼一種寫法: ```css ...
  • 近日在編寫一個小程式,將日記功能移植到小程式中,雖然在手機端寫日記一般用不到Markdown,但是仍想在小程式中查看在電腦端寫的Markdown格式的內容,如代碼塊等。 經過查詢,找到一個被廣泛使用的解決方案是towxml 現記錄如下: > 首先將代碼克隆下來 ```js git clone htt ...
  • > 效果預覽 ![調節頁面.gif](https://wansherry.com/api/fc01e2c58219126e20367e856ebad24c.gif) > 關鍵代碼 ```javascript //調節視窗大小 useEffect(() => { if (conref.current) ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 在業務中,有這麼一種場景,表格下的某一列 ID 值,文本超長了,正常而言會是這樣: 通常,這種情況都需要超長省略溢出打點,那麼,就會變成這樣: 但是,這種展示有個缺點,3 個 ID 看上去就完全一致了,因此,PM 希望能夠實現頭部省略打點 ...
  • 隨著項目的發展,前端SPA應用的規模不斷加大、業務代碼耦合、編譯慢,導致日常的維護難度日益增加。同時前端技術的發展迅猛,導致功能擴展吃力,重構成本高,穩定性低。因此前端微服務應運而生。 ...
  • 1. 動畫 動畫(animation)是CSS3中具有顛覆性的特征之一,可以通過設置都各節點來精確控制一個或一組動畫,常用來實現複雜的動畫效果。 相比較過度,動畫可以實現更多變化,更多控制,連續自動播放等效果。 1.1 動畫的基本使用 製作動畫分為兩步: (1)先定義動畫。 (2)再使用(調用)動畫 ...
一周排行
    -Advertisement-
    Play Games
  • 背景 在瀏覽器中訪問本地靜態資源html網頁時,可能會遇到跨域問題如圖。 是因為瀏覽器預設啟用了同源策略,即只允許載入與當前網頁具有相同源(協議、功能變數名稱和埠)的內容。 WebView2預設情況下啟用了瀏覽器的同源策略,即只允許載入與主機相同源的內容。所以如果我們把靜態資源發佈到iis或者通過node ...
  • 最近看幾個老項目的SQL條件中使用了1=1,想想自己也曾經這樣寫過,略有感觸,特別拿出來說道說道。編寫SQL語句就像炒菜,每一種調料的使用都會影響菜品的最終味道,每一個SQL條件的加入也會影響查詢的執行效率。那麼 1=1 存在什麼樣的問題呢?為什麼又會使用呢? ...
  • 好久不見,我又回來了。 給大家分享一個我最近使用c#代碼操作ftp伺服器的代碼示例: 1 public abstract class FtpOperation 2 { 3 /// <summary> 4 /// FTP伺服器地址 5 /// </summary> 6 private string f ...
  • 一:背景 1. 講故事 過年喝了不少酒,腦子不靈光了,停了將近一個月沒寫博客,今天就當新年開工寫一篇吧。 去年年初有位朋友找到我,說他們的系統會偶發性崩潰,在網上也發了不少帖子求助,沒找到自己滿意的答案,讓我看看有沒有什麼線索,看樣子這是一個牛皮蘚的問題,既然對方有了dump,那就分析起來吧。 二: ...
  • 自己製作的一個基於Entity Framework Core 的資料庫操作攔截器,可以列印資料庫執行sql,方便開發調試,代碼如下: /// <summary> /// EF Core 的資料庫操作攔截器,用於在資料庫操作過程中進行日誌記錄和監視。 /// </summary> /// <remar ...
  • 本文分享自華為雲社區《Go併發範式 流水線和優雅退出 Pipeline 與 Cancellation》,作者:張儉。 介紹 Go 的併發原語可以輕鬆構建流數據管道,從而高效利用 I/O 和多個 CPU。 本文展示了此類pipelines的示例,強調了操作失敗時出現的細微之處,並介紹了乾凈地處理失敗的 ...
  • 在上篇文章中,我們介紹到在多線程環境下,如果編程不當,可能會出現程式運行結果混亂的問題。出現這個原因主要是,JMM 中主記憶體和線程工作記憶體的數據不一致,以及多個線程執行時無序,共同導致的結果。 ...
  • 1、下載安裝包首先、進入官網下載安裝包網址:https://www.python.org/downloads/windows/下載步驟:進入下載地址,根據自己的電腦系統選擇相應的python版本 選擇適配64位操作系統的版本(查看自己的電腦操作系統版本), 點擊下載安裝包 也可以下載我百度雲分享的安 ...
  • 簡介 git-commit-id-maven-plugin 是一個maven 插件,用來在打包的時候將git-commit 信息打進jar中。 這樣做的好處是可以將發佈的某版本和對應的代碼關聯起來,方便查閱和線上項目的維護。至於它的作用,用官方說法,這個功能對於大型分散式項目來說是無價的。 功能 你 ...
  • 序言 在數字時代,圖像生成技術正日益成為人工智慧領域的熱點。 本討論將重點聚焦於兩個備受矚目的模型:DALL-E和其他主流AI繪圖方法。 我們將探討它們的優勢、局限性以及未來的發展方向。通過比較分析,我們期望能夠更全面地瞭解這些技術,為未來的研究和應用提供啟示。 Q: 介紹一下 dall-e Ope ...