<div class="ceshi">
	<p>1</p><p>2</p><p>3</p>
</div>

<script>
	setInterval(function(){addLine();},2000)
    function addLine() {
        var html=$(".ceshi p:nth-child(1)").html();
         $(".ceshi p:nth-child(1)").remove()
         $('.ceshi p:last-child').after("<p>"+html+"</p>");
    } 
</script>

用到的方法有：.

remove（）刪除

after（）最后的位置追加

家好，我叫Echa哥。

微前端已經(jīng)是一個非常成熟的領(lǐng)域了，但開發(fā)者不管采用哪個現(xiàn)有方案，在適配成本、樣式隔離、運行性能、頁面白屏、子應(yīng)用通信、子應(yīng)用保活、多應(yīng)用激活、vite 框架支持、應(yīng)用共享等用戶核心訴求都或存在問題，或無法提供支持。本文提供一種基于 iframe 的全新的微前端方案，完善地解決了這些核心訴求。

為什么還要造微前端框架

目前較成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分別分析這三個微前端方案：

qiankun 方案

qiankun 方案是基于 single-spa 的微前端方案。

特點

• html entry 的方式引入子應(yīng)用，相比 js entry 極大地降低了應(yīng)用改造的成本；
• 完備的沙箱方案，js 沙箱做了 SnapshotSandbox、LegacySandbox、ProxySandbox 三套漸進增強方案，css 沙箱做了 strictStyleIsolation、experimentalStyleIsolation 兩套適用不同場景的方案；
• 做了靜態(tài)資源預(yù)加載能力；

不足

• 適配成本比較高，工程化、生命周期、靜態(tài)資源路徑、路由等都要做一系列的適配工作；
• css 沙箱采用嚴(yán)格隔離會有各種問題，js 沙箱在某些場景下執(zhí)行性能下降嚴(yán)重；
• 無法同時激活多個子應(yīng)用，也不支持子應(yīng)用保活；
• 無法支持 vite 等 esmodule 腳本運行；

micro-app 方案

micro-app 是基于 webcomponent + qiankun sandbox 的微前端方案。

特點

• 使用 webcomponet 加載子應(yīng)用相比 single-spa 這種注冊監(jiān)聽方案更加優(yōu)雅；
• 復(fù)用經(jīng)過大量項目驗證過 qiankun 的沙箱機制也使得框架更加可靠；
• 組件式的 api 更加符合使用習(xí)慣，支持子應(yīng)用保活；
• 降低子應(yīng)用改造的成本，提供靜態(tài)資源預(yù)加載能力；

不足

• 接入成本較 qiankun 有所降低，但是路由依然存在依賴；
• 多應(yīng)用激活后無法保持各子應(yīng)用的路由狀態(tài)，刷新后全部丟失；
• css 沙箱依然無法絕對的隔離，js 沙箱做全局變量查找緩存，性能有所優(yōu)化；
• 支持 vite 運行，但必須使用 plugin 改造子應(yīng)用，且 js 代碼沒辦法做沙箱隔離；
• 對于不支持 webcompnent 的瀏覽器沒有做降級處理；

EMP 方案

EMP 方案是基于 webpack 5 module federation 的微前端方案。

特點

• webpack 聯(lián)邦編譯可以保證所有子應(yīng)用依賴解耦；
• 應(yīng)用間去中心化的調(diào)用、共享模塊；
• 模塊遠(yuǎn)程 ts 支持；

不足

• 對 webpack 強依賴，老舊項目不友好；
• 沒有有效的 css 沙箱和 js 沙箱，需要靠用戶自覺；
• 子應(yīng)用保活、多應(yīng)用激活無法實現(xiàn)；
• 主、子應(yīng)用的路由可能發(fā)生沖突；

結(jié)論

qiankun 方案對 single-spa 微前端方案做了較大的提升同時也遺留下來了不少問題長時間沒有解決；
micro-app 方案對 qiankun 方案做了較多提升但基于 qiankun 的沙箱也相應(yīng)會繼承其存在的問題；
EMP 方案基于 webpack 5 聯(lián)邦編譯則約束了其使用范圍；
目前的微前端方案在用戶的核心訴求上都沒有很好的滿足，有很大的優(yōu)化提升空間。

無界方案

無界微前端方案基于 webcomponent 容器 + iframe 沙箱，能夠完善地解決適配成本、樣式隔離、運行性能、頁面白屏、子應(yīng)用通信、子應(yīng)用保活、多應(yīng)用激活、vite 框架支持、應(yīng)用共享等用戶的核心訴求。

文檔地址，demo 地址:https://wujie-micro.github.io/demo-main-vue/home，git 地址:https://github.com/Tencent/wujie

下面就成本、速度、隔離、功能等多個方面進行闡述。

成本低

無界微前端的成本非常低，主要體現(xiàn)在主應(yīng)用的使用成本、子應(yīng)用的適配成本兩個方面。

主應(yīng)用使用成本

主應(yīng)用使用無界不需要學(xué)習(xí)額外的知識，無界提供基于 vue 封裝的 wujie-vue 和基于 react 封裝的 wujie-react，用戶可以當(dāng)初普通組件一樣加載子應(yīng)用，以 wujie-vue 舉例：

 <WujieVue
   width="100%"
   height="100%"
   name="xxx"
   url="xxx"
   :sync="true"
   :fiber="true"
   :degrade="false"
   :fetch="fetch"
   :props="props"
   :plugins="plugins"
   :beforeLoad="beforeLoad"
   :beforeMount="beforeMount"
   :afterMount="afterMount"
   :beforeUnmount="beforeUnmount"
   :afterUnmount="afterUnmount"
 ></WujieVue>

子應(yīng)用加載和普通 vue 組件加載并無二致，所有配置都收斂到組件的屬性上。

子應(yīng)用適配成本

子應(yīng)用首先需要做支持跨域請求改造，這個是所有微前端框架運行的前提，除此之外子應(yīng)用可以不做任何改造就可以在無界框架中運行，不過此時運行的方式是重建模式。

子應(yīng)用在無界中會根據(jù)是否保活、是否做了生命周期適配進入不同的運行模式：

其中保活模式、單例模式、重建模式適用于不同的業(yè)務(wù)場景，就算復(fù)雜點的單例模式用戶也只是需要做一點簡單的生命周期改造工作，可以說子應(yīng)用適配成本極低。

速度快

無界微前端非常快，主要體現(xiàn)在首屏打開快、運行速度快兩個方面。

首屏打開快

目前大部分微前端只能做到靜態(tài)資源預(yù)加載，但是就算子應(yīng)用所有資源都預(yù)加載完畢，等到子應(yīng)用打開時頁面仍然有不短的白屏?xí)r間，這部分白屏?xí)r間主要是子應(yīng)用 js 的解析和執(zhí)行。

無界微前端不僅能夠做到靜態(tài)資源的預(yù)加載，還可以做到子應(yīng)用的預(yù)執(zhí)行。

預(yù)執(zhí)行會阻塞主應(yīng)用的執(zhí)行線程，所以無界提供 fiber 執(zhí)行模式，采取類似 react fiber 的方式間斷執(zhí)行 js，每個 js 文件的執(zhí)行都包裹在 requestidlecallback 中，每執(zhí)行一個 js 可以返回響應(yīng)外部的輸入，但是這個顆粒度是 js 文件，如果子應(yīng)用單個 js 文件過大，可以通過拆包的方式降低體積達(dá)到 fiber 執(zhí)行模式效益最大化。

運行速度快

子應(yīng)用的 js 在 iframe 內(nèi)運行，由于 iframe 是一個天然的 js 運行沙箱，所以無需采用 with (fakewindow) 這種方式來指定子應(yīng)用的執(zhí)行上下文，從而避免由于采用 with 語句執(zhí)行子應(yīng)用代碼而導(dǎo)致的性能下降，整體的運行性能和原生性能差別不大。

原生隔離

無界微前端實現(xiàn)了 css 沙箱和 js 沙箱的原生隔離，子應(yīng)用不用擔(dān)心污染問題。

css 沙箱隔離

無界將子應(yīng)用的 dom 放置在 webcomponent + shadowdom 的容器中，除了可繼承的 css 屬性外實現(xiàn)了應(yīng)用之間 css 的原生隔離。

js 沙箱隔離

無界將子應(yīng)用的 js 放置在 iframe（js-iframe）中運行，實現(xiàn)了應(yīng)用之間 window、document、location、history 的完全解耦和隔離。

js 沙箱和 css 沙箱連接

無界在底層采用 proxy + Object.defineproperty 的方式將 js-iframe 中對 dom 操作劫持代理到 webcomponent shadowRoot 容器中，開發(fā)者無感知也無需關(guān)心。

功能強大

無界微前端的功能非常強大，支持子應(yīng)用保活、子應(yīng)用內(nèi)嵌、多應(yīng)用激活、去中心化通信、生命周期、插件系統(tǒng)、vite 框架支持、兼容 IE9、應(yīng)用共享。

子應(yīng)用保活

當(dāng)子應(yīng)用設(shè)置為保活模式，切換子應(yīng)用后仍然可以保持子應(yīng)用的狀態(tài)和路由不會丟失。

子應(yīng)用嵌套

無界支持子應(yīng)用多層嵌套，嵌套的應(yīng)用和正常應(yīng)用一致，支持預(yù)加載、保活、同步、通信等能力，需要注意的是內(nèi)嵌的子應(yīng)用 name 也需要保持唯一性，否則將復(fù)用之前渲染出來的應(yīng)用

多應(yīng)用激活

無界支持一個頁面同時激活多個子應(yīng)用并且保持這些子應(yīng)用路由同步的能力。

去中心化通信

無界提供多種通信方式：window.parent 直接通信、props 數(shù)據(jù)注入、去中心化 EventBus 通信機制：

• 子應(yīng)用 js 在和主應(yīng)用同域的 iframe 內(nèi)運行，所以 window.parent 可以直接拿到主應(yīng)用的 window 對象來進行通信
• 主應(yīng)用可以向子應(yīng)用注入 props 對象，里面可以注入數(shù)據(jù)和方法供子應(yīng)用調(diào)用
• 內(nèi)置的 EventBus 去中心化通信方案可以讓應(yīng)用之間方便的直接通信

生命周期

無界提供完善的生命周期鉤子供主應(yīng)用調(diào)用：

• beforeLoad：子應(yīng)用開始加載靜態(tài)資源前觸發(fā)
• beforeMount：子應(yīng)用渲染前觸發(fā) （生命周期改造專用）
• afterMount：子應(yīng)用渲染后觸發(fā)（生命周期改造專用）
• beforeUnmount：子應(yīng)用卸載前觸發(fā)（生命周期改造專用）
• afterUnmount：子應(yīng)用卸載后觸發(fā)（生命周期改造專用）
• activated：子應(yīng)用進入后觸發(fā)（保活模式專用）
• deactivated：子應(yīng)用離開后觸發(fā)（保活模式專用）

插件系統(tǒng)

無界提供強大的插件系統(tǒng)，方便用戶在運行時去修改子應(yīng)用代碼從而避免將適配代碼硬編碼到倉庫中。

無界插件主要能力如下：

• html-loader 可以對子應(yīng)用 template 進行處理
• js-excludes 和 css-excludes 可以排除子應(yīng)用特定的 js 和 css 加載
• js-before-loaders、js-loader、js-after-loaders 可以方便的對子應(yīng)用 js 進行自定義
• css-before-loaders、css-loader、css-after-loaders 可以方便的對子應(yīng)用 css 進行自定義

vite 框架支持

無界子應(yīng)用運行在 iframe 中原生支持 esm 的腳本，而且不用擔(dān)心子應(yīng)用運行的上下文問題，因為子應(yīng)用讀取的就是 iframe 的 window 上下文，所以無界微前端原生支持 vite 框架。

兼容 IE9

由于無界采用了 webcomponent + shadowdom + proxy 的方案，在某些低版本瀏覽器上無法運行時，無界微前端會自動降級。

降級方案采用：

• webcomponent + shadowdom ? iframe（dom-iframe）
• proxy + Object.defineproperty ? Object.defineproperty
• 子應(yīng)用運行的方式是 dom-iframe + js-iframe + Object.defineproperty，IE9+ 都可以兼容（無界沒有 polyfill es6，需用戶手動 babel 處理）。

自動降級后無界依然可以保證子應(yīng)用的 css 和 js 原生隔離，但是由于 dom-iframe 的限制，彈窗將只能在子應(yīng)用內(nèi)部打開

應(yīng)用共享

一個微前端系統(tǒng)可能同時運行多個子應(yīng)用，不同子應(yīng)用之間可能存在相同的包依賴，那么這個依賴就會在不同子應(yīng)用中重復(fù)打包、重復(fù)執(zhí)行造成性能和內(nèi)存的浪費。

無界提供一種工程上的策略結(jié)合無界的插件能力，可以有效的解決這個問題（其他微前端框架也可以做到），這里以一個場景舉例：主應(yīng)用使用到了 ant-design-vue，子應(yīng)用 A 也使用到了相同版本的 ant-design-vue。

主應(yīng)用：

1、修改主應(yīng)用的 index.js，將共享包掛載到主應(yīng)用的 window 對象上

 // index.js
 import Antdv from "ant-design-vue";
 // 將需要共享的包掛載到主應(yīng)用全局
 window.Antdv=Antdv;

2、加載子應(yīng)用時注入插件，將主應(yīng)用的 Antdv 賦值到子應(yīng)用的 window 對象上

 <WujieVue name="A" url="xxxxx" :plugins="[{ jsBeforeLoaders: [{ content: 'window.Antdv=window.parent.Antdv' }] }]">
 </WujieVue>

子應(yīng)用: webpack 設(shè)置 externals

 module.exports={
   externals: {
     "ant-design-vue": {
       root: "Antdv",
       commonjs: "Antdv",
       commonjs2: "Antdv",
       amd: "Antdv",
     },
   },
 };

如果子應(yīng)用需要單獨運行可以參考文檔

總結(jié)

無界微前端采用 webcomponent + iframe 的來加載子應(yīng)用，具有成本低、速度快、原生隔離、功能強大等一系列優(yōu)點，在滿足用戶核心訴求的同時讓使用微前端的體驗就像使用普通組件一樣簡單，極大的降低了使用門檻。

無界已經(jīng)開源 ，歡迎 star ??????：https://github.com/Tencent/wujie

次的ae 2020 mac版帶來了更多新功能和改進，比如快速創(chuàng)建和編輯形狀、Cinema 4D Lite R21、預(yù)覽和播放性能改進、EXR工作流程增強、圖形和文字增強、表情改善、內(nèi)容感知填充以改進視頻等，after effects 2020中文版的功能更加全面，用戶體驗更佳。

Adobe After Effects 2020 for mac官方介紹

Adobe After Effects簡稱“AE”是Adobe公司推出的一款圖形視頻處理軟件，適用于從事設(shè)計和視頻特技的機構(gòu)，包括電視臺、動畫制作公司、個人后期制作工作室以及多媒體工作室。屬于層類型后期軟件。

Adobe After Effects軟件可以幫助您高效且精確地創(chuàng)建無數(shù)種引人注目的動態(tài)圖形和震撼人心的視覺效果。利用與其他Adobe軟件無與倫比的緊密集成和高度靈活的2D和3D合成，以及數(shù)百種預(yù)設(shè)的效果和動畫，為您的電影、視頻、DVD和Macromedia Flash作品增添令人耳目一新的效果。

after effects 2020 mac版全新功能

預(yù)覽和播放性能改進

此版本的After Effects提供了線程改進，可提供更快，更清晰的預(yù)覽播放。您還可以利用新的GPU加速顯示系統(tǒng)核心來獲得設(shè)計的準(zhǔn)確視圖，而又不會破壞您的創(chuàng)意流程。GPU渲染增強了預(yù)覽回放性能，并為您提供了清晰，詳細(xì)的項目實時預(yù)覽。

增強的EXR工作流程

現(xiàn)在，您可以將分層的EXR文件作為合成文件導(dǎo)入，以加快合成過程。它使您能夠?qū)⒍鄠€效果應(yīng)用于合成圖層，而無需先執(zhí)行復(fù)雜的設(shè)置過程。您可以單獨處理每個圖層并應(yīng)用效果，以使渲染在其環(huán)境中看起來更自然。改進的性能使處理大型文件的響應(yīng)速度更快。

- 將時間碼值從合成寫入標(biāo)頭信息

- 現(xiàn)在，它包括Cryptomatte。

- 直接將alpha寫入EXR文件。

更快的形狀

此版本的After Effects在處理形狀以加快創(chuàng)意迭代時提供了改進的響應(yīng)能力。通過改進對分組控件的訪問，可以更輕松地導(dǎo)航和管理大量形狀。

- 包含形狀圖層的項目總體上提高了性能。

- 現(xiàn)在，您可以右鍵單擊以對形狀圖層進行分組或取消分組。在“ 時間軸”面板中選擇多個形狀，右鍵單擊并選擇分組/取消分組形狀。另一個選項是在預(yù)覽窗口中選擇多個形狀，單擊鼠標(biāo)右鍵，然后從“ 蒙版和形狀”路徑中使用“分組/取消分組”。

圖形和文字增強

此版本的After Effects具有多個圖形和文本增強功能。

下拉菜單控制效果

作為After Effects遷移創(chuàng)建者，請使用新的“ 下拉菜單控件” 效果將項目中圖層的屬性連接到下拉菜單。在早期版本中，After Effects使您可以將圖層的屬性連接到滑塊和復(fù)選框，以在項目中驅(qū)動動畫。Mogrt創(chuàng)建者還共享滑塊和復(fù)選框作為可編輯控件，以更改Premiere Pro中Mogrt的屬性。

但是，對于更復(fù)雜和冗長的動畫，滑塊和復(fù)選框可能并不總是很直觀。例如，您必須將一周的7天連接到不同的顏色。您可以使用日期列表創(chuàng)建一個下拉菜單，并使用顏色列表創(chuàng)建另一個菜單，以便在編輯時更容易選擇。您還可以在表達(dá)式，運動圖形模板和“主屬性”中引用下拉菜單。通過此菜單，可以輕松一次調(diào)整多個設(shè)置，并設(shè)計模板，這對于Premiere Pro中的編輯人員而言更加容易。

使用表達(dá)式編輯文本屬性

現(xiàn)在，您可以使用表達(dá)式對項目中的文本屬性進行全局更改。當(dāng)您處理任何文本表達(dá)式和文本時，新表達(dá)式可以控制文本樣式和文本本身。例如，您的項目具有主標(biāo)題和結(jié)尾標(biāo)題，并且您希望始終使用統(tǒng)一的文本樣式。為此，使用表達(dá)式將標(biāo)題鏈接在一起，并立即更新其樣式。單個文本層的參考屬性，可輕松在整個合成中應(yīng)用更改。這使您可以在After Effects和Mogrts中的多個文本層之間保持字體，大小和樣式同步。

替代文字矩形

- 如果在文本“ 編輯屬性”對話框中為文本控件啟用了“ 備用文本框”后，創(chuàng)建了After Effects Mogrt ，請使用指定的備用層為該文本層確定文本rect。

- 在Premiere Pro中，將此替代文本矩形用于該文本層，紅色懸停矩形是替代文本的大小或位置。在紅色懸停矩形內(nèi)單擊，將激活該aeText上的文本編輯。

- 后備文本框信息存儲在After Effects Mogrt中，并序列化到After Effects項目。

- 當(dāng)After Effects計算要在Premiere Pro程序監(jiān)視器中編輯的文本矩形時，如果已設(shè)置，它將使用備用圖層。

表情改善

此版本的After Effects提供了以下表達(dá)改進：

表達(dá)式編輯器的改進

- 現(xiàn)在，您可以使用新的滾動功能來防止在通過鍵入返回字符調(diào)整框大小時滾動調(diào)整不正確。

- 如果變量以數(shù)字開頭，則防止數(shù)字在自動完成列表中匹配。更智能的自動完成功能可避免覆蓋右方括號和引號。

- 現(xiàn)在，您可以縮放Hi-DPI顯示的字體大小。

- 圖形編輯器現(xiàn)在為所有打開的圖形編輯器提交首選項更改。

- 如果啟用語法突出顯示，則UI中的折疊圖標(biāo)按鈕現(xiàn)在將使用默認(rèn)和背景色，或行號顏色和背景色。

表達(dá)表現(xiàn)的改善

- After Effects現(xiàn)在嘗試檢測在整個合成過程中不會改變的表達(dá)式，并且僅計算一次該表達(dá)式。加載您喜歡的表達(dá)式填充的伴奏并體驗改進的性能。

- 現(xiàn)在，使用posterizeTime（0）的任何表達(dá)式對于整個comp僅計算一次，而不是在每個幀上計算一次。

擴展格式和更好的播放支持

新格式支持包括Canon XF-HEVC。處理10位H.265 HD / UHD和HEVC HD / UHD文件時，體驗更好的播放效果。還提供了改進的ProRes解碼性能。此外，還可以使用帶有增量幀的MJPEG和動畫編解碼器文件的新本機支持訪問舊版QuickTime文件。

新的Cineware渲染器和Cinema 4D Lite R21

此版本的After Effects引入了新的Cinema 4D Lite R21。下面列出的是詳細(xì)信息：

- 當(dāng)您安裝After Effects時，After Effects安裝程序會將Maxon Cinema 4D R21文件夾安裝在您常用應(yīng)用程序位置的磁盤上。

- 此文件夾包括Cinema 4D Lite R21。首次啟動時，您需要按照屏幕上的說明創(chuàng)建一個Maxon用戶帳戶。當(dāng)您通過Cineware啟動時，也可能會以試用模式啟動完整版的Cinema 4D。

- 需要一個帳戶來啟動Cinema 4D，但不需要使用Cineware或Cinema 4D 3D渲染器在After Effects中進行渲染。

內(nèi)容感知填充以改進視頻

借助新的性能改進并減少了內(nèi)存使用，可以更快，更有效地從視頻中刪除不需要的對象。

其他增強

- 系統(tǒng)兼容性報告 - After Effects檢測到并提醒您有關(guān)計算機上使用的特定硬件和較舊的硬件驅(qū)動程序的任何已知問題。如果您收到問題警報，但您認(rèn)為它無效，請?zhí)峤诲e誤，以便我們直接檢查兼容性問題。

- Mac上的OpenCL支持已刪除。請使用金屬或軟件渲染。

- After Effects現(xiàn)在不支持光線追蹤的3D渲染器。

- 預(yù)覽在其中緩存了所有幀（或在啟用回放之前緩存幀）的comp時，即使與UI交互，也應(yīng)保持目標(biāo)comp幀率。

- 從EXR文件讀取時更好地遵守本機FPS

- 內(nèi)容感知填充更新：

內(nèi)存使用量減少了66％。

性能提高了10-25％。

修復(fù)了第一次使用Content Aware Fill時顯示的警告對話框。

修復(fù)了少量透明度可能導(dǎo)致參考框架出現(xiàn)問題的問題。

- 選擇標(biāo)簽組不會選擇害羞的圖層，現(xiàn)在也可以從“編輯”菜單中使用。

- 修復(fù)了在After Effects中報告為丟幀的非丟幀時間碼EXR序列。

- 更新了“另存為以前的版本”以支持AE版本15和16。

- 形狀層：Polystar不再卡在0內(nèi)半徑處。

- 更新了Photoshop導(dǎo)入庫。確保您的Photoshop文件導(dǎo)入并正確顯示在After Effects中。

- 更新到MacOS渲染以使用Metal并開始棄用OpenGL。

- 現(xiàn)在，在合成中拖動時，參考線和標(biāo)尺會捕捉到整個像素。如果需要較小的增量，請右鍵單擊指南以設(shè)置特定值。

- Mocha插件已更新為最新版本。