@micro-zoe/micro-app 1.0.0-beta.1 → 1.0.0-beta.3

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.1';
+const version = '1.0.0-beta.3';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -356,7 +356,7 @@ function pureCreateElement(tagName, options) {
  * @param target Accept cloned elements
  * @param deep deep clone or transfer dom
  */
-function cloneContainer(origin, target, deep) {
+function cloneContainer(target, origin, deep) {
     target.innerHTML = '';
     if (deep) {
         // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
@@ -562,7 +562,6 @@ var appStates;
 (function (appStates) {
     appStates["CREATED"] = "created";
     appStates["LOADING"] = "loading";
-    appStates["LOADED"] = "loaded";
     appStates["LOAD_FAILED"] = "load_failed";
     appStates["MOUNTING"] = "mounting";
     appStates["MOUNTED"] = "mounted";
@@ -1171,234 +1170,591 @@ function createSourceCenter() {
 }
 var sourceCenter = createSourceCenter();
 
+const scriptTypes = ['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'];
+// whether use type='module' script
+function isTypeModule(app, scriptInfo) {
+    return scriptInfo.appSpace[app.name].module && (!app.useSandbox || app.iframe);
+}
+// special script element
+function isSpecialScript(app, scriptInfo) {
+    const attrs = scriptInfo.appSpace[app.name].attrs;
+    return attrs.has('id');
+}
 /**
- *
+ * whether to run js in inline mode
+ * scene:
+ * 1. inline config for app
+ * 2. inline attr in script element
+ * 3. module script
+ * 4. script with special attr
+ */
+function isInlineMode(app, scriptInfo) {
+    return (app.inline ||
+        scriptInfo.appSpace[app.name].inline ||
+        isTypeModule(app, scriptInfo) ||
+        isSpecialScript(app, scriptInfo) ||
+        app.iframe);
+}
+// TODO: iframe重新插入window前后不一致，通过iframe Function创建的函数无法复用
+function getEffectWindow(app) {
+    return app.iframe ? app.sandBox.microAppWindow : globalEnv.rawWindow;
+}
+// Convert string code to function
+function code2Function(app, code) {
+    const targetWindow = getEffectWindow(app);
+    return new targetWindow.Function(code);
+}
+/**
+ * If the appSpace of the current js address has other app, try to reuse parsedFunction of other app
  * @param appName app.name
- * @param linkInfo linkInfo of current address
+ * @param scriptInfo scriptInfo of current address
+ * @param currentCode pure code of current address
  */
-function getExistParseCode(appName, prefix, linkInfo) {
-    const appSpace = linkInfo.appSpace;
+function getExistParseResult(app, scriptInfo, currentCode) {
+    const appSpace = scriptInfo.appSpace;
     for (const item in appSpace) {
-        if (item !== appName) {
+        if (item !== app.name) {
             const appSpaceData = appSpace[item];
-            if (appSpaceData.parsedCode) {
-                return appSpaceData.parsedCode.replace(new RegExp(createPrefix(item, true), 'g'), prefix);
+            if (appSpaceData.parsedCode === currentCode && appSpaceData.parsedFunction) {
+                return appSpaceData.parsedFunction;
             }
         }
     }
 }
-// transfer the attributes on the link to convertStyle
-function setConvertStyleAttr(convertStyle, attrs) {
+/**
+ * get parsedFunction from exist data or parsedCode
+ * @returns parsedFunction
+ */
+function getParsedFunction(app, scriptInfo, parsedCode) {
+    return getExistParseResult(app, scriptInfo, parsedCode) || code2Function(app, parsedCode);
+}
+// Prevent randomly created strings from repeating
+function getUniqueNonceSrc() {
+    const nonceStr = createNonceSrc();
+    if (sourceCenter.script.hasInfo(nonceStr)) {
+        return getUniqueNonceSrc();
+    }
+    return nonceStr;
+}
+// transfer the attributes on the script to convertScript
+function setConvertScriptAttr(convertScript, attrs) {
     attrs.forEach((value, key) => {
-        if (key === 'rel')
+        if ((key === 'type' && value === 'module') || key === 'defer' || key === 'async')
             return;
-        if (key === 'href')
-            key = 'data-origin-href';
-        convertStyle.setAttribute(key, value);
+        if (key === 'src')
+            key = 'data-origin-src';
+        globalEnv.rawSetAttribute.call(convertScript, key, value);
     });
 }
+// wrap code in sandbox
+function isWrapInSandBox(app, scriptInfo) {
+    return app.useSandbox && !isTypeModule(app, scriptInfo);
+}
+function getSandboxType(app, scriptInfo) {
+    return isWrapInSandBox(app, scriptInfo) ? app.iframe ? 'iframe' : 'with' : 'disable';
+}
 /**
- * Extract link elements
- * @param link link element
- * @param parent parent element of link
+ * Extract script elements
+ * @param script script element
+ * @param parent parent element of script
  * @param app app
- * @param microAppHead micro-app-head element
  * @param isDynamic dynamic insert
  */
-function extractLinkFromHtml(link, parent, app, isDynamic = false) {
-    const rel = link.getAttribute('rel');
-    let href = link.getAttribute('href');
+function extractScriptElement(script, parent, app, isDynamic = false) {
+    var _a;
     let replaceComment = null;
-    if (rel === 'stylesheet' && href) {
-        href = CompletionPath(href, app.url);
-        let linkInfo = sourceCenter.link.getInfo(href);
+    let src = script.getAttribute('src');
+    if (src)
+        src = CompletionPath(src, app.url);
+    if (script.hasAttribute('exclude') || checkExcludeUrl(src, app.name)) {
+        replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
+    }
+    else if ((script.type &&
+        !scriptTypes.includes(script.type)) ||
+        script.hasAttribute('ignore') ||
+        checkIgnoreUrl(src, app.name)) {
+        // 配置为忽略的脚本，清空 rawDocument.currentScript，避免被忽略的脚本内获取 currentScript 出错
+        if ((_a = globalEnv.rawDocument) === null || _a === void 0 ? void 0 : _a.currentScript) {
+            delete globalEnv.rawDocument.currentScript;
+        }
+        return null;
+    }
+    else if ((globalEnv.supportModuleScript && script.noModule) ||
+        (!globalEnv.supportModuleScript && script.type === 'module')) {
+        replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
+    }
+    else if (src) { // remote script
+        let scriptInfo = sourceCenter.script.getInfo(src);
         const appSpaceData = {
-            attrs: getAttributes(link),
+            async: script.hasAttribute('async'),
+            defer: script.defer || script.type === 'module',
+            module: script.type === 'module',
+            inline: script.hasAttribute('inline'),
+            pure: script.hasAttribute('pure'),
+            attrs: getAttributes(script),
         };
-        if (!linkInfo) {
-            linkInfo = {
+        if (!scriptInfo) {
+            scriptInfo = {
                 code: '',
+                isExternal: true,
                 appSpace: {
                     [app.name]: appSpaceData,
                 }
             };
         }
         else {
-            linkInfo.appSpace[app.name] = linkInfo.appSpace[app.name] || appSpaceData;
+            /**
+             * Reuse when appSpace exists
+             * NOTE:
+             * 1. The same static script, appSpace must be the same (in fact, it may be different when url change)
+             * 2. The same dynamic script, appSpace may be the same, but we still reuse appSpace, which should pay attention
+             */
+            scriptInfo.appSpace[app.name] = scriptInfo.appSpace[app.name] || appSpaceData;
         }
-        sourceCenter.link.setInfo(href, linkInfo);
+        sourceCenter.script.setInfo(src, scriptInfo);
         if (!isDynamic) {
-            app.source.links.add(href);
-            replaceComment = document.createComment(`link element with href=${href} move to micro-app-head as style element`);
-            linkInfo.appSpace[app.name].placeholder = replaceComment;
+            app.source.scripts.add(src);
+            replaceComment = document.createComment(`script with src='${src}' extract by micro-app`);
         }
         else {
-            return { address: href, linkInfo };
+            return { address: src, scriptInfo };
         }
     }
-    else if (rel && ['prefetch', 'preload', 'prerender', 'icon', 'apple-touch-icon'].includes(rel)) {
-        // preload prefetch icon ....
-        if (isDynamic) {
-            replaceComment = document.createComment(`link element with rel=${rel}${href ? ' & href=' + href : ''} removed by micro-app`);
+    else if (script.textContent) { // inline script
+        /**
+         * NOTE:
+         * 1. Each inline script is unique
+         * 2. Every dynamic created inline script will be re-executed
+         * ACTION:
+         * 1. Delete dynamic inline script info after exec
+         * 2. Delete static inline script info when destroy
+         */
+        const nonceStr = getUniqueNonceSrc();
+        const scriptInfo = {
+            code: script.textContent,
+            isExternal: false,
+            appSpace: {
+                [app.name]: {
+                    async: false,
+                    defer: script.type === 'module',
+                    module: script.type === 'module',
+                    inline: script.hasAttribute('inline'),
+                    pure: script.hasAttribute('pure'),
+                    attrs: getAttributes(script),
+                }
+            }
+        };
+        if (!isDynamic) {
+            app.source.scripts.add(nonceStr);
+            sourceCenter.script.setInfo(nonceStr, scriptInfo);
+            replaceComment = document.createComment('inline script extract by micro-app');
         }
         else {
-            parent.removeChild(link);
+            // Because each dynamic script is unique, it is not put into sourceCenter
+            return { address: nonceStr, scriptInfo };
         }
     }
-    else if (href) {
-        // dns-prefetch preconnect modulepreload search ....
-        link.setAttribute('href', CompletionPath(href, app.url));
+    else if (!isDynamic) {
+        /**
+         * script with empty src or empty script.textContent remove in static html
+         * & not removed if it created by dynamic
+         */
+        replaceComment = document.createComment('script element removed by micro-app');
     }
     if (isDynamic) {
         return { replaceComment };
     }
-    else if (replaceComment) {
-        return parent.replaceChild(replaceComment, link);
+    else {
+        return parent === null || parent === void 0 ? void 0 : parent.replaceChild(replaceComment, script);
     }
 }
 /**
- * Get link remote resources
- * @param wrapElement htmlDom
- * @param app app
- * @param microAppHead micro-app-head
+ * get assets plugins
+ * @param appName app name
  */
-function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
-    const styleList = Array.from(app.source.links);
-    const fetchLinkPromise = styleList.map((address) => {
-        const linkInfo = sourceCenter.link.getInfo(address);
-        return linkInfo.code ? linkInfo.code : fetchSource(address, app.name);
-    });
-    const fiberLinkTasks = fiberStyleResult ? [] : null;
-    promiseStream(fetchLinkPromise, (res) => {
-        injectFiberTask(fiberLinkTasks, () => fetchLinkSuccess(styleList[res.index], res.data, microAppHead, app));
-    }, (err) => {
-        logError(err, app.name);
-    }, () => {
-        /**
-         * 1. If fiberStyleResult exist, fiberLinkTasks must exist
-         * 2. Download link source while processing style
-         * 3. Process style first, and then process link
-         */
-        if (fiberStyleResult) {
-            fiberStyleResult.then(() => {
-                fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
-                serialExecFiberTasks(fiberLinkTasks);
-            });
-        }
-        else {
-            app.onLoad(wrapElement);
-        }
+function getAssetsPlugins(appName) {
+    var _a, _b, _c;
+    const globalPlugins = ((_a = microApp.options.plugins) === null || _a === void 0 ? void 0 : _a.global) || [];
+    const modulePlugins = ((_c = (_b = microApp.options.plugins) === null || _b === void 0 ? void 0 : _b.modules) === null || _c === void 0 ? void 0 : _c[appName]) || [];
+    return [...globalPlugins, ...modulePlugins];
+}
+/**
+ * whether the address needs to be excluded
+ * @param address css or js link
+ * @param plugins microApp plugins
+ */
+function checkExcludeUrl(address, appName) {
+    if (!address)
+        return false;
+    const plugins = getAssetsPlugins(appName) || [];
+    return plugins.some(plugin => {
+        if (!plugin.excludeChecker)
+            return false;
+        return plugin.excludeChecker(address);
     });
 }
 /**
- * Fetch link succeeded, replace placeholder with style tag
- * NOTE:
- * 1. Only exec when init, no longer exec when remount
- * 2. Only handler html link element, not dynamic link or style
- * 3. The same prefix can reuse parsedCode
- * 4. Async exec with requestIdleCallback in prefetch or fiber
- * 5. appSpace[app.name].placeholder/attrs must exist
- * @param address resource address
- * @param code link source code
- * @param microAppHead micro-app-head
- * @param app app instance
+ * whether the address needs to be ignore
+ * @param address css or js link
+ * @param plugins microApp plugins
  */
-function fetchLinkSuccess(address, code, microAppHead, app) {
-    /**
-     * linkInfo must exist, but linkInfo.code not
-     * so we set code to linkInfo.code
-     */
-    const linkInfo = sourceCenter.link.getInfo(address);
-    linkInfo.code = code;
-    const appSpaceData = linkInfo.appSpace[app.name];
-    const placeholder = appSpaceData.placeholder;
+function checkIgnoreUrl(address, appName) {
+    if (!address)
+        return false;
+    const plugins = getAssetsPlugins(appName) || [];
+    return plugins.some(plugin => {
+        if (!plugin.ignoreChecker)
+            return false;
+        return plugin.ignoreChecker(address);
+    });
+}
+/**
+ *  Get remote resources of script
+ * @param wrapElement htmlDom
+ * @param app app
+ */
+function fetchScriptsFromHtml(wrapElement, app) {
+    const scriptList = Array.from(app.source.scripts);
+    const fetchScriptPromise = [];
+    const fetchScriptPromiseInfo = [];
+    for (const address of scriptList) {
+        const scriptInfo = sourceCenter.script.getInfo(address);
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        if ((!appSpaceData.defer && !appSpaceData.async) || (app.isPrefetch && !app.isPrerender)) {
+            fetchScriptPromise.push(scriptInfo.code ? scriptInfo.code : fetchSource(address, app.name));
+            fetchScriptPromiseInfo.push([address, scriptInfo]);
+        }
+    }
+    const fiberScriptTasks = app.isPrefetch || app.fiber ? [] : null;
+    if (fetchScriptPromise.length) {
+        promiseStream(fetchScriptPromise, (res) => {
+            injectFiberTask(fiberScriptTasks, () => fetchScriptSuccess(fetchScriptPromiseInfo[res.index][0], fetchScriptPromiseInfo[res.index][1], res.data, app));
+        }, (err) => {
+            logError(err, app.name);
+        }, () => {
+            if (fiberScriptTasks) {
+                fiberScriptTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                serialExecFiberTasks(fiberScriptTasks);
+            }
+            else {
+                app.onLoad(wrapElement);
+            }
+        });
+    }
+    else {
+        app.onLoad(wrapElement);
+    }
+}
+/**
+ * fetch js succeeded, record the code value
+ * @param address script address
+ * @param scriptInfo resource script info
+ * @param data code
+ */
+function fetchScriptSuccess(address, scriptInfo, code, app) {
+    // reset scriptInfo.code
+    scriptInfo.code = code;
     /**
-     * When prefetch app is replaced by a new app in the processing phase, since the linkInfo is common, when the linkInfo of the prefetch app is processed, it may have already been processed.
-     * This causes placeholder to be possibly null
-     * e.g.
-     * 1. prefetch app.url different from <micro-app></micro-app>
-     * 2. prefetch param different from <micro-app></micro-app>
+     * Pre parse script for prefetch, improve rendering performance
+     * NOTE:
+     * 1. if global parseResult exist, skip this step
+     * 2. if app is inline or script is esmodule, skip this step
+     * 3. if global parseResult not exist, the current script occupies the position, when js is reused, parseResult is reference
      */
-    if (placeholder) {
-        const convertStyle = pureCreateElement('style');
-        handleConvertStyle(app, address, convertStyle, linkInfo, appSpaceData.attrs);
-        if (placeholder.parentNode) {
-            placeholder.parentNode.replaceChild(convertStyle, placeholder);
-        }
-        else {
-            microAppHead.appendChild(convertStyle);
+    if (app.isPrefetch && app.prefetchLevel === 2) {
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        /**
+         * When prefetch app is replaced by a new app in the processing phase, since the scriptInfo is common, when the scriptInfo of the prefetch app is processed, it may have already been processed.
+         * This causes parsedCode to already exist when preloading ends
+         * e.g.
+         * 1. prefetch app.url different from <micro-app></micro-app>
+         * 2. prefetch param different from <micro-app></micro-app>
+         */
+        if (!appSpaceData.parsedCode) {
+            appSpaceData.parsedCode = bindScope(address, app, code, scriptInfo);
+            appSpaceData.sandboxType = getSandboxType(app, scriptInfo);
+            if (!isInlineMode(app, scriptInfo)) {
+                try {
+                    appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
+                }
+                catch (err) {
+                    logError('Something went wrong while handling preloaded resources', app.name, '\n', err);
+                }
+            }
         }
-        // clear placeholder
-        appSpaceData.placeholder = null;
     }
 }
 /**
- * Get parsedCode, update convertStyle
- * Actions:
- * 1. get scope css (through scopedCSS or oldData)
- * 2. record parsedCode
- * 3. set parsedCode to convertStyle if need
- * @param app app instance
- * @param address resource address
- * @param convertStyle converted style
- * @param linkInfo linkInfo in sourceCenter
- * @param attrs attrs of link
+ * Execute js in the mount lifecycle
+ * @param app app
+ * @param initHook callback for umd mode
  */
-function handleConvertStyle(app, address, convertStyle, linkInfo, attrs) {
-    if (app.scopecss) {
-        const appSpaceData = linkInfo.appSpace[app.name];
-        appSpaceData.prefix = appSpaceData.prefix || createPrefix(app.name);
-        if (!appSpaceData.parsedCode) {
-            const existParsedCode = getExistParseCode(app.name, appSpaceData.prefix, linkInfo);
-            if (!existParsedCode) {
-                convertStyle.textContent = linkInfo.code;
-                scopedCSS(convertStyle, app, address);
+function execScripts(app, initHook) {
+    const fiberScriptTasks = app.fiber ? [] : null;
+    const scriptList = Array.from(app.source.scripts);
+    const deferScriptPromise = [];
+    const deferScriptInfo = [];
+    for (const address of scriptList) {
+        const scriptInfo = sourceCenter.script.getInfo(address);
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        // Notice the second render
+        if (appSpaceData.defer || appSpaceData.async) {
+            // TODO: defer和module彻底分开，不要混在一起
+            if (scriptInfo.isExternal && !scriptInfo.code && !isTypeModule(app, scriptInfo)) {
+                deferScriptPromise.push(fetchSource(address, app.name));
             }
             else {
-                convertStyle.textContent = existParsedCode;
+                deferScriptPromise.push(scriptInfo.code);
             }
-            appSpaceData.parsedCode = convertStyle.textContent;
+            deferScriptInfo.push([address, scriptInfo]);
+            isTypeModule(app, scriptInfo) && (initHook.moduleCount = initHook.moduleCount ? ++initHook.moduleCount : 1);
         }
         else {
-            convertStyle.textContent = appSpaceData.parsedCode;
+            injectFiberTask(fiberScriptTasks, () => {
+                runScript(address, app, scriptInfo);
+                initHook(false);
+            });
         }
     }
+    if (deferScriptPromise.length) {
+        promiseStream(deferScriptPromise, (res) => {
+            const scriptInfo = deferScriptInfo[res.index][1];
+            scriptInfo.code = scriptInfo.code || res.data;
+        }, (err) => {
+            initHook.errorCount = initHook.errorCount ? ++initHook.errorCount : 1;
+            logError(err, app.name);
+        }, () => {
+            deferScriptInfo.forEach(([address, scriptInfo]) => {
+                if (isString(scriptInfo.code)) {
+                    injectFiberTask(fiberScriptTasks, () => {
+                        runScript(address, app, scriptInfo, initHook);
+                        !isTypeModule(app, scriptInfo) && initHook(false);
+                    });
+                }
+            });
+            /**
+             * Fiber wraps js in requestIdleCallback and executes it in sequence
+             * NOTE:
+             * 1. In order to ensure the execution order, wait for all js loaded and then execute
+             * 2. If js create a dynamic script, it may be errors in the execution order, because the subsequent js is wrapped in requestIdleCallback, even putting dynamic script in requestIdleCallback doesn't solve it
+             *
+             * BUG: NOTE.2 - execution order problem
+             */
+            if (fiberScriptTasks) {
+                fiberScriptTasks.push(() => Promise.resolve(initHook(isUndefined(initHook.moduleCount) ||
+                    initHook.errorCount === deferScriptPromise.length)));
+                serialExecFiberTasks(fiberScriptTasks);
+            }
+            else {
+                initHook(isUndefined(initHook.moduleCount) ||
+                    initHook.errorCount === deferScriptPromise.length);
+            }
+        });
+    }
     else {
-        convertStyle.textContent = linkInfo.code;
+        if (fiberScriptTasks) {
+            fiberScriptTasks.push(() => Promise.resolve(initHook(true)));
+            serialExecFiberTasks(fiberScriptTasks);
+        }
+        else {
+            initHook(true);
+        }
     }
-    setConvertStyleAttr(convertStyle, attrs);
 }
 /**
- * Handle css of dynamic link
- * @param address link address
+ * run code
+ * @param address script address
  * @param app app
- * @param linkInfo linkInfo
- * @param originLink origin link element
+ * @param scriptInfo script info
+ * @param callback callback of module script
  */
-function formatDynamicLink(address, app, linkInfo, originLink) {
-    const convertStyle = pureCreateElement('style');
-    const handleDynamicLink = () => {
-        handleConvertStyle(app, address, convertStyle, linkInfo, linkInfo.appSpace[app.name].attrs);
-        dispatchOnLoadEvent(originLink);
-    };
-    if (linkInfo.code) {
-        defer(handleDynamicLink);
+function runScript(address, app, scriptInfo, callback, replaceElement) {
+    try {
+        actionsBeforeRunScript(app);
+        const appSpaceData = scriptInfo.appSpace[app.name];
+        const sandboxType = getSandboxType(app, scriptInfo);
+        /**
+         * NOTE:
+         * 1. plugins and wrapCode will only be executed once
+         * 2. if parsedCode not exist, parsedFunction is not exist
+         * 3. if parsedCode exist, parsedFunction does not necessarily exist
+         */
+        if (!appSpaceData.parsedCode || appSpaceData.sandboxType !== sandboxType) {
+            appSpaceData.parsedCode = bindScope(address, app, scriptInfo.code, scriptInfo);
+            appSpaceData.sandboxType = sandboxType;
+            appSpaceData.parsedFunction = null;
+        }
+        /**
+         * TODO: 优化逻辑
+         * 是否是内联模式应该由外部传入，这样自外而内更加统一，逻辑更加清晰
+         */
+        if (isInlineMode(app, scriptInfo)) {
+            const scriptElement = replaceElement || pureCreateElement('script');
+            runCode2InlineScript(address, appSpaceData.parsedCode, isTypeModule(app, scriptInfo), scriptElement, appSpaceData.attrs, callback);
+            /**
+             * TODO: 优化逻辑
+             * replaceElement不存在说明是初始化执行，需要主动插入script
+             * 但这里的逻辑不清晰，应该明确声明是什么环境下才需要主动插入，而不是用replaceElement间接判断
+             * replaceElement还有可能是注释类型(一定是在后台执行)，这里的判断都是间接判断，不够直观
+             */
+            if (!replaceElement) {
+                // TEST IGNORE
+                const parent = app.iframe ? app.sandBox.microBody : app.querySelector('micro-app-body');
+                parent === null || parent === void 0 ? void 0 : parent.appendChild(scriptElement);
+            }
+        }
+        else {
+            runParsedFunction(app, scriptInfo);
+        }
     }
-    else {
-        fetchSource(address, app.name).then((data) => {
-            linkInfo.code = data;
-            handleDynamicLink();
-        }).catch((err) => {
-            logError(err, app.name);
-            dispatchOnErrorEvent(originLink);
-        });
+    catch (e) {
+        console.error(`[micro-app from ${replaceElement ? 'runDynamicScript' : 'runScript'}] app ${app.name}: `, e, address);
     }
-    return convertStyle;
 }
-
-class Adapter {
-    constructor() {
-        // keys that can only assigned to rawWindow
+/**
+ * Get dynamically created remote script
+ * @param address script address
+ * @param app app instance
+ * @param scriptInfo scriptInfo
+ * @param originScript origin script element
+ */
+function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
+    const runDynamicScript = () => {
+        const descriptor = Object.getOwnPropertyDescriptor(globalEnv.rawDocument, 'currentScript');
+        if (!descriptor || descriptor.configurable) {
+            Object.defineProperty(globalEnv.rawDocument, 'currentScript', {
+                value: originScript,
+                configurable: true,
+            });
+        }
+        runScript(address, app, scriptInfo, dispatchScriptOnLoadEvent, replaceElement);
+        !isTypeModule(app, scriptInfo) && dispatchScriptOnLoadEvent();
+    };
+    if (scriptInfo.code || isTypeModule(app, scriptInfo)) {
+        defer(runDynamicScript);
+    }
+    else {
+        fetchSource(address, app.name).then((code) => {
+            scriptInfo.code = code;
+            runDynamicScript();
+        }).catch((err) => {
+            logError(err, app.name);
+            dispatchOnErrorEvent(originScript);
+        });
+    }
+    return replaceElement;
+}
+/**
+ * Get dynamically created inline script
+ * @param address script address
+ * @param app app instance
+ * @param scriptInfo scriptInfo
+ */
+function runDynamicInlineScript(address, app, scriptInfo) {
+    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
+    runScript(address, app, scriptInfo, void 0, replaceElement);
+    return replaceElement;
+}
+/**
+ * common handle for inline script
+ * @param address script address
+ * @param code bound code
+ * @param module type='module' of script
+ * @param scriptElement target script element
+ * @param attrs attributes of script element
+ * @param callback callback of module script
+ */
+function runCode2InlineScript(address, code, module, scriptElement, attrs, callback) {
+    if (module) {
+        // module script is async, transform it to a blob for subsequent operations
+        if (isInlineScript(address)) {
+            const blob = new Blob([code], { type: 'text/javascript' });
+            scriptElement.src = URL.createObjectURL(blob);
+        }
+        else {
+            scriptElement.src = address;
+        }
+        globalEnv.rawSetAttribute.call(scriptElement, 'type', 'module');
+        if (callback) {
+            callback.moduleCount && callback.moduleCount--;
+            /**
+             * module script will execute onload method only after it insert to document/iframe
+             */
+            scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
+        }
+    }
+    else {
+        scriptElement.textContent = code;
+    }
+    setConvertScriptAttr(scriptElement, attrs);
+}
+// init & run code2Function
+function runParsedFunction(app, scriptInfo) {
+    const appSpaceData = scriptInfo.appSpace[app.name];
+    if (!appSpaceData.parsedFunction) {
+        appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
+    }
+    appSpaceData.parsedFunction.call(getEffectWindow(app));
+}
+/**
+ * bind js scope
+ * @param app app
+ * @param code code
+ * @param scriptInfo source script info
+ */
+function bindScope(address, app, code, scriptInfo) {
+    // TODO: 1、cache 2、esm code is null
+    if (isPlainObject(microApp.options.plugins)) {
+        code = usePlugins(address, code, app.name, microApp.options.plugins);
+    }
+    if (isWrapInSandBox(app, scriptInfo)) {
+        return app.iframe ? `(function(window,self,global,location){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyLocation);` : `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
+    }
+    return code;
+}
+/**
+ * actions before run script
+ */
+function actionsBeforeRunScript(app) {
+    setActiveProxyWindow(app);
+}
+/**
+ * set active sandBox.proxyWindow to window.__MICRO_APP_PROXY_WINDOW__
+ */
+function setActiveProxyWindow(app) {
+    if (app.sandBox) {
+        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
+    }
+}
+/**
+ * Call the plugin to process the file
+ * @param address script address
+ * @param code code
+ * @param appName app name
+ * @param plugins plugin list
+ */
+function usePlugins(address, code, appName, plugins) {
+    var _a;
+    const newCode = processCode(plugins.global, code, address);
+    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, address);
+}
+function processCode(configs, code, address) {
+    if (!isArray(configs)) {
+        return code;
+    }
+    return configs.reduce((preCode, config) => {
+        if (isPlainObject(config) && isFunction(config.loader)) {
+            return config.loader(preCode, address);
+        }
+        return preCode;
+    }, code);
+}
+
+class Adapter {
+    constructor() {
+        // keys that can only assigned to rawWindow
         this.escapeSetterKeyList = [
             'location',
         ];
@@ -1521,7 +1877,10 @@ function patchElementTree(container, appName) {
 function updateElementInfo(node, appName) {
     var _a, _b;
     const proxyWindow = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.sandBox) === null || _b === void 0 ? void 0 : _b.proxyWindow;
-    if (proxyWindow && isNode(node) && !node.__MICRO_APP_NAME__) {
+    if (isNode(node) &&
+        !node.__MICRO_APP_NAME__ &&
+        !node.__PURE_ELEMENT__ &&
+        proxyWindow) {
         /**
          * TODO:
          *  1. 测试baseURI和ownerDocument在with沙箱中是否正确
@@ -1552,14 +1911,21 @@ function updateElementInfo(node, appName) {
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
+// Get the map element
+function getMappingNode(node) {
+    var _a;
+    return (_a = dynamicElementInMicroAppMap.get(node)) !== null && _a !== void 0 ? _a : node;
+}
 /**
  * Process the new node and format the style, link and script element
- * @param parent parent node
  * @param child new node
  * @param app app
  */
-function handleNewNode(parent, child, app) {
-    if (isStyleElement(child)) {
+function handleNewNode(child, app) {
+    if (dynamicElementInMicroAppMap.has(child)) {
+        return dynamicElementInMicroAppMap.get(child);
+    }
+    else if (isStyleElement(child)) {
         if (child.hasAttribute('exclude')) {
             const replaceComment = document.createComment('style element with exclude attribute ignored by micro-app');
             dynamicElementInMicroAppMap.set(child, replaceComment);
@@ -1583,7 +1949,7 @@ function handleNewNode(parent, child, app) {
                 microApp.options.excludeAssetFilter(child.href))) {
             return child;
         }
-        const { address, linkInfo, replaceComment } = extractLinkFromHtml(child, parent, app, true);
+        const { address, linkInfo, replaceComment } = extractLinkFromHtml(child, null, app, true);
         if (address && linkInfo) {
             const replaceStyle = formatDynamicLink(address, app, linkInfo, child);
             dynamicElementInMicroAppMap.set(child, replaceStyle);
@@ -1601,7 +1967,7 @@ function handleNewNode(parent, child, app) {
             microApp.options.excludeAssetFilter(child.src)) {
             return child;
         }
-        const { replaceComment, address, scriptInfo } = extractScriptElement(child, parent, app, true) || {};
+        const { replaceComment, address, scriptInfo } = extractScriptElement(child, null, app, true) || {};
         if (address && scriptInfo) {
             // remote script or inline script
             const replaceElement = scriptInfo.isExternal ? runDynamicRemoteScript(address, app, scriptInfo, child) : runDynamicInlineScript(address, app, scriptInfo);
@@ -1705,6 +2071,9 @@ function getHijackParent(parent, targetChild, app) {
             }
             return app.querySelector('micro-app-body');
         }
+        if (app.iframe && isScriptElement(targetChild)) {
+            return app.sandBox.microBody;
+        }
     }
     return null;
 }
@@ -1717,10 +2086,25 @@ function invokeRawMethod(rawMethod, parent, targetChild, passiveChild) {
 function isPendMethod(method) {
     return method === globalEnv.rawAppend || method === globalEnv.rawPrepend;
 }
-// Get the map element
-function getMappingNode(node) {
-    var _a;
-    return (_a = dynamicElementInMicroAppMap.get(node)) !== null && _a !== void 0 ? _a : node;
+/**
+ * Attempt to complete the static resource address again before insert the node
+ * @param app app instance
+ * @param newChild target node
+ */
+function completePathDynamic(app, newChild) {
+    if (isElement(newChild)) {
+        if (/^(img|script)$/i.test(newChild.tagName)) {
+            if (newChild.hasAttribute('src')) {
+                globalEnv.rawSetAttribute.call(newChild, 'src', CompletionPath(newChild.getAttribute('src'), app.url));
+            }
+            if (newChild.hasAttribute('srcset')) {
+                globalEnv.rawSetAttribute.call(newChild, 'srcset', CompletionPath(newChild.getAttribute('srcset'), app.url));
+            }
+        }
+        else if (/^link$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
+            globalEnv.rawSetAttribute.call(newChild, 'href', CompletionPath(newChild.getAttribute('href'), app.url));
+        }
+    }
 }
 /**
  * method of handle new node
@@ -1738,37 +2122,11 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
         newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
-            if (isElement(newChild)) {
-                if (/^(img|script)$/i.test(newChild.tagName)) {
-                    if (newChild.hasAttribute('src')) {
-                        globalEnv.rawSetAttribute.call(newChild, 'src', CompletionPath(newChild.getAttribute('src'), app.url));
-                    }
-                    if (newChild.hasAttribute('srcset')) {
-                        globalEnv.rawSetAttribute.call(newChild, 'srcset', CompletionPath(newChild.getAttribute('srcset'), app.url));
-                    }
-                }
-                else if (/^link$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
-                    globalEnv.rawSetAttribute.call(newChild, 'href', CompletionPath(newChild.getAttribute('href'), app.url));
-                }
-            }
-            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(parent, newChild, app), passiveChild && getMappingNode(passiveChild));
-        }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(parent, newChild);
+            completePathDynamic(app, newChild);
+            return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(newChild, app), passiveChild && getMappingNode(passiveChild));
         }
     }
-    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        if (!isNode(newChild) && currentAppName) {
-            const app = appInstanceMap.get(currentAppName);
-            if (app === null || app === void 0 ? void 0 : app.container) {
-                if (parent === document.head) {
-                    return rawMethod.call(app.querySelector('micro-app-head'), newChild);
-                }
-                else if (parent === document.body) {
-                    return rawMethod.call(app.querySelector('micro-app-body'), newChild);
-                }
-            }
-        }
+    if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
         return rawMethod.call(parent, newChild);
     }
     return rawMethod.call(parent, newChild, passiveChild);
@@ -1778,33 +2136,37 @@ function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
  */
 function patchElementAndDocument() {
     patchDocument();
+    const rawRootElement = globalEnv.rawRootElement;
     // prototype methods of add element👇
-    Element.prototype.appendChild = function appendChild(newChild) {
+    rawRootElement.prototype.appendChild = function appendChild(newChild) {
         return commonElementHandler(this, newChild, null, globalEnv.rawAppendChild);
     };
-    Element.prototype.insertBefore = function insertBefore(newChild, refChild) {
+    rawRootElement.prototype.insertBefore = function insertBefore(newChild, refChild) {
         return commonElementHandler(this, newChild, refChild, globalEnv.rawInsertBefore);
     };
-    Element.prototype.replaceChild = function replaceChild(newChild, oldChild) {
+    rawRootElement.prototype.replaceChild = function replaceChild(newChild, oldChild) {
         return commonElementHandler(this, newChild, oldChild, globalEnv.rawReplaceChild);
     };
-    Element.prototype.append = function append(...nodes) {
+    rawRootElement.prototype.append = function append(...nodes) {
         let i = 0;
-        const length = nodes.length;
-        while (i < length) {
-            commonElementHandler(this, nodes[i], null, globalEnv.rawAppend);
+        while (i < nodes.length) {
+            let node = nodes[i];
+            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
+            commonElementHandler(this, markElement(node), null, globalEnv.rawAppend);
             i++;
         }
     };
-    Element.prototype.prepend = function prepend(...nodes) {
+    rawRootElement.prototype.prepend = function prepend(...nodes) {
         let i = nodes.length;
         while (i > 0) {
-            commonElementHandler(this, nodes[i - 1], null, globalEnv.rawPrepend);
+            let node = nodes[i - 1];
+            node = isNode(node) ? node : globalEnv.rawCreateTextNode.call(globalEnv.rawDocument, node);
+            commonElementHandler(this, markElement(node), null, globalEnv.rawPrepend);
             i--;
         }
     };
     // prototype methods of delete element👇
-    Element.prototype.removeChild = function removeChild(oldChild) {
+    rawRootElement.prototype.removeChild = function removeChild(oldChild) {
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
@@ -1819,8 +2181,27 @@ function patchElementAndDocument() {
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
+    /**
+     * The insertAdjacentElement method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
+     * NOTE:
+     *  1. parameter 2 of insertAdjacentElement must type 'Element'
+     */
+    rawRootElement.prototype.insertAdjacentElement = function (where, element) {
+        var _a;
+        if ((element === null || element === void 0 ? void 0 : element.__MICRO_APP_NAME__) && isElement(element)) {
+            const app = appInstanceMap.get(element.__MICRO_APP_NAME__);
+            if (app === null || app === void 0 ? void 0 : app.container) {
+                const processedEle = handleNewNode(element, app);
+                if (!isElement(processedEle))
+                    return element;
+                const realParent = (_a = getHijackParent(this, processedEle, app)) !== null && _a !== void 0 ? _a : this;
+                return globalEnv.rawInsertAdjacentElement.call(realParent, where, processedEle);
+            }
+        }
+        return globalEnv.rawInsertAdjacentElement.call(this, where, element);
+    };
     // patch cloneNode
-    Element.prototype.cloneNode = function cloneNode(deep) {
+    rawRootElement.prototype.cloneNode = function cloneNode(deep) {
         const clonedNode = globalEnv.rawCloneNode.call(this, deep);
         this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
         return clonedNode;
@@ -1840,17 +2221,63 @@ function patchElementAndDocument() {
         }
         return null;
     }
-    Element.prototype.querySelector = function querySelector(selectors) {
+    rawRootElement.prototype.querySelector = function querySelector(selectors) {
         var _a;
         const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
         return globalEnv.rawElementQuerySelector.call(target, selectors);
     };
-    Element.prototype.querySelectorAll = function querySelectorAll(selectors) {
+    rawRootElement.prototype.querySelectorAll = function querySelectorAll(selectors) {
         var _a;
         const target = (_a = getQueryTarget(this)) !== null && _a !== void 0 ? _a : this;
         return globalEnv.rawElementQuerySelectorAll.call(target, selectors);
     };
-    rawDefineProperty(Element.prototype, 'innerHTML', {
+    // rewrite setAttribute, complete resource address
+    rawRootElement.prototype.setAttribute = function setAttribute(key, value) {
+        const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+        if (appName &&
+            appInstanceMap.has(appName) &&
+            (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
+                (key === 'href' && /^link$/i.test(this.tagName)))) {
+            const app = appInstanceMap.get(appName);
+            value = CompletionPath(value, app.url);
+        }
+        globalEnv.rawSetAttribute.call(this, key, value);
+    };
+    /**
+     * TODO: 兼容直接通过img.src等操作设置的资源
+     * NOTE:
+     *  1. 卸载时恢复原始值
+     *  2. 循环嵌套的情况
+     *  3. 放在global_env中统一处理
+     *  4. 是否和completePathDynamic的作用重复？
+     */
+    // const protoAttrList: Array<[HTMLElement, string]> = [
+    //   [HTMLImageElement.prototype, 'src'],
+    //   [HTMLScriptElement.prototype, 'src'],
+    //   [HTMLLinkElement.prototype, 'href'],
+    // ]
+    // protoAttrList.forEach(([target, attr]) => {
+    //   const { enumerable, configurable, get, set } = Object.getOwnPropertyDescriptor(target, attr) || {
+    //     enumerable: true,
+    //     configurable: true,
+    //   }
+    //   rawDefineProperty(target, attr, {
+    //     enumerable,
+    //     configurable,
+    //     get: function () {
+    //       return get?.call(this)
+    //     },
+    //     set: function (value) {
+    //       const currentAppName = getCurrentAppName()
+    //       if (currentAppName && appInstanceMap.has(currentAppName)) {
+    //         const app = appInstanceMap.get(currentAppName)
+    //         value = CompletionPath(value, app!.url)
+    //       }
+    //       set?.call(this, value)
+    //     },
+    //   })
+    // })
+    rawDefineProperty(rawRootElement.prototype, 'innerHTML', {
         configurable: true,
         enumerable: true,
         get() {
@@ -1866,7 +2293,9 @@ function patchElementAndDocument() {
             });
         }
     });
-    // Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
+    /**
+     * NOTE:Abandon this way at 2023.2.28 before v1.0.0-beta.0, it will cause vue2 throw error when render again
+     */
     // rawDefineProperty(Node.prototype, 'parentNode', {
     //   configurable: true,
     //   enumerable: true,
@@ -1921,33 +2350,35 @@ function patchDocument() {
         const element = globalEnv.rawCreateDocumentFragment.call(getBindTarget(this));
         return markElement(element);
     };
+    // rawRootDocument.prototype.createTextNode = function createTextNode (data: string): Text {
+    //   const element = globalEnv.rawCreateTextNode.call(getBindTarget(this), data)
+    //   return markElement(element)
+    // }
     // query element👇
     function querySelector(selectors) {
-        var _a, _b, _c;
+        var _a, _b;
         const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
-            !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             // see https://github.com/micro-zoe/micro-app/issues/56
             rawDocument !== _this) {
             return globalEnv.rawQuerySelector.call(_this, selectors);
         }
-        return (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.querySelector(selectors)) !== null && _c !== void 0 ? _c : null;
+        return (_b = (_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : null;
     }
     function querySelectorAll(selectors) {
-        var _a, _b, _c;
+        var _a, _b;
         const _this = getBindTarget(this);
         const currentAppName = getCurrentAppName();
         if (!currentAppName ||
-            !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             rawDocument !== _this) {
             return globalEnv.rawQuerySelectorAll.call(_this, selectors);
         }
-        return (_c = (_b = appInstanceMap.get(currentAppName)) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors)) !== null && _c !== void 0 ? _c : [];
+        return (_b = (_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
     }
     rawRootDocument.prototype.querySelector = querySelector;
     rawRootDocument.prototype.querySelectorAll = querySelectorAll;
@@ -2005,45 +2436,6 @@ function patchDocument() {
         }
     };
 }
-/**
- * patchSetAttribute is different from other patch
- * NOTE:
- * 1. it not dependent on sandbox
- * 2. it should exec when first micro-app-element created & release when all app unmounted
- */
-let hasRewriteSetAttribute = false;
-function patchSetAttribute() {
-    if (hasRewriteSetAttribute)
-        return;
-    hasRewriteSetAttribute = true;
-    Element.prototype.setAttribute = function setAttribute(key, value) {
-        if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
-            if (isPlainObject(value)) {
-                const cloneValue = {};
-                Object.getOwnPropertyNames(value).forEach((ownKey) => {
-                    if (!(isString(ownKey) && ownKey.indexOf('__') === 0)) {
-                        cloneValue[ownKey] = value[ownKey];
-                    }
-                });
-                this.data = cloneValue;
-            }
-            else if (value !== '[object Object]') {
-                logWarn('property data must be an object', this.getAttribute('name'));
-            }
-        }
-        else {
-            const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
-            if (appName &&
-                appInstanceMap.has(appName) &&
-                (((key === 'src' || key === 'srcset') && /^(img|script|video|audio|source|embed)$/i.test(this.tagName)) ||
-                    (key === 'href' && /^link$/i.test(this.tagName)))) {
-                const app = appInstanceMap.get(appName);
-                value = CompletionPath(value, app.url);
-            }
-            globalEnv.rawSetAttribute.call(this, key, value);
-        }
-    };
-}
 function releasePatchDocument() {
     const rawRootDocument = globalEnv.rawRootDocument;
     rawRootDocument.prototype.createElement = globalEnv.rawCreateElement;
@@ -2060,21 +2452,18 @@ function releasePatchDocument() {
 function releasePatchElementAndDocument() {
     removeDomScope();
     releasePatchDocument();
-    Element.prototype.appendChild = globalEnv.rawAppendChild;
-    Element.prototype.insertBefore = globalEnv.rawInsertBefore;
-    Element.prototype.replaceChild = globalEnv.rawReplaceChild;
-    Element.prototype.removeChild = globalEnv.rawRemoveChild;
-    Element.prototype.append = globalEnv.rawAppend;
-    Element.prototype.prepend = globalEnv.rawPrepend;
-    Element.prototype.cloneNode = globalEnv.rawCloneNode;
-    Element.prototype.querySelector = globalEnv.rawElementQuerySelector;
-    Element.prototype.querySelectorAll = globalEnv.rawElementQuerySelectorAll;
-    rawDefineProperty(Element.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
-}
-// exec when last child unmount
-function releasePatchSetAttribute() {
-    hasRewriteSetAttribute = false;
-    Element.prototype.setAttribute = globalEnv.rawSetAttribute;
+    const rawRootElement = globalEnv.rawRootElement;
+    rawRootElement.prototype.appendChild = globalEnv.rawAppendChild;
+    rawRootElement.prototype.insertBefore = globalEnv.rawInsertBefore;
+    rawRootElement.prototype.replaceChild = globalEnv.rawReplaceChild;
+    rawRootElement.prototype.removeChild = globalEnv.rawRemoveChild;
+    rawRootElement.prototype.append = globalEnv.rawAppend;
+    rawRootElement.prototype.prepend = globalEnv.rawPrepend;
+    rawRootElement.prototype.cloneNode = globalEnv.rawCloneNode;
+    rawRootElement.prototype.querySelector = globalEnv.rawElementQuerySelector;
+    rawRootElement.prototype.querySelectorAll = globalEnv.rawElementQuerySelectorAll;
+    rawRootElement.prototype.setAttribute = globalEnv.rawSetAttribute;
+    rawDefineProperty(rawRootElement.prototype, 'innerHTML', globalEnv.rawInnerHTMLDesc);
 }
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
@@ -2103,23 +2492,24 @@ function initGlobalEnv() {
         const rawWindow = window.rawWindow || Function('return window')();
         const rawDocument = window.rawDocument || Function('return document')();
         const rawRootDocument = rawWindow.Document || Function('return Document')();
-        const supportModuleScript = isSupportModuleScript();
-        /**
-         * save patch raw methods
-         * pay attention to this binding
-         */
-        const rawSetAttribute = Element.prototype.setAttribute;
-        const rawAppendChild = Element.prototype.appendChild;
-        const rawInsertBefore = Element.prototype.insertBefore;
-        const rawReplaceChild = Element.prototype.replaceChild;
-        const rawRemoveChild = Element.prototype.removeChild;
-        const rawAppend = Element.prototype.append;
-        const rawPrepend = Element.prototype.prepend;
-        const rawCloneNode = Element.prototype.cloneNode;
-        const rawElementQuerySelector = Element.prototype.querySelector;
-        const rawElementQuerySelectorAll = Element.prototype.querySelectorAll;
-        const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
-        const rawParentNodeDesc = Object.getOwnPropertyDescriptor(Node.prototype, 'parentNode');
+        const rawRootElement = rawWindow.Element;
+        const rawRootNode = rawWindow.Node;
+        const rawRootEventTarget = rawWindow.EventTarget;
+        // save patch raw methods, pay attention to this binding
+        const rawSetAttribute = rawRootElement.prototype.setAttribute;
+        const rawAppendChild = rawRootElement.prototype.appendChild;
+        const rawInsertBefore = rawRootElement.prototype.insertBefore;
+        const rawReplaceChild = rawRootElement.prototype.replaceChild;
+        const rawRemoveChild = rawRootElement.prototype.removeChild;
+        const rawAppend = rawRootElement.prototype.append;
+        const rawPrepend = rawRootElement.prototype.prepend;
+        const rawCloneNode = rawRootElement.prototype.cloneNode;
+        const rawElementQuerySelector = rawRootElement.prototype.querySelector;
+        const rawElementQuerySelectorAll = rawRootElement.prototype.querySelectorAll;
+        const rawInsertAdjacentElement = rawRootElement.prototype.insertAdjacentElement;
+        const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(rawRootElement.prototype, 'innerHTML');
+        const rawParentNodeDesc = Object.getOwnPropertyDescriptor(rawRootNode.prototype, 'parentNode');
+        // Document proto methods
         const rawCreateElement = rawRootDocument.prototype.createElement;
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
         const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
@@ -2133,7 +2523,9 @@ function initGlobalEnv() {
         const ImageProxy = new Proxy(Image, {
             construct(Target, args) {
                 const elementImage = new Target(...args);
-                elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
+                const currentAppName = getCurrentAppName();
+                if (currentAppName)
+                    elementImage.__MICRO_APP_NAME__ = currentAppName;
                 return elementImage;
             },
         });
@@ -2147,19 +2539,16 @@ function initGlobalEnv() {
         const rawClearTimeout = rawWindow.clearTimeout;
         const rawPushState = rawWindow.history.pushState;
         const rawReplaceState = rawWindow.history.replaceState;
-        const rawWindowAddEventListener = rawWindow.addEventListener;
-        const rawWindowRemoveEventListener = rawWindow.removeEventListener;
-        const rawDocumentAddEventListener = rawDocument.addEventListener;
-        const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
-        // TODO: 统一使用 EventTarget 去掉上面四个
-        const rawAddEventListener = EventTarget.prototype.addEventListener;
-        const rawRemoveEventListener = EventTarget.prototype.removeEventListener;
+        const rawAddEventListener = rawRootEventTarget.prototype.addEventListener;
+        const rawRemoveEventListener = rawRootEventTarget.prototype.removeEventListener;
         assign(globalEnv, {
+            supportModuleScript: isSupportModuleScript(),
             // common global vars
             rawWindow,
             rawDocument,
             rawRootDocument,
-            supportModuleScript,
+            rawRootElement,
+            rawRootNode,
             // source/patch
             rawSetAttribute,
             rawAppendChild,
@@ -2171,6 +2560,7 @@ function initGlobalEnv() {
             rawCloneNode,
             rawElementQuerySelector,
             rawElementQuerySelectorAll,
+            rawInsertAdjacentElement,
             rawInnerHTMLDesc,
             rawParentNodeDesc,
             rawCreateElement,
@@ -2185,594 +2575,243 @@ function initGlobalEnv() {
             rawGetElementsByName,
             ImageProxy,
             // sandbox/effect
-            rawWindowAddEventListener,
-            rawWindowRemoveEventListener,
             rawSetInterval,
             rawSetTimeout,
             rawClearInterval,
             rawClearTimeout,
-            rawDocumentAddEventListener,
-            rawDocumentRemoveEventListener,
             rawPushState,
             rawReplaceState,
             rawAddEventListener,
             rawRemoveEventListener,
-        });
-        // global effect
-        rejectMicroAppStyle();
-    }
-}
-
-const scriptTypes = ['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module', 'systemjs-module', 'systemjs-importmap'];
-// whether use type='module' script
-function isTypeModule(app, scriptInfo) {
-    return scriptInfo.appSpace[app.name].module && (!app.useSandbox || app.iframe);
-}
-// special script element
-function isSpecialScript(app, scriptInfo) {
-    const attrs = scriptInfo.appSpace[app.name].attrs;
-    return attrs.has('id');
-}
-/**
- * whether to run js in inline mode
- * scene:
- * 1. inline config for app
- * 2. inline attr in script element
- * 3. module script
- * 4. script with special attr
- */
-function isInlineMode(app, scriptInfo) {
-    return (app.inline ||
-        scriptInfo.appSpace[app.name].inline ||
-        isTypeModule(app, scriptInfo) ||
-        isSpecialScript(app, scriptInfo) ||
-        app.iframe);
-}
-// TODO: iframe重新插入window前后不一致，通过iframe Function创建的函数无法复用
-function getEffectWindow(app) {
-    return app.iframe ? app.sandBox.microAppWindow : globalEnv.rawWindow;
-}
-// Convert string code to function
-function code2Function(app, code) {
-    const targetWindow = getEffectWindow(app);
-    return new targetWindow.Function(code);
-}
-/**
- * If the appSpace of the current js address has other app, try to reuse parsedFunction of other app
- * @param appName app.name
- * @param scriptInfo scriptInfo of current address
- * @param currentCode pure code of current address
- */
-function getExistParseResult(app, scriptInfo, currentCode) {
-    const appSpace = scriptInfo.appSpace;
-    for (const item in appSpace) {
-        if (item !== app.name) {
-            const appSpaceData = appSpace[item];
-            if (appSpaceData.parsedCode === currentCode && appSpaceData.parsedFunction) {
-                return appSpaceData.parsedFunction;
-            }
-        }
-    }
-}
-/**
- * get parsedFunction from exist data or parsedCode
- * @returns parsedFunction
- */
-function getParsedFunction(app, scriptInfo, parsedCode) {
-    return getExistParseResult(app, scriptInfo, parsedCode) || code2Function(app, parsedCode);
-}
-// Prevent randomly created strings from repeating
-function getUniqueNonceSrc() {
-    const nonceStr = createNonceSrc();
-    if (sourceCenter.script.hasInfo(nonceStr)) {
-        return getUniqueNonceSrc();
-    }
-    return nonceStr;
-}
-// transfer the attributes on the script to convertScript
-function setConvertScriptAttr(convertScript, attrs) {
-    attrs.forEach((value, key) => {
-        if ((key === 'type' && value === 'module') || key === 'defer' || key === 'async')
-            return;
-        if (key === 'src')
-            key = 'data-origin-src';
-        convertScript.setAttribute(key, value);
-    });
-}
-// wrap code in sandbox
-function isWrapInSandBox(app, scriptInfo) {
-    return app.useSandbox && !isTypeModule(app, scriptInfo);
-}
-function getSandboxType(app, scriptInfo) {
-    return isWrapInSandBox(app, scriptInfo) ? app.iframe ? 'iframe' : 'with' : 'disable';
-}
-/**
- * Extract script elements
- * @param script script element
- * @param parent parent element of script
- * @param app app
- * @param isDynamic dynamic insert
- */
-function extractScriptElement(script, parent, app, isDynamic = false) {
-    var _a;
-    let replaceComment = null;
-    let src = script.getAttribute('src');
-    if (src)
-        src = CompletionPath(src, app.url);
-    if (script.hasAttribute('exclude') || checkExcludeUrl(src, app.name)) {
-        replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
-    }
-    else if ((script.type &&
-        !scriptTypes.includes(script.type)) ||
-        script.hasAttribute('ignore') ||
-        checkIgnoreUrl(src, app.name)) {
-        // 配置为忽略的脚本，清空 rawDocument.currentScript，避免被忽略的脚本内获取 currentScript 出错
-        if ((_a = globalEnv.rawDocument) === null || _a === void 0 ? void 0 : _a.currentScript) {
-            delete globalEnv.rawDocument.currentScript;
-        }
-        return null;
-    }
-    else if ((globalEnv.supportModuleScript && script.noModule) ||
-        (!globalEnv.supportModuleScript && script.type === 'module')) {
-        replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
-    }
-    else if (src) { // remote script
-        let scriptInfo = sourceCenter.script.getInfo(src);
-        const appSpaceData = {
-            async: script.hasAttribute('async'),
-            defer: script.defer || script.type === 'module',
-            module: script.type === 'module',
-            inline: script.hasAttribute('inline'),
-            pure: script.hasAttribute('pure'),
-            attrs: getAttributes(script),
-        };
-        if (!scriptInfo) {
-            scriptInfo = {
-                code: '',
-                isExternal: true,
-                appSpace: {
-                    [app.name]: appSpaceData,
-                }
-            };
-        }
-        else {
-            /**
-             * Reuse when appSpace exists
-             * NOTE:
-             * 1. The same static script, appSpace must be the same (in fact, it may be different when url change)
-             * 2. The same dynamic script, appSpace may be the same, but we still reuse appSpace, which should pay attention
-             */
-            scriptInfo.appSpace[app.name] = scriptInfo.appSpace[app.name] || appSpaceData;
-        }
-        sourceCenter.script.setInfo(src, scriptInfo);
-        if (!isDynamic) {
-            app.source.scripts.add(src);
-            replaceComment = document.createComment(`script with src='${src}' extract by micro-app`);
-        }
-        else {
-            return { address: src, scriptInfo };
-        }
-    }
-    else if (script.textContent) { // inline script
-        /**
-         * NOTE:
-         * 1. Each inline script is unique
-         * 2. Every dynamic created inline script will be re-executed
-         * ACTION:
-         * 1. Delete dynamic inline script info after exec
-         * 2. Delete static inline script info when destroy
-         */
-        const nonceStr = getUniqueNonceSrc();
-        const scriptInfo = {
-            code: script.textContent,
-            isExternal: false,
-            appSpace: {
-                [app.name]: {
-                    async: false,
-                    defer: script.type === 'module',
-                    module: script.type === 'module',
-                    inline: script.hasAttribute('inline'),
-                    pure: script.hasAttribute('pure'),
-                    attrs: getAttributes(script),
-                }
-            }
-        };
-        if (!isDynamic) {
-            app.source.scripts.add(nonceStr);
-            sourceCenter.script.setInfo(nonceStr, scriptInfo);
-            replaceComment = document.createComment('inline script extract by micro-app');
-        }
-        else {
-            // Because each dynamic script is unique, it is not put into sourceCenter
-            return { address: nonceStr, scriptInfo };
-        }
-    }
-    else if (!isDynamic) {
-        /**
-         * script with empty src or empty script.textContent remove in static html
-         * & not removed if it created by dynamic
-         */
-        replaceComment = document.createComment('script element removed by micro-app');
-    }
-    if (isDynamic) {
-        return { replaceComment };
-    }
-    else {
-        return parent.replaceChild(replaceComment, script);
-    }
-}
-/**
- * get assets plugins
- * @param appName app name
- */
-function getAssetsPlugins(appName) {
-    var _a, _b, _c;
-    const globalPlugins = ((_a = microApp.options.plugins) === null || _a === void 0 ? void 0 : _a.global) || [];
-    const modulePlugins = ((_c = (_b = microApp.options.plugins) === null || _b === void 0 ? void 0 : _b.modules) === null || _c === void 0 ? void 0 : _c[appName]) || [];
-    return [...globalPlugins, ...modulePlugins];
-}
-/**
- * whether the address needs to be excluded
- * @param address css or js link
- * @param plugins microApp plugins
- */
-function checkExcludeUrl(address, appName) {
-    if (!address)
-        return false;
-    const plugins = getAssetsPlugins(appName) || [];
-    return plugins.some(plugin => {
-        if (!plugin.excludeChecker)
-            return false;
-        return plugin.excludeChecker(address);
-    });
-}
-/**
- * whether the address needs to be ignore
- * @param address css or js link
- * @param plugins microApp plugins
- */
-function checkIgnoreUrl(address, appName) {
-    if (!address)
-        return false;
-    const plugins = getAssetsPlugins(appName) || [];
-    return plugins.some(plugin => {
-        if (!plugin.ignoreChecker)
-            return false;
-        return plugin.ignoreChecker(address);
-    });
-}
-/**
- *  Get remote resources of script
- * @param wrapElement htmlDom
- * @param app app
- */
-function fetchScriptsFromHtml(wrapElement, app) {
-    const scriptList = Array.from(app.source.scripts);
-    const fetchScriptPromise = [];
-    const fetchScriptPromiseInfo = [];
-    for (const address of scriptList) {
-        const scriptInfo = sourceCenter.script.getInfo(address);
-        const appSpaceData = scriptInfo.appSpace[app.name];
-        if ((!appSpaceData.defer && !appSpaceData.async) || (app.isPrefetch && !app.isPrerender)) {
-            fetchScriptPromise.push(scriptInfo.code ? scriptInfo.code : fetchSource(address, app.name));
-            fetchScriptPromiseInfo.push([address, scriptInfo]);
-        }
-    }
-    const fiberScriptTasks = app.isPrefetch || app.fiber ? [] : null;
-    if (fetchScriptPromise.length) {
-        promiseStream(fetchScriptPromise, (res) => {
-            injectFiberTask(fiberScriptTasks, () => fetchScriptSuccess(fetchScriptPromiseInfo[res.index][0], fetchScriptPromiseInfo[res.index][1], res.data, app));
-        }, (err) => {
-            logError(err, app.name);
-        }, () => {
-            if (fiberScriptTasks) {
-                fiberScriptTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
-                serialExecFiberTasks(fiberScriptTasks);
-            }
-            else {
-                app.onLoad(wrapElement);
-            }
-        });
-    }
-    else {
-        app.onLoad(wrapElement);
+        });
+        // global effect
+        rejectMicroAppStyle();
     }
 }
+
 /**
- * fetch js succeeded, record the code value
- * @param address script address
- * @param scriptInfo resource script info
- * @param data code
+ *
+ * @param appName app.name
+ * @param linkInfo linkInfo of current address
  */
-function fetchScriptSuccess(address, scriptInfo, code, app) {
-    // reset scriptInfo.code
-    scriptInfo.code = code;
-    /**
-     * Pre parse script for prefetch, improve rendering performance
-     * NOTE:
-     * 1. if global parseResult exist, skip this step
-     * 2. if app is inline or script is esmodule, skip this step
-     * 3. if global parseResult not exist, the current script occupies the position, when js is reused, parseResult is reference
-     */
-    if (app.isPrefetch && app.prefetchLevel === 2) {
-        const appSpaceData = scriptInfo.appSpace[app.name];
-        /**
-         * When prefetch app is replaced by a new app in the processing phase, since the scriptInfo is common, when the scriptInfo of the prefetch app is processed, it may have already been processed.
-         * This causes parsedCode to already exist when preloading ends
-         * e.g.
-         * 1. prefetch app.url different from <micro-app></micro-app>
-         * 2. prefetch param different from <micro-app></micro-app>
-         */
-        if (!appSpaceData.parsedCode) {
-            appSpaceData.parsedCode = bindScope(address, app, code, scriptInfo);
-            appSpaceData.sandboxType = getSandboxType(app, scriptInfo);
-            if (!isInlineMode(app, scriptInfo)) {
-                try {
-                    appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
-                }
-                catch (err) {
-                    logError('Something went wrong while handling preloaded resources', app.name, '\n', err);
-                }
+function getExistParseCode(appName, prefix, linkInfo) {
+    const appSpace = linkInfo.appSpace;
+    for (const item in appSpace) {
+        if (item !== appName) {
+            const appSpaceData = appSpace[item];
+            if (appSpaceData.parsedCode) {
+                return appSpaceData.parsedCode.replace(new RegExp(createPrefix(item, true), 'g'), prefix);
             }
         }
     }
 }
+// transfer the attributes on the link to convertStyle
+function setConvertStyleAttr(convertStyle, attrs) {
+    attrs.forEach((value, key) => {
+        if (key === 'rel')
+            return;
+        if (key === 'href')
+            key = 'data-origin-href';
+        globalEnv.rawSetAttribute.call(convertStyle, key, value);
+    });
+}
 /**
- * Execute js in the mount lifecycle
+ * Extract link elements
+ * @param link link element
+ * @param parent parent element of link
  * @param app app
- * @param initHook callback for umd mode
+ * @param microAppHead micro-app-head element
+ * @param isDynamic dynamic insert
  */
-function execScripts(app, initHook) {
-    const fiberScriptTasks = app.fiber ? [] : null;
-    const scriptList = Array.from(app.source.scripts);
-    const deferScriptPromise = [];
-    const deferScriptInfo = [];
-    for (const address of scriptList) {
-        const scriptInfo = sourceCenter.script.getInfo(address);
-        const appSpaceData = scriptInfo.appSpace[app.name];
-        // Notice the second render
-        if (appSpaceData.defer || appSpaceData.async) {
-            // TODO: defer和module彻底分开，不要混在一起
-            if (scriptInfo.isExternal && !scriptInfo.code && !(app.iframe && appSpaceData.module)) {
-                deferScriptPromise.push(fetchSource(address, app.name));
-            }
-            else {
-                deferScriptPromise.push(scriptInfo.code);
-            }
-            deferScriptInfo.push([address, scriptInfo]);
-            isTypeModule(app, scriptInfo) && (initHook.moduleCount = initHook.moduleCount ? ++initHook.moduleCount : 1);
+function extractLinkFromHtml(link, parent, app, isDynamic = false) {
+    const rel = link.getAttribute('rel');
+    let href = link.getAttribute('href');
+    let replaceComment = null;
+    if (rel === 'stylesheet' && href) {
+        href = CompletionPath(href, app.url);
+        let linkInfo = sourceCenter.link.getInfo(href);
+        const appSpaceData = {
+            attrs: getAttributes(link),
+        };
+        if (!linkInfo) {
+            linkInfo = {
+                code: '',
+                appSpace: {
+                    [app.name]: appSpaceData,
+                }
+            };
         }
         else {
-            injectFiberTask(fiberScriptTasks, () => {
-                runScript(address, app, scriptInfo);
-                initHook(false);
-            });
+            linkInfo.appSpace[app.name] = linkInfo.appSpace[app.name] || appSpaceData;
+        }
+        sourceCenter.link.setInfo(href, linkInfo);
+        if (!isDynamic) {
+            app.source.links.add(href);
+            replaceComment = document.createComment(`link element with href=${href} move to micro-app-head as style element`);
+            linkInfo.appSpace[app.name].placeholder = replaceComment;
+        }
+        else {
+            return { address: href, linkInfo };
         }
     }
-    if (deferScriptPromise.length) {
-        promiseStream(deferScriptPromise, (res) => {
-            const scriptInfo = deferScriptInfo[res.index][1];
-            scriptInfo.code = scriptInfo.code || res.data;
-        }, (err) => {
-            initHook.errorCount = initHook.errorCount ? ++initHook.errorCount : 1;
-            logError(err, app.name);
-        }, () => {
-            deferScriptInfo.forEach(([address, scriptInfo]) => {
-                if (isString(scriptInfo.code)) {
-                    injectFiberTask(fiberScriptTasks, () => {
-                        runScript(address, app, scriptInfo, initHook);
-                        !isTypeModule(app, scriptInfo) && initHook(false);
-                    });
-                }
-            });
-            /**
-             * Fiber wraps js in requestIdleCallback and executes it in sequence
-             * NOTE:
-             * 1. In order to ensure the execution order, wait for all js loaded and then execute
-             * 2. If js create a dynamic script, it may be errors in the execution order, because the subsequent js is wrapped in requestIdleCallback, even putting dynamic script in requestIdleCallback doesn't solve it
-             *
-             * BUG: NOTE.2 - execution order problem
-             */
-            if (fiberScriptTasks) {
-                fiberScriptTasks.push(() => Promise.resolve(initHook(isUndefined(initHook.moduleCount) ||
-                    initHook.errorCount === deferScriptPromise.length)));
-                serialExecFiberTasks(fiberScriptTasks);
-            }
-            else {
-                initHook(isUndefined(initHook.moduleCount) ||
-                    initHook.errorCount === deferScriptPromise.length);
-            }
-        });
-    }
-    else {
-        if (fiberScriptTasks) {
-            fiberScriptTasks.push(() => Promise.resolve(initHook(true)));
-            serialExecFiberTasks(fiberScriptTasks);
+    else if (rel && ['prefetch', 'preload', 'prerender', 'icon', 'apple-touch-icon'].includes(rel)) {
+        // preload prefetch icon ....
+        if (isDynamic) {
+            replaceComment = document.createComment(`link element with rel=${rel}${href ? ' & href=' + href : ''} removed by micro-app`);
         }
         else {
-            initHook(true);
+            parent === null || parent === void 0 ? void 0 : parent.removeChild(link);
         }
     }
+    else if (href) {
+        // dns-prefetch preconnect modulepreload search ....
+        globalEnv.rawSetAttribute.call(link, 'href', CompletionPath(href, app.url));
+    }
+    if (isDynamic) {
+        return { replaceComment };
+    }
+    else if (replaceComment) {
+        return parent === null || parent === void 0 ? void 0 : parent.replaceChild(replaceComment, link);
+    }
 }
 /**
- * run code
- * @param address script address
+ * Get link remote resources
+ * @param wrapElement htmlDom
  * @param app app
- * @param scriptInfo script info
- * @param callback callback of module script
+ * @param microAppHead micro-app-head
  */
-function runScript(address, app, scriptInfo, callback, replaceElement) {
-    try {
-        actionsBeforeRunScript(app);
-        const appSpaceData = scriptInfo.appSpace[app.name];
-        const sandboxType = getSandboxType(app, scriptInfo);
+function fetchLinksFromHtml(wrapElement, app, microAppHead, fiberStyleResult) {
+    const styleList = Array.from(app.source.links);
+    const fetchLinkPromise = styleList.map((address) => {
+        const linkInfo = sourceCenter.link.getInfo(address);
+        return linkInfo.code ? linkInfo.code : fetchSource(address, app.name);
+    });
+    const fiberLinkTasks = fiberStyleResult ? [] : null;
+    promiseStream(fetchLinkPromise, (res) => {
+        injectFiberTask(fiberLinkTasks, () => fetchLinkSuccess(styleList[res.index], res.data, microAppHead, app));
+    }, (err) => {
+        logError(err, app.name);
+    }, () => {
         /**
-         * NOTE:
-         * 1. plugins and wrapCode will only be executed once
-         * 2. if parsedCode not exist, parsedFunction is not exist
-         * 3. if parsedCode exist, parsedFunction does not necessarily exist
+         * 1. If fiberStyleResult exist, fiberLinkTasks must exist
+         * 2. Download link source while processing style
+         * 3. Process style first, and then process link
          */
-        if (!appSpaceData.parsedCode || appSpaceData.sandboxType !== sandboxType) {
-            appSpaceData.parsedCode = bindScope(address, app, scriptInfo.code, scriptInfo);
-            appSpaceData.sandboxType = sandboxType;
-            appSpaceData.parsedFunction = null;
-        }
-        if (isInlineMode(app, scriptInfo)) {
-            const scriptElement = replaceElement || pureCreateElement('script');
-            runCode2InlineScript(address, appSpaceData.parsedCode, isTypeModule(app, scriptInfo), scriptElement, appSpaceData.attrs, callback);
-            if (!replaceElement) {
-                // TEST IGNORE
-                const parent = app.iframe ? app.sandBox.microBody : app.querySelector('micro-app-body');
-                parent === null || parent === void 0 ? void 0 : parent.appendChild(scriptElement);
-            }
+        if (fiberStyleResult) {
+            fiberStyleResult.then(() => {
+                fiberLinkTasks.push(() => Promise.resolve(app.onLoad(wrapElement)));
+                serialExecFiberTasks(fiberLinkTasks);
+            });
         }
         else {
-            runParsedFunction(app, scriptInfo);
+            app.onLoad(wrapElement);
         }
-    }
-    catch (e) {
-        console.error(`[micro-app from ${replaceElement ? 'runDynamicScript' : 'runScript'}] app ${app.name}: `, e, address);
-    }
+    });
 }
 /**
- * Get dynamically created remote script
- * @param address script address
+ * Fetch link succeeded, replace placeholder with style tag
+ * NOTE:
+ * 1. Only exec when init, no longer exec when remount
+ * 2. Only handler html link element, not dynamic link or style
+ * 3. The same prefix can reuse parsedCode
+ * 4. Async exec with requestIdleCallback in prefetch or fiber
+ * 5. appSpace[app.name].placeholder/attrs must exist
+ * @param address resource address
+ * @param code link source code
+ * @param microAppHead micro-app-head
  * @param app app instance
- * @param scriptInfo scriptInfo
- * @param originScript origin script element
  */
-function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
-    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
-    const dispatchScriptOnLoadEvent = () => dispatchOnLoadEvent(originScript);
-    const runDynamicScript = () => {
-        const descriptor = Object.getOwnPropertyDescriptor(globalEnv.rawDocument, 'currentScript');
-        if (!descriptor || descriptor.configurable) {
-            Object.defineProperty(globalEnv.rawDocument, 'currentScript', {
-                value: originScript,
-                configurable: true,
-            });
+function fetchLinkSuccess(address, code, microAppHead, app) {
+    /**
+     * linkInfo must exist, but linkInfo.code not
+     * so we set code to linkInfo.code
+     */
+    const linkInfo = sourceCenter.link.getInfo(address);
+    linkInfo.code = code;
+    const appSpaceData = linkInfo.appSpace[app.name];
+    const placeholder = appSpaceData.placeholder;
+    /**
+     * When prefetch app is replaced by a new app in the processing phase, since the linkInfo is common, when the linkInfo of the prefetch app is processed, it may have already been processed.
+     * This causes placeholder to be possibly null
+     * e.g.
+     * 1. prefetch app.url different from <micro-app></micro-app>
+     * 2. prefetch param different from <micro-app></micro-app>
+     */
+    if (placeholder) {
+        const convertStyle = pureCreateElement('style');
+        handleConvertStyle(app, address, convertStyle, linkInfo, appSpaceData.attrs);
+        if (placeholder.parentNode) {
+            placeholder.parentNode.replaceChild(convertStyle, placeholder);
         }
-        runScript(address, app, scriptInfo, dispatchScriptOnLoadEvent, replaceElement);
-        !isTypeModule(app, scriptInfo) && dispatchScriptOnLoadEvent();
-    };
-    if (scriptInfo.code || (app.iframe && scriptInfo.appSpace[app.name].module)) {
-        defer(runDynamicScript);
-    }
-    else {
-        fetchSource(address, app.name).then((code) => {
-            scriptInfo.code = code;
-            runDynamicScript();
-        }).catch((err) => {
-            logError(err, app.name);
-            dispatchOnErrorEvent(originScript);
-        });
+        else {
+            microAppHead.appendChild(convertStyle);
+        }
+        // clear placeholder
+        appSpaceData.placeholder = null;
     }
-    return replaceElement;
 }
 /**
- * Get dynamically created inline script
- * @param address script address
+ * Get parsedCode, update convertStyle
+ * Actions:
+ * 1. get scope css (through scopedCSS or oldData)
+ * 2. record parsedCode
+ * 3. set parsedCode to convertStyle if need
  * @param app app instance
- * @param scriptInfo scriptInfo
- */
-function runDynamicInlineScript(address, app, scriptInfo) {
-    const replaceElement = isInlineMode(app, scriptInfo) ? pureCreateElement('script') : document.createComment('dynamic script extract by micro-app');
-    runScript(address, app, scriptInfo, void 0, replaceElement);
-    return replaceElement;
-}
-/**
- * common handle for inline script
- * @param address script address
- * @param code bound code
- * @param module type='module' of script
- * @param scriptElement target script element
- * @param attrs attributes of script element
- * @param callback callback of module script
+ * @param address resource address
+ * @param convertStyle converted style
+ * @param linkInfo linkInfo in sourceCenter
+ * @param attrs attrs of link
  */
-function runCode2InlineScript(address, code, module, scriptElement, attrs, callback) {
-    if (module) {
-        // module script is async, transform it to a blob for subsequent operations
-        if (isInlineScript(address)) {
-            const blob = new Blob([code], { type: 'text/javascript' });
-            scriptElement.src = URL.createObjectURL(blob);
+function handleConvertStyle(app, address, convertStyle, linkInfo, attrs) {
+    if (app.scopecss) {
+        const appSpaceData = linkInfo.appSpace[app.name];
+        appSpaceData.prefix = appSpaceData.prefix || createPrefix(app.name);
+        if (!appSpaceData.parsedCode) {
+            const existParsedCode = getExistParseCode(app.name, appSpaceData.prefix, linkInfo);
+            if (!existParsedCode) {
+                convertStyle.textContent = linkInfo.code;
+                scopedCSS(convertStyle, app, address);
+            }
+            else {
+                convertStyle.textContent = existParsedCode;
+            }
+            appSpaceData.parsedCode = convertStyle.textContent;
         }
         else {
-            scriptElement.src = address;
-        }
-        scriptElement.setAttribute('type', 'module');
-        if (callback) {
-            callback.moduleCount && callback.moduleCount--;
-            /**
-             * module script will execute onload method only after it insert to document/iframe
-             */
-            scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
+            convertStyle.textContent = appSpaceData.parsedCode;
         }
     }
     else {
-        scriptElement.textContent = code;
-    }
-    setConvertScriptAttr(scriptElement, attrs);
-}
-// init & run code2Function
-function runParsedFunction(app, scriptInfo) {
-    const appSpaceData = scriptInfo.appSpace[app.name];
-    if (!appSpaceData.parsedFunction) {
-        appSpaceData.parsedFunction = getParsedFunction(app, scriptInfo, appSpaceData.parsedCode);
+        convertStyle.textContent = linkInfo.code;
     }
-    appSpaceData.parsedFunction.call(getEffectWindow(app));
+    setConvertStyleAttr(convertStyle, attrs);
 }
 /**
- * bind js scope
+ * Handle css of dynamic link
+ * @param address link address
  * @param app app
- * @param code code
- * @param scriptInfo source script info
- */
-function bindScope(address, app, code, scriptInfo) {
-    // TODO: 1、cache 2、esm code is null
-    if (isPlainObject(microApp.options.plugins)) {
-        code = usePlugins(address, code, app.name, microApp.options.plugins);
-    }
-    if (isWrapInSandBox(app, scriptInfo)) {
-        return app.iframe ? `(function(window,self,global,location){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyWindow,window.__MICRO_APP_SANDBOX__.proxyLocation);` : `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n${isInlineScript(address) ? '' : `//# sourceURL=${address}\n`}}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
-    }
-    return code;
-}
-/**
- * actions before run script
- */
-function actionsBeforeRunScript(app) {
-    setActiveProxyWindow(app);
-}
-/**
- * set active sandBox.proxyWindow to window.__MICRO_APP_PROXY_WINDOW__
+ * @param linkInfo linkInfo
+ * @param originLink origin link element
  */
-function setActiveProxyWindow(app) {
-    if (app.sandBox) {
-        globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
+function formatDynamicLink(address, app, linkInfo, originLink) {
+    const convertStyle = pureCreateElement('style');
+    const handleDynamicLink = () => {
+        handleConvertStyle(app, address, convertStyle, linkInfo, linkInfo.appSpace[app.name].attrs);
+        dispatchOnLoadEvent(originLink);
+    };
+    if (linkInfo.code) {
+        defer(handleDynamicLink);
     }
-}
-/**
- * Call the plugin to process the file
- * @param address script address
- * @param code code
- * @param appName app name
- * @param plugins plugin list
- */
-function usePlugins(address, code, appName, plugins) {
-    var _a;
-    const newCode = processCode(plugins.global, code, address);
-    return processCode((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName], newCode, address);
-}
-function processCode(configs, code, address) {
-    if (!isArray(configs)) {
-        return code;
+    else {
+        fetchSource(address, app.name).then((data) => {
+            linkInfo.code = data;
+            handleDynamicLink();
+        }).catch((err) => {
+            logError(err, app.name);
+            dispatchOnErrorEvent(originLink);
+        });
     }
-    return configs.reduce((preCode, config) => {
-        if (isPlainObject(config) && isFunction(config.loader)) {
-            return config.loader(preCode, address);
-        }
-        return preCode;
-    }, code);
+    return convertStyle;
 }
 
 /**
@@ -2804,7 +2843,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
                 extractLinkFromHtml(dom, parent, app);
             }
             else if (dom.hasAttribute('href')) {
-                dom.setAttribute('href', CompletionPath(dom.getAttribute('href'), app.url));
+                globalEnv.rawSetAttribute.call(dom, 'href', CompletionPath(dom.getAttribute('href'), app.url));
             }
         }
         else if (isStyleElement(dom)) {
@@ -2819,7 +2858,7 @@ function flatChildren(parent, app, microAppHead, fiberStyleTasks) {
             extractScriptElement(dom, parent, app);
         }
         else if (isImageElement(dom) && dom.hasAttribute('src')) {
-            dom.setAttribute('src', CompletionPath(dom.getAttribute('src'), app.url));
+            globalEnv.rawSetAttribute.call(dom, 'src', CompletionPath(dom.getAttribute('src'), app.url));
         }
         /**
          * Don't remove meta and title, they have some special scenes
@@ -2871,6 +2910,40 @@ function extractSourceDom(htmlStr, app) {
     }
 }
 
+/* eslint-disable no-return-assign */
+function isBoundedFunction(value) {
+    if (isBoolean(value.__MICRO_APP_IS_BOUND_FUNCTION__))
+        return value.__MICRO_APP_IS_BOUND_FUNCTION__;
+    return value.__MICRO_APP_IS_BOUND_FUNCTION__ = isBoundFunction(value);
+}
+function isConstructorFunction(value) {
+    if (isBoolean(value.__MICRO_APP_IS_CONSTRUCTOR__))
+        return value.__MICRO_APP_IS_CONSTRUCTOR__;
+    return value.__MICRO_APP_IS_CONSTRUCTOR__ = isConstructor(value);
+}
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
+    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value)) {
+        const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
+        if (value[cacheKey])
+            return value[cacheKey];
+        const bindRawObjectValue = value.bind(rawTarget);
+        for (const key in value) {
+            bindRawObjectValue[key] = value[key];
+        }
+        if (value.hasOwnProperty('prototype')) {
+            rawDefineProperty(bindRawObjectValue, 'prototype', {
+                value: value.prototype,
+                configurable: true,
+                enumerable: false,
+                writable: true,
+            });
+        }
+        return value[cacheKey] = bindRawObjectValue;
+    }
+    return value;
+}
+
 class EventCenter {
     constructor() {
         this.eventList = new Map();
@@ -3237,8 +3310,12 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
  * @param microAppEventCenter instance of EventCenterForMicroApp
  */
 function recordDataCenterSnapshot(microAppEventCenter) {
-    if (microAppEventCenter && !microAppEventCenter.umdDataListeners) {
-        microAppEventCenter.umdDataListeners = { global: new Set(), normal: new Set() };
+    var _a, _b;
+    if (microAppEventCenter) {
+        microAppEventCenter.umdDataListeners = {
+            global: new Set((_a = microAppEventCenter.umdDataListeners) === null || _a === void 0 ? void 0 : _a.global),
+            normal: new Set((_b = microAppEventCenter.umdDataListeners) === null || _b === void 0 ? void 0 : _b.normal),
+        };
         const globalEventInfo = eventCenter.eventList.get('global');
         if (globalEventInfo) {
             for (const cb of globalEventInfo.callbacks) {
@@ -3249,7 +3326,9 @@ function recordDataCenterSnapshot(microAppEventCenter) {
         }
         const subAppEventInfo = eventCenter.eventList.get(createEventName(microAppEventCenter.appName, true));
         if (subAppEventInfo) {
-            microAppEventCenter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+            for (const cb of subAppEventInfo.callbacks) {
+                microAppEventCenter.umdDataListeners.normal.add(cb);
+            }
         }
     }
 }
@@ -3274,7 +3353,7 @@ function rebuildDataCenterSnapshot(microAppEventCenter) {
  * @param microAppEventCenter instance of EventCenterForMicroApp
  */
 function resetDataCenterSnapshot(microAppEventCenter) {
-    delete microAppEventCenter.umdDataListeners;
+    microAppEventCenter === null || microAppEventCenter === void 0 ? true : delete microAppEventCenter.umdDataListeners;
 }
 
 // 管理 app 的单例
@@ -3303,171 +3382,224 @@ class AppManager {
     }
 }
 
-function unmountNestedApp() {
-    releaseUnmountOfNestedApp();
-    AppManager.getInstance().getAll().forEach(app => {
-        // @ts-ignore
-        app.container && getRootContainer(app.container).disconnectedCallback();
-    });
-    !window.__MICRO_APP_UMD_MODE__ && AppManager.getInstance().clear();
-}
-// release listener
-function releaseUnmountOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.removeEventListener('unmount', unmountNestedApp, false);
-    }
-}
-// if micro-app run in micro application, delete all next generation application when unmount event received
-// unmount event will auto release by sandbox
-function initEnvOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        releaseUnmountOfNestedApp();
-        window.addEventListener('unmount', unmountNestedApp, false);
-    }
-}
-
-/* eslint-disable no-return-assign */
-function isBoundedFunction(value) {
-    if (isBoolean(value.__MICRO_APP_IS_BOUND_FUNCTION__))
-        return value.__MICRO_APP_IS_BOUND_FUNCTION__;
-    return value.__MICRO_APP_IS_BOUND_FUNCTION__ = isBoundFunction(value);
-}
-function isConstructorFunction(value) {
-    if (isBoolean(value.__MICRO_APP_IS_CONSTRUCTOR__))
-        return value.__MICRO_APP_IS_CONSTRUCTOR__;
-    return value.__MICRO_APP_IS_CONSTRUCTOR__ = isConstructor(value);
-}
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawTarget(value, rawTarget, key = 'WINDOW') {
-    if (isFunction(value) && !isConstructorFunction(value) && !isBoundedFunction(value)) {
-        const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
-        if (value[cacheKey])
-            return value[cacheKey];
-        const bindRawObjectValue = value.bind(rawTarget);
-        for (const key in value) {
-            bindRawObjectValue[key] = value[key];
-        }
-        if (value.hasOwnProperty('prototype')) {
-            rawDefineProperty(bindRawObjectValue, 'prototype', {
-                value: value.prototype,
-                configurable: true,
-                enumerable: false,
-                writable: true,
-            });
-        }
-        return value[cacheKey] = bindRawObjectValue;
-    }
-    return value;
-}
-
-// document.onclick binding list, the binding function of each application is unique
-const documentClickListMap = new Map();
-let hasRewriteDocumentOnClick = false;
-/**
- * Rewrite document.onclick and execute it only once
- */
-function overwriteDocumentOnClick() {
-    hasRewriteDocumentOnClick = true;
-    if (Object.getOwnPropertyDescriptor(document, 'onclick')) {
-        return logWarn('Cannot redefine document property onclick');
-    }
-    const rawOnClick = document.onclick;
-    document.onclick = null;
-    let hasDocumentClickInited = false;
-    function onClickHandler(e) {
-        documentClickListMap.forEach((f) => {
-            isFunction(f) && f.call(document, e);
-        });
+function unmountNestedApp() {
+    releaseUnmountOfNestedApp();
+    AppManager.getInstance().getAll().forEach(app => {
+        // @ts-ignore
+        app.container && getRootContainer(app.container).disconnectedCallback();
+    });
+    !window.__MICRO_APP_UMD_MODE__ && AppManager.getInstance().clear();
+}
+// release listener
+function releaseUnmountOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        window.removeEventListener('unmount', unmountNestedApp, false);
     }
-    rawDefineProperty(document, 'onclick', {
-        configurable: true,
-        enumerable: true,
-        get() {
-            const appName = getCurrentAppName();
-            return appName ? documentClickListMap.get(appName) : documentClickListMap.get('base');
-        },
-        set(f) {
-            const appName = getCurrentAppName();
-            if (appName) {
-                documentClickListMap.set(appName, f);
-            }
-            else {
-                documentClickListMap.set('base', f);
-            }
-            if (!hasDocumentClickInited && isFunction(f)) {
-                hasDocumentClickInited = true;
-                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
+}
+// if micro-app run in micro application, delete all next generation application when unmount event received
+// unmount event will auto release by sandbox
+function initEnvOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        releaseUnmountOfNestedApp();
+        window.addEventListener('unmount', unmountNestedApp, false);
+    }
+}
+
+function createMicroDocument(appName, proxyDocument) {
+    const { rawDocument, rawRootDocument } = globalEnv;
+    class MicroDocument {
+        static [Symbol.hasInstance](target) {
+            let proto = target;
+            while (proto = Object.getPrototypeOf(proto)) {
+                if (proto === MicroDocument.prototype) {
+                    return true;
+                }
             }
+            return (target === proxyDocument ||
+                target instanceof rawRootDocument);
         }
-    });
-    rawOnClick && (document.onclick = rawOnClick);
+    }
+    /**
+     * TIP:
+     * 1. child class __proto__, which represents the inherit of the constructor, always points to the parent class
+     * 2. child class prototype.__proto__, which represents the inherit of methods, always points to parent class prototype
+     * e.g.
+     * class B extends A {}
+     * B.__proto__ === A // true
+     * B.prototype.__proto__ === A.prototype // true
+     */
+    Object.setPrototypeOf(MicroDocument, rawRootDocument);
+    // Object.create(rawRootDocument.prototype) will cause MicroDocument and proxyDocument methods not same when exec Document.prototype.xxx = xxx in child app
+    Object.setPrototypeOf(MicroDocument.prototype, new Proxy(rawRootDocument.prototype, {
+        get(target, key) {
+            throttleDeferForSetAppName(appName);
+            return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
+        },
+        set(target, key, value) {
+            Reflect.set(target, key, value);
+            return true;
+        }
+    }));
+    return MicroDocument;
 }
 /**
- * The document event is globally, we need to clear these event bindings when micro application unmounted
+ * Create new document and Document
  */
-const documentEventListenerMap = new Map();
-function effectDocumentEvent() {
-    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
-    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
-    document.addEventListener = function (type, listener, options) {
-        const appName = getCurrentAppName();
+function createProxyDocument(appName, sandbox) {
+    const eventListenerMap = new Map();
+    const sstEventListenerMap = new Map();
+    let onClickHandler = null;
+    let sstOnClickHandler = null;
+    const { rawDocument, rawCreateElement, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+    function createElement(tagName, options) {
+        const element = rawCreateElement.call(rawDocument, tagName, options);
+        element.__MICRO_APP_NAME__ = appName;
+        return element;
+    }
+    /**
+     * TODO:
+     *  1. listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
+     *  2. 相似代码提取为公共方法(with, iframe)
+     */
+    function addEventListener(type, listener, options) {
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
+        }
+        else {
+            eventListenerMap.set(type, new Set([listener]));
+        }
+        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        rawAddEventListener.call(rawDocument, type, listener, options);
+    }
+    function removeEventListener(type, listener, options) {
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
+        }
+        rawRemoveEventListener.call(rawDocument, type, listener, options);
+    }
+    // reset snapshot data
+    const reset = () => {
+        sstEventListenerMap.clear();
+        sstOnClickHandler = null;
+    };
+    /**
+     * NOTE:
+     *  1. about timer(events & properties should record & rebuild at all modes, exclude default mode)
+     *  2. record maybe call twice when unmount prerender, keep-alive app manually with umd mode
+     * 4 modes: default-mode、umd-mode、prerender、keep-alive
+     * Solution:
+     *  1. default-mode(normal): clear events & timers, not record & rebuild anything
+     *  2. umd-mode(normal): not clear timers, record & rebuild events
+     *  3. prerender/keep-alive(default, umd): not clear timers, record & rebuild events
+     */
+    const record = () => {
         /**
-         * ignore bound function of document event in umd mode, used to solve problem of react global events
-         * update in 2022-09-02:
-         * boundFunction is no longer exclude, because events in UMD mode will not cleared from v1.0.0-alpha.4
-         * if (appName && !(appInstanceMap.get(appName)?.umdMode && isBoundFunction(listener))) {
+         * record onclick handler
+         * onClickHandler maybe set again after prerender/keep-alive app hidden
          */
-        if (appName) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if (appListenerList) {
-                    appListenerList.add(listener);
-                }
-                else {
-                    appListenersMap.set(type, new Set([listener]));
-                }
+        sstOnClickHandler = onClickHandler || sstOnClickHandler;
+        // record document event
+        eventListenerMap.forEach((listenerList, type) => {
+            if (listenerList.size) {
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
-            else {
-                documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
+        });
+    };
+    // rebuild event and timer before remount app
+    const rebuild = () => {
+        // rebuild onclick event
+        if (sstOnClickHandler && !onClickHandler)
+            proxyDocument.onclick = sstOnClickHandler;
+        // rebuild document event
+        sstEventListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                proxyDocument.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
-            listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        });
+        reset();
+    };
+    // release all event listener & interval & timeout when unmount app
+    const release = () => {
+        // Clear the function bound by micro app through document.onclick
+        if (isFunction(onClickHandler)) {
+            rawRemoveEventListener.call(rawDocument, 'click', onClickHandler);
+        }
+        onClickHandler = null;
+        // Clear document binding event
+        if (eventListenerMap.size) {
+            eventListenerMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawRemoveEventListener.call(rawDocument, type, listener);
+                }
+            });
+            eventListenerMap.clear();
         }
-        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
     };
-    document.removeEventListener = function (type, listener, options) {
-        const appName = getCurrentAppName();
-        /**
-         * update in 2022-09-02:
-         * boundFunction is no longer exclude, because events in UMD mode will not cleared from v1.0.0-alpha.4
-         * if (appName && !(appInstanceMap.get(appName)?.umdMode && isBoundFunction(listener))) {
-         */
-        if (appName) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
-                    appListenerList.delete(listener);
+    const proxyDocument = new Proxy(rawDocument, {
+        get: (target, key) => {
+            throttleDeferForSetAppName(appName);
+            throttleDeferForParentNode(proxyDocument);
+            if (key === 'createElement')
+                return createElement;
+            if (key === Symbol.toStringTag)
+                return 'ProxyDocument';
+            if (key === 'defaultView')
+                return sandbox.proxyWindow;
+            if (key === 'onclick')
+                return onClickHandler;
+            if (key === 'addEventListener')
+                return addEventListener;
+            if (key === 'removeEventListener')
+                return removeEventListener;
+            return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
+        },
+        set: (target, key, value) => {
+            if (key === 'onclick') {
+                if (isFunction(onClickHandler)) {
+                    rawRemoveEventListener.call(rawDocument, 'click', onClickHandler, false);
                 }
+                // TODO: listener 是否需要绑定proxyDocument，否则函数中的this指向原生window
+                if (isFunction(value)) {
+                    rawAddEventListener.call(rawDocument, 'click', value, false);
+                }
+                onClickHandler = value;
+            }
+            else {
+                /**
+                 * 1. Fix TypeError: Illegal invocation when set document.title
+                 * 2. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
+                 */
+                Reflect.set(target, key, value);
             }
+            return true;
+        }
+    });
+    return {
+        proxyDocument,
+        MicroDocument: createMicroDocument(appName, proxyDocument),
+        documentEffect: {
+            reset,
+            record,
+            rebuild,
+            release,
         }
-        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
     };
 }
-// Clear the document event agent
-function releaseEffectDocumentEvent() {
-    document.addEventListener = globalEnv.rawDocumentAddEventListener;
-    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
-}
+
 /**
  * Rewrite side-effect events
  * @param microAppWindow micro window
  */
-function effect(appName, microAppWindow) {
+function patchWindowEffect(appName, microAppWindow) {
     const eventListenerMap = new Map();
+    const sstEventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
-    const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
+    const { rawWindow, rawAddEventListener, rawRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, } = globalEnv;
+    // TODO: listener 是否需要绑定microAppWindow，否则函数中的this指向原生window
     // listener may be null, e.g test-passive
     microAppWindow.addEventListener = function (type, listener, options) {
         type = formatEventName(type, appName);
@@ -3479,7 +3611,7 @@ function effect(appName, microAppWindow) {
             eventListenerMap.set(type, new Set([listener]));
         }
         listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
-        rawWindowAddEventListener.call(rawWindow, type, listener, options);
+        rawAddEventListener.call(rawWindow, type, listener, options);
     };
     microAppWindow.removeEventListener = function (type, listener, options) {
         type = formatEventName(type, appName);
@@ -3487,7 +3619,7 @@ function effect(appName, microAppWindow) {
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
         }
-        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
+        rawRemoveEventListener.call(rawWindow, type, listener, options);
     };
     microAppWindow.setInterval = function (handler, timeout, ...args) {
         const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
@@ -3507,14 +3639,9 @@ function effect(appName, microAppWindow) {
         timeoutIdMap.delete(timeoutId);
         rawClearTimeout.call(rawWindow, timeoutId);
     };
-    const sstWindowListenerMap = new Map();
-    const sstDocumentListenerMap = new Map();
-    let sstOnClickHandler;
     // reset snapshot data
     const reset = () => {
-        sstWindowListenerMap.clear();
-        sstDocumentListenerMap.clear();
-        sstOnClickHandler = null;
+        sstEventListenerMap.clear();
     };
     /**
      * NOTE:
@@ -3530,57 +3657,34 @@ function effect(appName, microAppWindow) {
         // record window event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                sstWindowListenerMap.set(type, new Set(listenerList));
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
         });
-        // record onclick handler
-        sstOnClickHandler = sstOnClickHandler || documentClickListMap.get(appName);
-        // record document event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                if (listenerList.size) {
-                    sstDocumentListenerMap.set(type, new Set(listenerList));
-                }
-            });
-        }
     };
     // rebuild event and timer before remount app
     const rebuild = () => {
         // rebuild window event
-        sstWindowListenerMap.forEach((listenerList, type) => {
+        sstEventListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
-        // rebuild onclick event
-        sstOnClickHandler && documentClickListMap.set(appName, sstOnClickHandler);
-        /**
-         * rebuild document event
-         * WARNING!!: do not delete setCurrentAppName & removeDomScope
-         */
-        setCurrentAppName(appName);
-        sstDocumentListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
-            }
-        });
-        removeDomScope();
         reset();
     };
     // release all event listener & interval & timeout when unmount app
-    const release = ({ umdMode, isPrerender, keepAlive, destroy }) => {
+    const release = (clearTimer) => {
         // Clear window binding events
         if (eventListenerMap.size) {
             eventListenerMap.forEach((listenerList, type) => {
                 for (const listener of listenerList) {
-                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
+                    rawRemoveEventListener.call(rawWindow, type, listener);
                 }
             });
             eventListenerMap.clear();
         }
         // default mode(not keep-alive or isPrerender)
-        if ((!umdMode && !keepAlive && !isPrerender) || destroy) {
+        if (clearTimer) {
             intervalIdMap.forEach((_, intervalId) => {
                 rawClearInterval.call(rawWindow, intervalId);
             });
@@ -3590,18 +3694,6 @@ function effect(appName, microAppWindow) {
             intervalIdMap.clear();
             timeoutIdMap.clear();
         }
-        // Clear the function bound by micro application through document.onclick
-        documentClickListMap.delete(appName);
-        // Clear document binding event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
-                }
-            });
-            documentAppListenersMap.clear();
-        }
     };
     return {
         reset,
@@ -3784,7 +3876,7 @@ function getNoHashMicroPathFromURL(appName, baseUrl) {
  */
 function isEffectiveApp(appName) {
     const app = appInstanceMap.get(appName);
-    return !!(app && !app.isPrefetch);
+    return !!(app && !app.isPrefetch && !app.isHidden());
 }
 
 /**
@@ -4814,6 +4906,7 @@ const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
 const globalPropertyList$1 = ['window', 'self', 'globalThis'];
 class WithSandBox {
     constructor(appName, url) {
+        this.active = false;
         /**
          * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
          * Fix https://github.com/micro-zoe/micro-app/issues/234
@@ -4821,24 +4914,20 @@ class WithSandBox {
         this.scopeProperties = [];
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
-        // Properties newly added to microAppWindow
-        this.injectedKeys = new Set();
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
-        // record injected values before the first execution of umdHookMount and rebuild before remount umd app
-        // private recordUmdInjectedValues?: Map<PropertyKey, unknown>
-        // sandbox state
-        this.active = false;
+        // Properties newly added to microAppWindow
+        this.injectedKeys = new Set();
         this.microAppWindow = {}; // Proxy target
         this.adapter = new Adapter();
         // get scopeProperties and escapeProperties from plugins
         this.getSpecialProperties(appName);
-        // create proxyWindow with Proxy(microAppWindow)
-        this.proxyWindow = this.createProxyWindow(appName);
-        // Rewrite global event listener & timeout
-        this.effectController = effect(appName, this.microAppWindow);
+        // rewrite window of child app
+        this.windowEffect = this.patchWithWindow(appName, this.microAppWindow);
+        // rewrite document of child app
+        this.documentEffect = this.patchWithDocument(appName, this.microAppWindow);
         // inject global properties
-        this.initStaticGlobalKeys(this.microAppWindow, appName, url);
+        this.initStaticGlobalKeys(appName, url, this.microAppWindow);
     }
     /**
      * open sandbox and perform some initial actions
@@ -4849,38 +4938,38 @@ class WithSandBox {
      * @param disablePatchRequest prevent patchRequestApi
      */
     start({ umdMode, baseroute, useMemoryRouter, defaultPage, disablePatchRequest, }) {
-        if (!this.active) {
-            this.active = true;
-            if (useMemoryRouter) {
-                if (isUndefined(this.microAppWindow.location)) {
-                    this.setMicroAppRouter(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__);
-                }
-                this.initRouteState(defaultPage);
-                // unique listener of popstate event for sub app
-                this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-            }
-            else {
-                this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
-            }
-            /**
-             * Target: Ensure default mode action exactly same to first time when render again
-             * 1. The following globalKey maybe modified when render, reset them when render again in default mode
-             * 2. Umd mode will not delete any keys during sandBox.stop, ignore umd mode
-             * 3. When sandbox.start called for the first time, it must be the default mode
-             */
-            if (!umdMode) {
-                this.initGlobalKeysWhenStart(this.microAppWindow, this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, disablePatchRequest);
-            }
-            if (++globalEnv.activeSandbox === 1) {
-                patchElementAndDocument();
-                patchHistory();
-            }
-            if (++WithSandBox.activeCount === 1) {
-                effectDocumentEvent();
-                initEnvOfNestedApp();
+        if (this.active)
+            return;
+        this.active = true;
+        if (useMemoryRouter) {
+            if (isUndefined(this.microAppWindow.location)) {
+                this.setMicroAppRouter(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow);
             }
-            fixBabelPolyfill6();
+            this.initRouteState(defaultPage);
+            // unique listener of popstate event for sub app
+            this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
+        }
+        else {
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        }
+        /**
+         * Target: Ensure default mode action exactly same to first time when render again
+         * 1. The following globalKey maybe modified when render, reset them when render again in default mode
+         * 2. Umd mode will not delete any keys during sandBox.stop, ignore umd mode
+         * 3. When sandbox.start called for the first time, it must be the default mode
+         */
+        if (!umdMode) {
+            this.initGlobalKeysWhenStart(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow, disablePatchRequest);
+        }
+        if (++globalEnv.activeSandbox === 1) {
+            patchElementAndDocument();
+            patchHistory();
+        }
+        if (++WithSandBox.activeCount === 1) {
+            // effectDocumentEvent()
+            initEnvOfNestedApp();
         }
+        fixBabelPolyfill6();
     }
     /**
      * close sandbox and perform some clean up actions
@@ -4890,39 +4979,61 @@ class WithSandBox {
      * @param clearData clear data from base app
      */
     stop({ umdMode, keepRouteState, destroy, clearData, }) {
-        if (this.active) {
-            this.recordAndReleaseEffect({ clearData, destroy }, !umdMode || destroy);
-            if (this.removeHistoryListener) {
-                this.clearRouteState(keepRouteState);
-                // release listener of popstate
-                this.removeHistoryListener();
-            }
-            /**
-             * NOTE:
-             *  1. injectedKeys and escapeKeys must be placed at the back
-             *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
-             *  3. umd mode will not delete global keys
-             */
-            if (!umdMode || destroy) {
-                clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
-                this.injectedKeys.forEach((key) => {
-                    Reflect.deleteProperty(this.microAppWindow, key);
-                });
-                this.injectedKeys.clear();
-                this.escapeKeys.forEach((key) => {
-                    Reflect.deleteProperty(globalEnv.rawWindow, key);
-                });
-                this.escapeKeys.clear();
-            }
-            if (--globalEnv.activeSandbox === 0) {
-                releasePatchElementAndDocument();
-                releasePatchHistory();
-            }
-            if (--WithSandBox.activeCount === 0) {
-                releaseEffectDocumentEvent();
-            }
-            this.active = false;
+        if (!this.active)
+            return;
+        this.recordAndReleaseEffect({ umdMode, clearData, destroy }, !umdMode || destroy);
+        if (this.removeHistoryListener) {
+            this.clearRouteState(keepRouteState);
+            // release listener of popstate
+            this.removeHistoryListener();
+        }
+        /**
+         * NOTE:
+         *  1. injectedKeys and escapeKeys must be placed at the back
+         *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
+         *  3. umd mode will not delete global keys
+         */
+        if (!umdMode || destroy) {
+            clearMicroEventSource(this.microAppWindow.__MICRO_APP_NAME__);
+            this.injectedKeys.forEach((key) => {
+                Reflect.deleteProperty(this.microAppWindow, key);
+            });
+            this.injectedKeys.clear();
+            this.escapeKeys.forEach((key) => {
+                Reflect.deleteProperty(globalEnv.rawWindow, key);
+            });
+            this.escapeKeys.clear();
         }
+        if (--globalEnv.activeSandbox === 0) {
+            releasePatchElementAndDocument();
+            releasePatchHistory();
+        }
+        if (--WithSandBox.activeCount === 0) ;
+        this.active = false;
+    }
+    /**
+     * inject global properties to microAppWindow
+     * @param appName app name
+     * @param url app url
+     * @param microAppWindow micro window
+     */
+    initStaticGlobalKeys(appName, url, microAppWindow) {
+        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        microAppWindow.__MICRO_APP_NAME__ = appName;
+        microAppWindow.__MICRO_APP_URL__ = url;
+        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
+        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
+        microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
+        microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
+            removeDomScope,
+            pureCreateElement,
+            router,
+        });
+        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
     }
     /**
      * Record global effect and then release (effect: global event, timeout, data listener)
@@ -4953,7 +5064,8 @@ class WithSandBox {
      *  2. unmount prerender app manually
      */
     resetEffectSnapshot() {
-        this.effectController.reset();
+        this.windowEffect.reset();
+        this.documentEffect.reset();
         resetDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
@@ -4964,20 +5076,14 @@ class WithSandBox {
      * 3. after init prerender app
      */
     recordEffectSnapshot() {
-        // this.microAppWindow.__MICRO_APP_UMD_MODE__ = true
-        this.effectController.record();
+        this.windowEffect.record();
+        this.documentEffect.record();
         recordDataCenterSnapshot(this.microAppWindow.microApp);
-        // this.recordUmdInjectedValues = new Map<PropertyKey, unknown>()
-        // this.injectedKeys.forEach((key: PropertyKey) => {
-        //   this.recordUmdInjectedValues!.set(key, Reflect.get(this.microAppWindow, key))
-        // })
     }
     // rebuild umd snapshot before remount umd app
     rebuildEffectSnapshot() {
-        // this.recordUmdInjectedValues!.forEach((value: unknown, key: PropertyKey) => {
-        //   Reflect.set(this.proxyWindow, key, value)
-        // })
-        this.effectController.rebuild();
+        this.windowEffect.rebuild();
+        this.documentEffect.rebuild();
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
@@ -4986,19 +5092,17 @@ class WithSandBox {
      * 1. unmount of default/umd app
      * 2. hidden keep-alive app
      * 3. after init prerender app
+     * @param umdMode is umd mode
      * @param clearData clear data from base app
      * @param isPrerender is prerender app
      * @param keepAlive is keep-alive app
      * @param destroy completely destroy
      */
-    releaseGlobalEffect({ clearData = false, isPrerender = false, keepAlive = false, destroy = false, }) {
+    releaseGlobalEffect({ umdMode = false, clearData = false, isPrerender = false, keepAlive = false, destroy = false, }) {
         var _a, _b, _c;
-        this.effectController.release({
-            umdMode: this.proxyWindow.__MICRO_APP_UMD_MODE__,
-            isPrerender,
-            keepAlive,
-            destroy,
-        });
+        // default mode(not keep-alive or isPrerender)
+        this.windowEffect.release((!umdMode && !keepAlive && !isPrerender) || destroy);
+        this.documentEffect.release();
         (_a = this.microAppWindow.microApp) === null || _a === void 0 ? void 0 : _a.clearDataListener();
         (_b = this.microAppWindow.microApp) === null || _b === void 0 ? void 0 : _b.clearGlobalDataListener();
         if (clearData) {
@@ -5034,10 +5138,10 @@ class WithSandBox {
         }
     }
     // create proxyWindow with Proxy(microAppWindow)
-    createProxyWindow(appName) {
+    createProxyWindow(appName, microAppWindow) {
         const rawWindow = globalEnv.rawWindow;
         const descriptorTargetMap = new Map();
-        return new Proxy(this.microAppWindow, {
+        return new Proxy(microAppWindow, {
             get: (target, key) => {
                 throttleDeferForSetAppName(appName);
                 if (Reflect.has(target, key) ||
@@ -5047,41 +5151,39 @@ class WithSandBox {
                 return bindFunctionToRawTarget(Reflect.get(rawWindow, key), rawWindow);
             },
             set: (target, key, value) => {
-                if (this.active) {
-                    /**
-                     * TODO:
-                     * 1、location域名相同，子应用内部跳转时的处理
-                     */
-                    if (this.adapter.escapeSetterKeyList.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                    }
-                    else if (
-                    // target.hasOwnProperty has been rewritten
-                    !rawHasOwnProperty.call(target, key) &&
-                        rawHasOwnProperty.call(rawWindow, key) &&
-                        !this.scopeProperties.includes(key)) {
-                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                        const { configurable, enumerable, writable, set } = descriptor;
-                        // set value because it can be set
-                        rawDefineProperty(target, key, {
-                            value,
-                            configurable,
-                            enumerable,
-                            writable: writable !== null && writable !== void 0 ? writable : !!set,
-                        });
-                        this.injectedKeys.add(key);
-                    }
-                    else {
-                        !Reflect.has(target, key) && this.injectedKeys.add(key);
-                        Reflect.set(target, key, value);
-                    }
-                    if ((this.escapeProperties.includes(key) ||
-                        (this.adapter.staticEscapeProperties.includes(key) &&
-                            !Reflect.has(rawWindow, key))) &&
-                        !this.scopeProperties.includes(key)) {
-                        !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
-                        Reflect.set(rawWindow, key, value);
-                    }
+                /**
+                 * TODO:
+                 * 1、location域名相同，子应用内部跳转时的处理
+                 */
+                if (this.adapter.escapeSetterKeyList.includes(key)) {
+                    Reflect.set(rawWindow, key, value);
+                }
+                else if (
+                // target.hasOwnProperty has been rewritten
+                !rawHasOwnProperty.call(target, key) &&
+                    rawHasOwnProperty.call(rawWindow, key) &&
+                    !this.scopeProperties.includes(key)) {
+                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                    const { configurable, enumerable, writable, set } = descriptor;
+                    // set value because it can be set
+                    rawDefineProperty(target, key, {
+                        value,
+                        configurable,
+                        enumerable,
+                        writable: writable !== null && writable !== void 0 ? writable : !!set,
+                    });
+                    this.injectedKeys.add(key);
+                }
+                else {
+                    !Reflect.has(target, key) && this.injectedKeys.add(key);
+                    Reflect.set(target, key, value);
+                }
+                if ((this.escapeProperties.includes(key) ||
+                    (this.adapter.staticEscapeProperties.includes(key) &&
+                        !Reflect.has(rawWindow, key))) &&
+                    !this.scopeProperties.includes(key)) {
+                    !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
+                    Reflect.set(rawWindow, key, value);
                 }
                 return true;
             },
@@ -5123,46 +5225,29 @@ class WithSandBox {
                     this.injectedKeys.has(key) && this.injectedKeys.delete(key);
                     this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
                     return Reflect.deleteProperty(target, key);
-                }
-                return true;
-            },
-        });
-    }
-    // set __MICRO_APP_PRE_RENDER__ state
-    setPreRenderState(state) {
-        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
-    }
-    markUmdMode(state) {
-        this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
+                }
+                return true;
+            },
+        });
     }
     /**
-     * inject global properties to microAppWindow
-     * @param microAppWindow micro window
+     * create proxyWindow, rewrite window event & timer of child app
      * @param appName app name
-     * @param url app url
-     * @param useMemoryRouter whether use memory router
+     * @param microAppWindow Proxy target
      */
-    initStaticGlobalKeys(microAppWindow, appName, url) {
-        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        microAppWindow.__MICRO_APP_NAME__ = appName;
-        microAppWindow.__MICRO_APP_URL__ = url;
-        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
-        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
-        microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
-        microAppWindow.__MICRO_APP_UMD_MODE__ = false;
-        microAppWindow.rawWindow = globalEnv.rawWindow;
-        microAppWindow.rawDocument = globalEnv.rawDocument;
-        microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
-            removeDomScope,
-            pureCreateElement,
-            router,
-        });
-        this.setProxyDocument(microAppWindow, appName);
-        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
+    patchWithWindow(appName, microAppWindow) {
+        // create proxyWindow with Proxy(microAppWindow)
+        this.proxyWindow = this.createProxyWindow(appName, microAppWindow);
+        // rewrite global event & timeout of window
+        return patchWindowEffect(appName, microAppWindow);
     }
-    setProxyDocument(microAppWindow, appName) {
-        const { proxyDocument, MicroDocument } = this.createProxyDocument(appName);
+    /**
+     * create proxyDocument and MicroDocument, rewrite document of child app
+     * @param appName app name
+     * @param microAppWindow Proxy target
+     */
+    patchWithDocument(appName, microAppWindow) {
+        const { proxyDocument, MicroDocument, documentEffect } = createProxyDocument(appName, this);
         rawDefineProperties(microAppWindow, {
             document: {
                 configurable: false,
@@ -5181,6 +5266,14 @@ class WithSandBox {
                 },
             }
         });
+        return documentEffect;
+    }
+    // set __MICRO_APP_PRE_RENDER__ state
+    setPreRenderState(state) {
+        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
+    }
+    markUmdMode(state) {
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
     }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
@@ -5193,6 +5286,7 @@ class WithSandBox {
             topValue = rawWindow.top;
             parentValue = rawWindow.parent;
         }
+        // TODO: 用rawDefineProperties
         rawDefineProperty(microAppWindow, 'top', this.createDescriptorForMicroAppWindow('top', topValue));
         rawDefineProperty(microAppWindow, 'parent', this.createDescriptorForMicroAppWindow('parent', parentValue));
         globalPropertyList$1.forEach((key) => {
@@ -5216,15 +5310,15 @@ class WithSandBox {
      * @param url app url
      * @param disablePatchRequest prevent rewrite request method of child app
      */
-    initGlobalKeysWhenStart(microAppWindow, appName, url, disablePatchRequest) {
+    initGlobalKeysWhenStart(appName, url, microAppWindow, disablePatchRequest) {
         microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
-        this.setHijackProperty(microAppWindow, appName);
+        this.setHijackProperty(appName, microAppWindow);
         if (!disablePatchRequest)
-            this.patchRequestApi(microAppWindow, appName, url);
+            this.patchRequestApi(appName, url, microAppWindow);
         this.setScopeProperties(microAppWindow);
     }
     // set hijack Properties to microAppWindow
-    setHijackProperty(microAppWindow, appName) {
+    setHijackProperty(appName, microAppWindow) {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
             eval: {
@@ -5252,7 +5346,7 @@ class WithSandBox {
         });
     }
     // rewrite fetch, XMLHttpRequest, EventSource
-    patchRequestApi(microAppWindow, appName, url) {
+    patchRequestApi(appName, url, microAppWindow) {
         let microFetch = createMicroFetch(url);
         let microXMLHttpRequest = createMicroXMLHttpRequest(url);
         let microEventSource = createMicroEventSource(appName, url);
@@ -5302,7 +5396,7 @@ class WithSandBox {
         });
     }
     // set location & history for memory router
-    setMicroAppRouter(microAppWindow, appName, url) {
+    setMicroAppRouter(appName, url, microAppWindow) {
         const { microLocation, microHistory } = createMicroRouter(appName, url);
         rawDefineProperties(microAppWindow, {
             location: {
@@ -5352,85 +5446,26 @@ class WithSandBox {
     actionBeforeExecScripts(container) {
         this.patchStaticElement(container);
     }
-    /**
-     * Create new document and Document
-     */
-    createProxyDocument(appName) {
-        const rawDocument = globalEnv.rawDocument;
-        const rawRootDocument = globalEnv.rawRootDocument;
-        const createElement = function (tagName, options) {
-            const element = globalEnv.rawCreateElement.call(rawDocument, tagName, options);
-            element.__MICRO_APP_NAME__ = appName;
-            return element;
-        };
-        const proxyDocument = new Proxy(rawDocument, {
-            get: (target, key) => {
-                throttleDeferForSetAppName(appName);
-                throttleDeferForParentNode(proxyDocument);
-                if (key === 'createElement')
-                    return createElement;
-                if (key === Symbol.toStringTag)
-                    return 'ProxyDocument';
-                if (key === 'defaultView')
-                    return this.proxyWindow;
-                return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
-            },
-            set: (target, key, value) => {
-                /**
-                 * 1. Fix TypeError: Illegal invocation when set document.title
-                 * 2. If the set method returns false, and the assignment happened in strict-mode code, a TypeError will be thrown.
-                 */
-                Reflect.set(target, key, value);
-                return true;
-            }
-        });
-        class MicroDocument {
-            static [Symbol.hasInstance](target) {
-                let proto = target;
-                while (proto = Object.getPrototypeOf(proto)) {
-                    if (proto === MicroDocument.prototype) {
-                        return true;
-                    }
-                }
-                return (target === proxyDocument ||
-                    target instanceof rawRootDocument);
-            }
-        }
-        /**
-         * TIP:
-         * 1. child class __proto__, which represents the inherit of the constructor, always points to the parent class
-         * 2. child class prototype.__proto__, which represents the inherit of methods, always points to parent class prototype
-         * e.g.
-         * class B extends A {}
-         * B.__proto__ === A // true
-         * B.prototype.__proto__ === A.prototype // true
-         */
-        Object.setPrototypeOf(MicroDocument, rawRootDocument);
-        // Object.create(rawRootDocument.prototype) will cause MicroDocument and proxyDocument methods not same when exec Document.prototype.xxx = xxx in child app
-        Object.setPrototypeOf(MicroDocument.prototype, new Proxy(rawRootDocument.prototype, {
-            get(target, key) {
-                throttleDeferForSetAppName(appName);
-                return bindFunctionToRawTarget(Reflect.get(target, key), rawDocument, 'DOCUMENT');
-            },
-            set(target, key, value) {
-                Reflect.set(target, key, value);
-                return true;
-            }
-        }));
-        return {
-            proxyDocument,
-            MicroDocument,
-        };
-    }
 }
 WithSandBox.activeCount = 0; // number of active sandbox
 
-function patchIframeRoute(appName, microAppWindow, childFullPath) {
+function patchIframeRoute(appName, url, microAppWindow, browserHost) {
+    const childStaticLocation = new URL(url);
+    const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
+    const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
+    // rewrite microAppWindow.history
     const microHistory = microAppWindow.history;
     microAppWindow.rawReplaceState = microHistory.replaceState;
     assign(microHistory, createMicroHistory(appName, microAppWindow.location));
-    // exec updateMicroLocation after patch microHistory
+    /**
+     * Init microLocation before exec sandbox.start (sandbox.start will sync microLocation info to browser url)
+     * NOTE:
+     *  1. exec updateMicroLocation after patch microHistory
+     *  2.
+     */
     updateMicroLocation(appName, childFullPath, microAppWindow.location, 'prevent');
+    // create proxyLocation
+    return createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost);
 }
 
 function patchIframeWindow(appName, microAppWindow) {
@@ -5496,15 +5531,16 @@ function patchIframeWindow(appName, microAppWindow) {
             logWarn(e, appName);
         }
     });
-    return windowEffect(microAppWindow);
+    return patchWindowEffect$1(microAppWindow);
 }
-function windowEffect(microAppWindow) {
-    const { rawWindow, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
+function patchWindowEffect$1(microAppWindow) {
+    const { rawWindow, rawAddEventListener, rawRemoveEventListener } = globalEnv;
     const eventListenerMap = new Map();
-    const sstWindowListenerMap = new Map();
+    const sstEventListenerMap = new Map();
     function getEventTarget(type) {
         return scopeIframeWindowEvent.includes(type) ? microAppWindow : rawWindow;
     }
+    // TODO: listener 是否需要绑定microAppWindow，否则函数中的this指向原生window
     microAppWindow.addEventListener = function (type, listener, options) {
         const listenerList = eventListenerMap.get(type);
         if (listenerList) {
@@ -5524,7 +5560,7 @@ function windowEffect(microAppWindow) {
         rawRemoveEventListener.call(getEventTarget(type), type, listener, options);
     };
     const reset = () => {
-        sstWindowListenerMap.clear();
+        sstEventListenerMap.clear();
     };
     /**
      * NOTE:
@@ -5542,14 +5578,15 @@ function windowEffect(microAppWindow) {
         // record window event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                sstWindowListenerMap.set(type, new Set(listenerList));
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
         });
     };
     // rebuild event and timer before remount app
     const rebuild = () => {
         // rebuild window event
-        sstWindowListenerMap.forEach((listenerList, type) => {
+        sstEventListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
@@ -5583,18 +5620,26 @@ function windowEffect(microAppWindow) {
 function patchIframeDocument(appName, microAppWindow, proxyLocation) {
     patchDocumentPrototype(appName, microAppWindow);
     patchDocumentProperties(appName, microAppWindow, proxyLocation);
-    return documentEffect(appName, microAppWindow);
+    return patchDocumentEffect(appName, microAppWindow);
 }
 function patchDocumentPrototype(appName, microAppWindow) {
     const rawDocument = globalEnv.rawDocument;
     const microRootDocument = microAppWindow.Document;
     const microDocument = microAppWindow.document;
+    const rawMicroCreateElement = microRootDocument.prototype.createElement;
+    const rawMicroCreateTextNode = microRootDocument.prototype.createTextNode;
+    const rawMicroQuerySelector = microRootDocument.prototype.querySelector;
+    const rawMicroQuerySelectorAll = microRootDocument.prototype.querySelectorAll;
+    const rawMicroGetElementById = microRootDocument.prototype.getElementById;
+    const rawMicroGetElementsByClassName = microRootDocument.prototype.getElementsByClassName;
+    const rawMicroGetElementsByTagName = microRootDocument.prototype.getElementsByTagName;
+    const rawMicroGetElementsByName = microRootDocument.prototype.getElementsByName;
     microRootDocument.prototype.createElement = function createElement(tagName, options) {
-        const element = globalEnv.rawCreateElement.call(this, tagName, options);
+        const element = rawMicroCreateElement.call(this, tagName, options);
         return updateElementInfo(element, appName);
     };
     microRootDocument.prototype.createTextNode = function createTextNode(data) {
-        const element = globalEnv.rawCreateTextNode.call(this, data);
+        const element = rawMicroCreateTextNode.call(this, data);
         return updateElementInfo(element, appName);
     };
     function getDefaultRawTarget(target) {
@@ -5603,19 +5648,21 @@ function patchDocumentPrototype(appName, microAppWindow) {
     // query element👇
     function querySelector(selectors) {
         var _a, _b;
-        if (isUniqueElement(selectors) ||
+        if (!selectors ||
+            isUniqueElement(selectors) ||
             microDocument !== this) {
             const _this = getDefaultRawTarget(this);
-            return globalEnv.rawQuerySelector.call(_this, selectors);
+            return rawMicroQuerySelector.call(_this, selectors);
         }
         return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors)) !== null && _b !== void 0 ? _b : null;
     }
     function querySelectorAll(selectors) {
         var _a, _b;
-        if (isUniqueElement(selectors) ||
+        if (!selectors ||
+            isUniqueElement(selectors) ||
             microDocument !== this) {
             const _this = getDefaultRawTarget(this);
-            return globalEnv.rawQuerySelectorAll.call(_this, selectors);
+            return rawMicroQuerySelectorAll.call(_this, selectors);
         }
         return (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors)) !== null && _b !== void 0 ? _b : [];
     }
@@ -5624,25 +5671,25 @@ function patchDocumentPrototype(appName, microAppWindow) {
     microRootDocument.prototype.getElementById = function getElementById(key) {
         const _this = getDefaultRawTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementById.call(_this, key);
+            return rawMicroGetElementById.call(_this, key);
         }
         try {
             return querySelector.call(this, `#${key}`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementById.call(_this, key);
+            return rawMicroGetElementById.call(_this, key);
         }
     };
     microRootDocument.prototype.getElementsByClassName = function getElementsByClassName(key) {
         const _this = getDefaultRawTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByClassName.call(_this, key);
+            return rawMicroGetElementsByClassName.call(_this, key);
         }
         try {
             return querySelectorAll.call(this, `.${key}`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementsByClassName.call(_this, key);
+            return rawMicroGetElementsByClassName.call(_this, key);
         }
     };
     microRootDocument.prototype.getElementsByTagName = function getElementsByTagName(key) {
@@ -5651,25 +5698,25 @@ function patchDocumentPrototype(appName, microAppWindow) {
         if (isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key) ||
             (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
-            return globalEnv.rawGetElementsByTagName.call(_this, key);
+            return rawMicroGetElementsByTagName.call(_this, key);
         }
         try {
             return querySelectorAll.call(this, key);
         }
         catch (_b) {
-            return globalEnv.rawGetElementsByTagName.call(_this, key);
+            return rawMicroGetElementsByTagName.call(_this, key);
         }
     };
     microRootDocument.prototype.getElementsByName = function getElementsByName(key) {
         const _this = getDefaultRawTarget(this);
         if (isInvalidQuerySelectorKey(key)) {
-            return globalEnv.rawGetElementsByName.call(_this, key);
+            return rawMicroGetElementsByName.call(_this, key);
         }
         try {
             return querySelectorAll.call(this, `[name=${key}]`);
         }
         catch (_a) {
-            return globalEnv.rawGetElementsByName.call(_this, key);
+            return rawMicroGetElementsByName.call(_this, key);
         }
     };
 }
@@ -5725,46 +5772,37 @@ function patchDocumentProperties(appName, microAppWindow, proxyLocation) {
             enumerable: true,
             configurable: true,
             get: () => rawDocument[tagName],
-            set: undefined,
+            set: (value) => { rawDocument[tagName] = value; },
         });
     });
 }
-function documentEffect(appName, microAppWindow) {
-    const documentEventListenerMap = new Map();
-    const sstDocumentListenerMap = new Map();
+function patchDocumentEffect(appName, microAppWindow) {
+    const { rawDocument, rawAddEventListener, rawRemoveEventListener } = globalEnv;
+    const eventListenerMap = new Map();
+    const sstEventListenerMap = new Map();
     let onClickHandler = null;
     let sstOnClickHandler = null;
     const microRootDocument = microAppWindow.Document;
     const microDocument = microAppWindow.document;
-    const { rawDocument, rawAddEventListener, rawRemoveEventListener, } = globalEnv;
     function getEventTarget(type, bindTarget) {
         return scopeIframeDocumentEvent.includes(type) ? bindTarget : rawDocument;
     }
     microRootDocument.prototype.addEventListener = function (type, listener, options) {
         const handler = isFunction(listener) ? (listener.__MICRO_APP_BOUND_FUNCTION__ = listener.__MICRO_APP_BOUND_FUNCTION__ || listener.bind(this)) : listener;
-        const appListenersMap = documentEventListenerMap.get(appName);
-        if (appListenersMap) {
-            const appListenerList = appListenersMap.get(type);
-            if (appListenerList) {
-                appListenerList.add(listener);
-            }
-            else {
-                appListenersMap.set(type, new Set([listener]));
-            }
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
         }
         else {
-            documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
+            eventListenerMap.set(type, new Set([listener]));
         }
         listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
         rawAddEventListener.call(getEventTarget(type, this), type, handler, options);
     };
     microRootDocument.prototype.removeEventListener = function (type, listener, options) {
-        const appListenersMap = documentEventListenerMap.get(appName);
-        if (appListenersMap) {
-            const appListenerList = appListenersMap.get(type);
-            if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
-                appListenerList.delete(listener);
-            }
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
         }
         const handler = (listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_BOUND_FUNCTION__) || listener;
         rawRemoveEventListener.call(getEventTarget(type, this), type, handler, options);
@@ -5816,7 +5854,7 @@ function documentEffect(appName, microAppWindow) {
         }
     });
     const reset = () => {
-        sstDocumentListenerMap.clear();
+        sstEventListenerMap.clear();
         sstOnClickHandler = null;
     };
     /**
@@ -5829,24 +5867,25 @@ function documentEffect(appName, microAppWindow) {
      *  3. after init prerender app
      */
     const record = () => {
-        // record onclick handler
-        sstOnClickHandler = sstOnClickHandler || onClickHandler;
+        /**
+         * record onclick handler
+         * onClickHandler maybe set again after prerender/keep-alive app hidden
+         */
+        sstOnClickHandler = onClickHandler || sstOnClickHandler;
         // record document event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                if (listenerList.size) {
-                    sstDocumentListenerMap.set(type, new Set(listenerList));
-                }
-            });
-        }
+        eventListenerMap.forEach((listenerList, type) => {
+            if (listenerList.size) {
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
+            }
+        });
     };
     // rebuild event and timer before remount app
     const rebuild = () => {
         // rebuild onclick event
-        if (sstOnClickHandler)
+        if (sstOnClickHandler && !onClickHandler)
             microDocument.onclick = sstOnClickHandler;
-        sstDocumentListenerMap.forEach((listenerList, type) => {
+        sstEventListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
                 microDocument.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
@@ -5854,20 +5893,19 @@ function documentEffect(appName, microAppWindow) {
         reset();
     };
     const release = () => {
-        // Clear the function bound by micro application through document.onclick
+        // Clear the function bound by micro app through document.onclick
         if (isFunction(onClickHandler)) {
             rawRemoveEventListener.call(rawDocument, 'click', onClickHandler);
-            onClickHandler = null;
         }
+        onClickHandler = null;
         // Clear document binding event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
+        if (eventListenerMap.size) {
+            eventListenerMap.forEach((listenerList, type) => {
                 for (const listener of listenerList) {
                     rawRemoveEventListener.call(getEventTarget(type, microDocument), type, (listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_BOUND_FUNCTION__) || listener);
                 }
             });
-            documentAppListenersMap.clear();
+            eventListenerMap.clear();
         }
     };
     return {
@@ -5878,33 +5916,38 @@ function documentEffect(appName, microAppWindow) {
     };
 }
 
-function patchIframeElement(appName, url, microAppWindow, iframeSandbox) {
-    patchIframeNode(appName, microAppWindow, iframeSandbox);
+function patchIframeElement(appName, url, microAppWindow, sandbox) {
+    patchIframeNode(appName, microAppWindow, sandbox);
     patchIframeAttribute(appName, url, microAppWindow);
 }
-function patchIframeNode(appName, microAppWindow, iframeSandbox) {
-    const microDocument = microAppWindow.document;
+function patchIframeNode(appName, microAppWindow, sandbox) {
+    const rawRootElement = globalEnv.rawRootElement; // native root Element
     const rawDocument = globalEnv.rawDocument;
+    const microDocument = microAppWindow.document;
     const microRootNode = microAppWindow.Node;
     const microRootElement = microAppWindow.Element;
     // const rawMicroGetRootNode = microRootNode.prototype.getRootNode
     const rawMicroAppendChild = microRootNode.prototype.appendChild;
     const rawMicroInsertBefore = microRootNode.prototype.insertBefore;
     const rawMicroReplaceChild = microRootNode.prototype.replaceChild;
+    const rawMicroRemoveChild = microRootNode.prototype.removeChild;
+    const rawMicroAppend = microRootElement.prototype.append;
+    const rawMicroPrepend = microRootElement.prototype.prepend;
+    const rawMicroInsertAdjacentElement = microRootElement.prototype.insertAdjacentElement;
     const rawMicroCloneNode = microRootNode.prototype.cloneNode;
     const rawInnerHTMLDesc = Object.getOwnPropertyDescriptor(microRootElement.prototype, 'innerHTML');
     const rawParentNodeLDesc = Object.getOwnPropertyDescriptor(microRootNode.prototype, 'parentNode');
     const isPureNode = (target) => {
         return (isScriptElement(target) || isBaseElement(target)) && target.__PURE_ELEMENT__;
     };
-    const getRawTarget = (target) => {
-        if (target === iframeSandbox.microHead) {
+    const getRawTarget = (parent) => {
+        if (parent === sandbox.microHead) {
             return rawDocument.head;
         }
-        else if (target === iframeSandbox.microBody) {
+        else if (parent === sandbox.microBody) {
             return rawDocument.body;
         }
-        return target;
+        return parent;
     };
     microRootNode.prototype.getRootNode = function getRootNode() {
         return microDocument;
@@ -5915,46 +5958,70 @@ function patchIframeNode(appName, microAppWindow, iframeSandbox) {
     };
     microRootNode.prototype.appendChild = function appendChild(node) {
         updateElementInfo(node, appName);
-        // TODO：只有script才可以这样拦截，link、style不应该拦截
         if (isPureNode(node)) {
             return rawMicroAppendChild.call(this, node);
         }
-        const _this = getRawTarget(this);
-        if (_this !== this) {
-            return _this.appendChild(node);
-        }
-        return rawMicroAppendChild.call(_this, node);
+        return rawRootElement.prototype.appendChild.call(getRawTarget(this), node);
     };
-    // TODO: 更多场景适配
     microRootNode.prototype.insertBefore = function insertBefore(node, child) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroInsertBefore.call(this, node, child);
         }
-        const _this = getRawTarget(this);
-        if (_this !== this) {
-            if (child && !_this.contains(child)) {
-                return _this.appendChild(node);
-            }
-            return _this.insertBefore(node, child);
-        }
-        return rawMicroInsertBefore.call(_this, node, child);
+        return rawRootElement.prototype.insertBefore.call(getRawTarget(this), node, child);
     };
-    // TODO: 更多场景适配
     microRootNode.prototype.replaceChild = function replaceChild(node, child) {
         updateElementInfo(node, appName);
         if (isPureNode(node)) {
             return rawMicroReplaceChild.call(this, node, child);
         }
-        const _this = getRawTarget(this);
-        if (_this !== this) {
-            if (child && !_this.contains(child)) {
-                _this.appendChild(node);
-                return child;
-            }
-            return _this.replaceChild(node, child);
+        return rawRootElement.prototype.replaceChild.call(getRawTarget(this), node, child);
+    };
+    microRootNode.prototype.removeChild = function removeChild(oldChild) {
+        if (isPureNode(oldChild) || this.contains(oldChild)) {
+            return rawMicroRemoveChild.call(this, oldChild);
+        }
+        return rawRootElement.prototype.removeChild.call(getRawTarget(this), oldChild);
+    };
+    microRootElement.prototype.append = function append(...nodes) {
+        let i = 0;
+        let hasPureNode = false;
+        while (i < nodes.length) {
+            nodes[i] = isNode(nodes[i]) ? nodes[i] : microDocument.createTextNode(nodes[i]);
+            if (isPureNode(nodes[i]))
+                hasPureNode = true;
+            i++;
+        }
+        if (hasPureNode) {
+            return rawMicroAppend.call(this, ...nodes);
+        }
+        return rawRootElement.prototype.append.call(getRawTarget(this), ...nodes);
+    };
+    microRootElement.prototype.prepend = function prepend(...nodes) {
+        let i = 0;
+        let hasPureNode = false;
+        while (i < nodes.length) {
+            nodes[i] = isNode(nodes[i]) ? nodes[i] : microDocument.createTextNode(nodes[i]);
+            if (isPureNode(nodes[i]))
+                hasPureNode = true;
+            i++;
+        }
+        if (hasPureNode) {
+            return rawMicroPrepend.call(this, ...nodes);
+        }
+        return rawRootElement.prototype.prepend.call(getRawTarget(this), ...nodes);
+    };
+    /**
+     * The insertAdjacentElement method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
+     * Scenes:
+     *  1. vite4 development env for style
+     */
+    microRootElement.prototype.insertAdjacentElement = function insertAdjacentElement(where, element) {
+        updateElementInfo(element, appName);
+        if (isPureNode(element)) {
+            return rawMicroInsertAdjacentElement.call(this, where, element);
         }
-        return rawMicroReplaceChild.call(_this, node, child);
+        return rawRootElement.prototype.insertAdjacentElement.call(getRawTarget(this), where, element);
     };
     // patch cloneNode
     microRootNode.prototype.cloneNode = function cloneNode(deep) {
@@ -5999,7 +6066,6 @@ function patchIframeNode(appName, microAppWindow, iframeSandbox) {
             }
             return result;
         },
-        set: undefined,
     });
     // Adapt to new image(...) scene
     const ImageProxy = new Proxy(microAppWindow.Image, {
@@ -6039,6 +6105,12 @@ function patchIframeAttribute(appName, url, microAppWindow) {
         [microAppWindow.HTMLScriptElement.prototype, 'src'],
         [microAppWindow.HTMLLinkElement.prototype, 'href'],
     ];
+    /**
+     * element.setAttribute does not trigger this actions:
+     *  1. img.src = xxx
+     *  2. script.src = xxx
+     *  3. link.href = xxx
+     */
     protoAttrList.forEach(([target, attr]) => {
         const { enumerable, configurable, get, set } = Object.getOwnPropertyDescriptor(target, attr) || {
             enumerable: true,
@@ -6071,23 +6143,30 @@ class IframeSandbox {
         };
         const rawLocation = globalEnv.rawWindow.location;
         const browserHost = rawLocation.protocol + '//' + rawLocation.host;
-        const childStaticLocation = new URL(url);
-        const childHost = childStaticLocation.protocol + '//' + childStaticLocation.host;
-        const childFullPath = childStaticLocation.pathname + childStaticLocation.search + childStaticLocation.hash;
         this.deleteIframeElement = this.createIframeElement(appName, browserHost);
         this.microAppWindow = this.iframe.contentWindow;
         this.patchIframe(this.microAppWindow, (resolve) => {
             // TODO: 优化代码
-            // exec before initStaticGlobalKeys
-            this.createProxyLocation(appName, url, this.microAppWindow, childStaticLocation, browserHost, childHost);
-            this.createProxyWindow(this.microAppWindow);
-            this.initStaticGlobalKeys(appName, url);
+            // create new html to iframe
+            this.createIframeTemplate(this.microAppWindow);
             // get escapeProperties from plugins
             this.getSpecialProperties(appName);
-            this.createIframeTemplate(this.microAppWindow);
-            patchIframeRoute(appName, this.microAppWindow, childFullPath);
+            // rewrite location & history of child app
+            this.proxyLocation = patchIframeRoute(appName, url, this.microAppWindow, browserHost);
+            // create proxy window
+            this.proxyWindow = this.createProxyWindow(this.microAppWindow);
+            /**
+             * create static properties
+             * NOTE:
+             *  1. execute as early as possible
+             *  2. run after patchIframeRoute & createProxyWindow
+             */
+            this.initStaticGlobalKeys(appName, url);
+            // rewrite window of child app
             this.windowEffect = patchIframeWindow(appName, this.microAppWindow);
+            // rewrite document of child app
             this.documentEffect = patchIframeDocument(appName, this.microAppWindow, this.proxyLocation);
+            // rewrite Node & Element of child app
             patchIframeElement(appName, url, this.microAppWindow, this);
             resolve();
         });
@@ -6124,53 +6203,78 @@ class IframeSandbox {
         });
     }
     start({ baseroute, useMemoryRouter, defaultPage, disablePatchRequest, }) {
-        if (!this.active) {
-            this.active = true;
-            // TODO: 虚拟路由升级
-            if (useMemoryRouter) {
-                this.initRouteState(defaultPage);
-                // unique listener of popstate event for sub app
-                this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-            }
-            else {
-                this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
-            }
-            /**
-             * create base element to iframe
-             * WARNING: This will also affect a, image, link and script
-             */
-            if (!disablePatchRequest) {
-                this.createIframeBase();
-            }
-            if (++globalEnv.activeSandbox === 1) {
-                patchElementAndDocument();
-                patchHistory();
-            }
-            if (++IframeSandbox.activeCount === 1) ;
+        if (this.active)
+            return;
+        this.active = true;
+        if (useMemoryRouter) {
+            this.initRouteState(defaultPage);
+            // unique listener of popstate event for sub app
+            this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
+        }
+        else {
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
+        }
+        /**
+         * create base element to iframe
+         * WARNING: This will also affect a, image, link and script
+         */
+        if (!disablePatchRequest) {
+            this.createIframeBase();
         }
+        if (++globalEnv.activeSandbox === 1) {
+            patchElementAndDocument();
+            patchHistory();
+        }
+        if (++IframeSandbox.activeCount === 1) ;
     }
     stop({ umdMode, keepRouteState, destroy, clearData, }) {
-        if (this.active) {
-            this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
-            if (this.removeHistoryListener) {
-                this.clearRouteState(keepRouteState);
-                // release listener of popstate
-                this.removeHistoryListener();
-            }
-            if (!umdMode || destroy) {
-                this.deleteIframeElement();
-                this.escapeKeys.forEach((key) => {
-                    Reflect.deleteProperty(globalEnv.rawWindow, key);
-                });
-                this.escapeKeys.clear();
-            }
-            if (--globalEnv.activeSandbox === 0) {
-                releasePatchElementAndDocument();
-                releasePatchHistory();
-            }
-            if (--IframeSandbox.activeCount === 0) ;
-            this.active = false;
+        if (!this.active)
+            return;
+        this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
+        if (this.removeHistoryListener) {
+            this.clearRouteState(keepRouteState);
+            // release listener of popstate
+            this.removeHistoryListener();
+        }
+        if (!umdMode || destroy) {
+            this.deleteIframeElement();
+            this.escapeKeys.forEach((key) => {
+                Reflect.deleteProperty(globalEnv.rawWindow, key);
+            });
+            this.escapeKeys.clear();
         }
+        if (--globalEnv.activeSandbox === 0) {
+            releasePatchElementAndDocument();
+            releasePatchHistory();
+        }
+        if (--IframeSandbox.activeCount === 0) ;
+        this.active = false;
+    }
+    /**
+     * create static properties
+     * NOTE:
+     *  1. execute as early as possible
+     *  2. run after patchIframeRoute & createProxyWindow
+     */
+    initStaticGlobalKeys(appName, url) {
+        this.microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        this.microAppWindow.__MICRO_APP_NAME__ = appName;
+        this.microAppWindow.__MICRO_APP_URL__ = url;
+        this.microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
+        this.microAppWindow.__MICRO_APP_WINDOW__ = this.microAppWindow;
+        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = false;
+        this.microAppWindow.__MICRO_APP_SANDBOX__ = this;
+        this.microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
+        this.microAppWindow.rawWindow = globalEnv.rawWindow;
+        this.microAppWindow.rawDocument = globalEnv.rawDocument;
+        this.microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
+            removeDomScope,
+            pureCreateElement,
+            location: this.proxyLocation,
+            router,
+        });
     }
     /**
      * Record global effect and then release (effect: global event, timeout, data listener)
@@ -6201,8 +6305,9 @@ class IframeSandbox {
      *  2. unmount prerender app manually
      */
     resetEffectSnapshot() {
-        this.windowEffect.reset();
-        this.documentEffect.reset();
+        var _a, _b;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.reset();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.reset();
         resetDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
@@ -6213,14 +6318,16 @@ class IframeSandbox {
      * 3. after init prerender app
      */
     recordEffectSnapshot() {
-        this.windowEffect.record();
-        this.documentEffect.record();
+        var _a, _b;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.record();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.record();
         recordDataCenterSnapshot(this.microAppWindow.microApp);
     }
     // rebuild umd snapshot before remount umd app
     rebuildEffectSnapshot() {
-        this.windowEffect.rebuild();
-        this.documentEffect.rebuild();
+        var _a, _b;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.rebuild();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.rebuild();
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
@@ -6234,43 +6341,24 @@ class IframeSandbox {
      * @param keepAlive is keep-alive app
      */
     releaseGlobalEffect({ clearData = false }) {
-        var _a, _b, _c;
-        this.windowEffect.release();
-        this.documentEffect.release();
-        (_a = this.microAppWindow.microApp) === null || _a === void 0 ? void 0 : _a.clearDataListener();
-        (_b = this.microAppWindow.microApp) === null || _b === void 0 ? void 0 : _b.clearGlobalDataListener();
+        var _a, _b, _c, _d, _e;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.release();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.release();
+        (_c = this.microAppWindow.microApp) === null || _c === void 0 ? void 0 : _c.clearDataListener();
+        (_d = this.microAppWindow.microApp) === null || _d === void 0 ? void 0 : _d.clearGlobalDataListener();
         if (clearData) {
             microApp.clearData(this.microAppWindow.__MICRO_APP_NAME__);
-            (_c = this.microAppWindow.microApp) === null || _c === void 0 ? void 0 : _c.clearData();
+            (_e = this.microAppWindow.microApp) === null || _e === void 0 ? void 0 : _e.clearData();
         }
     }
     // set __MICRO_APP_PRE_RENDER__ state
     setPreRenderState(state) {
         this.microAppWindow.__MICRO_APP_PRE_RENDER__ = state;
     }
+    // record umdMode
     markUmdMode(state) {
         this.microAppWindow.__MICRO_APP_UMD_MODE__ = state;
     }
-    initStaticGlobalKeys(appName, url) {
-        this.microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        this.microAppWindow.__MICRO_APP_NAME__ = appName;
-        this.microAppWindow.__MICRO_APP_URL__ = url;
-        this.microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = '';
-        this.microAppWindow.__MICRO_APP_WINDOW__ = this.microAppWindow;
-        this.microAppWindow.__MICRO_APP_PRE_RENDER__ = false;
-        this.microAppWindow.__MICRO_APP_UMD_MODE__ = false;
-        this.microAppWindow.__MICRO_APP_SANDBOX__ = this;
-        this.microAppWindow.__MICRO_APP_PROXY_WINDOW__ = this.proxyWindow;
-        this.microAppWindow.rawWindow = globalEnv.rawWindow;
-        this.microAppWindow.rawDocument = globalEnv.rawDocument;
-        this.microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
-            removeDomScope,
-            pureCreateElement,
-            location: this.proxyLocation,
-            router,
-        });
-    }
     // TODO: RESTRUCTURE
     patchIframe(microAppWindow, cb) {
         const oldMicroDocument = microAppWindow.document;
@@ -6319,12 +6407,9 @@ class IframeSandbox {
         this.updateIframeBase();
         this.microHead.appendChild(this.baseElement);
     }
-    createProxyLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost) {
-        this.proxyLocation = createMicroLocation(appName, url, microAppWindow, childStaticLocation, browserHost, childHost);
-    }
     createProxyWindow(microAppWindow) {
         const rawWindow = globalEnv.rawWindow;
-        this.proxyWindow = new Proxy(microAppWindow, {
+        return new Proxy(microAppWindow, {
             get: (target, key) => {
                 if (key === 'location') {
                     return this.proxyLocation;
@@ -6335,20 +6420,18 @@ class IframeSandbox {
                 return bindFunctionToRawTarget(Reflect.get(target, key), target);
             },
             set: (target, key, value) => {
-                if (this.active) {
-                    /**
-                     * TODO:
-                     * 1、location域名相同，子应用内部跳转时的处理
-                     * 2、和with沙箱的变量相同，提取成公共数组
-                     */
-                    if (key === 'location') {
-                        return Reflect.set(rawWindow, key, value);
-                    }
-                    Reflect.set(target, key, value);
-                    if (this.escapeProperties.includes(key)) {
-                        !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
-                        Reflect.set(rawWindow, key, value);
-                    }
+                /**
+                 * TODO:
+                 * 1、location域名相同，子应用内部跳转时的处理
+                 * 2、和with沙箱的变量相同，提取成公共数组
+                 */
+                if (key === 'location') {
+                    return Reflect.set(rawWindow, key, value);
+                }
+                Reflect.set(target, key, value);
+                if (this.escapeProperties.includes(key)) {
+                    !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
+                    Reflect.set(rawWindow, key, value);
                 }
                 return true;
             },
@@ -6520,9 +6603,14 @@ class CreateApp {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            this.setAppState(appStates.LOADED);
-            if (!this.isPrefetch && appStates.UNMOUNT !== this.state) {
+            if (!this.isPrefetch && !this.isUnmounted()) {
                 getRootContainer(this.container).mount(this);
+                // Abandonment plan
+                // if (this.isHidden()) {
+                //   getRootContainer(this.container!).unmount()
+                // } else if (!this.isUnmounted()) {
+                //   getRootContainer(this.container!).mount(this)
+                // }
             }
             else if (this.isPrerender) {
                 /**
@@ -6563,7 +6651,7 @@ class CreateApp {
      */
     onLoadError(e) {
         this.loadSourceLevel = -1;
-        if (appStates.UNMOUNT !== this.state) {
+        if (!this.isUnmounted()) {
             this.onerror(e);
             this.setAppState(appStates.LOAD_FAILED);
         }
@@ -6617,7 +6705,7 @@ class CreateApp {
                  */
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
                 // current this.container is <div prerender='true'></div>
-                cloneContainer(this.container, container, false);
+                cloneContainer(container, this.container, false);
                 /**
                  * set this.container to <micro-app></micro-app>
                  * NOTE:
@@ -6648,7 +6736,7 @@ class CreateApp {
                 }
                 this.setAppState(appStates.MOUNTING);
                 // TODO: 将所有cloneContainer中的'as Element'去掉，兼容shadowRoot的场景
-                cloneContainer(this.source.html, this.container, !this.umdMode);
+                cloneContainer(this.container, this.source.html, !this.umdMode);
                 (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
                     umdMode: this.umdMode,
                     baseroute,
@@ -6677,7 +6765,7 @@ class CreateApp {
                                     this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
                                 }
                                 catch (e) {
-                                    logError('An error occurred in function mount \n', this.name, e);
+                                    logError('An error occurred in window.mount \n', this.name, e);
                                 }
                             }
                             else if (isFinished === true) {
@@ -6692,7 +6780,7 @@ class CreateApp {
                         this.handleMounted(this.umdHookMount(microApp.getData(this.name, true)));
                     }
                     catch (e) {
-                        logError('An error occurred in function mount \n', this.name, e);
+                        logError('An error occurred in window.mount \n', this.name, e);
                     }
                 }
             }
@@ -6710,7 +6798,7 @@ class CreateApp {
             if (isPromise(umdHookMountResult)) {
                 umdHookMountResult
                     .then(() => this.dispatchMountedEvent())
-                    .catch((e) => this.onerror(e));
+                    .catch(() => this.dispatchMountedEvent());
             }
             else {
                 this.dispatchMountedEvent();
@@ -6728,17 +6816,27 @@ class CreateApp {
      * dispatch mounted event when app run finished
      */
     dispatchMountedEvent() {
-        if (appStates.UNMOUNT !== this.state) {
+        var _a;
+        if (!this.isUnmounted()) {
             this.setAppState(appStates.MOUNTED);
             // call window.onmount of child app
             execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONMOUNT), this.name, microGlobalEvent.ONMOUNT, microApp.getData(this.name, true));
             // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
+            /**
+             * Hidden Keep-alive app during resource loading, render normally to ensure their liveliness (running in the background) characteristics.
+             * Actions:
+             *  1. Record & release all global events after mount
+             */
+            if (this.isHidden()) {
+                (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordAndReleaseEffect({ keepAlive: true });
+            }
         }
     }
     /**
      * unmount app
-     * NOTE: Do not add any params on account of unmountApp
+     * NOTE:
+     *  1. do not add any params on account of unmountApp
      * @param destroy completely destroy, delete cache resources
      * @param clearData clear data of dateCenter
      * @param keepRouteState keep route state when unmount, default is false
@@ -6748,33 +6846,35 @@ class CreateApp {
         var _a;
         destroy = destroy || this.state === appStates.LOAD_FAILED;
         this.setAppState(appStates.UNMOUNT);
-        // result of unmount function
         let umdHookUnmountResult = null;
-        /**
-         * send an unmount event to the micro app or call umd unmount hook
-         * before the sandbox is cleared
-         */
         try {
+            // call umd unmount hook before the sandbox is cleared
             umdHookUnmountResult = (_a = this.umdHookUnmount) === null || _a === void 0 ? void 0 : _a.call(this, microApp.getData(this.name, true));
         }
         catch (e) {
-            logError('An error occurred in function unmount \n', this.name, e);
+            logError('An error occurred in window.unmount \n', this.name, e);
         }
         // dispatch unmount event to micro app
         dispatchCustomEventToMicroApp(this, 'unmount');
         // call window.onunmount of child app
         execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONUNMOUNT), this.name, microGlobalEvent.ONUNMOUNT);
-        this.handleUnmounted(destroy, clearData, keepRouteState, umdHookUnmountResult, unmountcb);
+        this.handleUnmounted({
+            destroy,
+            clearData,
+            keepRouteState,
+            unmountcb,
+            umdHookUnmountResult,
+        });
     }
     /**
      * handle for promise umdHookUnmount
      * @param destroy completely destroy, delete cache resources
      * @param clearData clear data of dateCenter
      * @param keepRouteState keep route state when unmount, default is false
-     * @param umdHookUnmountResult result of umdHookUnmount
      * @param unmountcb callback of unmount
+     * @param umdHookUnmountResult result of umdHookUnmount
      */
-    handleUnmounted(destroy, clearData, keepRouteState, umdHookUnmountResult, unmountcb) {
+    handleUnmounted({ destroy, clearData, keepRouteState, unmountcb, umdHookUnmountResult, }) {
         const nextAction = () => this.actionsForUnmount({
             destroy,
             clearData,
@@ -6782,6 +6882,8 @@ class CreateApp {
             unmountcb,
         });
         if (isPromise(umdHookUnmountResult)) {
+            // async window.unmount will cause appName bind error in nest app
+            removeDomScope();
             umdHookUnmountResult.then(nextAction).catch(nextAction);
         }
         else {
@@ -6795,10 +6897,10 @@ class CreateApp {
      * @param keepRouteState keep route state when unmount, default is false
      * @param unmountcb callback of unmount
      */
-    actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb }) {
+    actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb, }) {
         var _a;
         if (this.umdMode && this.container && !destroy) {
-            cloneContainer(this.container, this.source.html, false);
+            cloneContainer(this.source.html, this.container, false);
         }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
@@ -6812,9 +6914,6 @@ class CreateApp {
             destroy,
             clearData: clearData || destroy,
         });
-        if (!getActiveApps().length) {
-            releasePatchSetAttribute();
-        }
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         this.clearOptions(destroy);
@@ -6831,6 +6930,7 @@ class CreateApp {
             this.sandBox = null;
         if (destroy)
             this.actionsForCompletelyDestroy();
+        removeDomScope();
     }
     // actions for completely destroy
     actionsForCompletelyDestroy() {
@@ -6856,7 +6956,6 @@ class CreateApp {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
-        this.container = cloneContainer(this.container, pureCreateElement('div'), false);
         (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
         callback === null || callback === void 0 ? void 0 : callback();
     }
@@ -6871,7 +6970,7 @@ class CreateApp {
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
-        this.container = cloneContainer(this.container, container, false);
+        this.container = cloneContainer(container, this.container, false);
         if (this.useMemoryRouter) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
@@ -6922,10 +7021,18 @@ class CreateApp {
     getKeepAliveState() {
         return this.keepAliveState;
     }
+    // is app unmounted
+    isUnmounted() {
+        return appStates.UNMOUNT === this.state;
+    }
+    // is app already hidden
+    isHidden() {
+        return keepAliveStates.KEEP_ALIVE_HIDDEN === this.keepAliveState;
+    }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
         // after execScripts, the app maybe unmounted
-        if (appStates.UNMOUNT !== this.state && this.sandBox) {
+        if (!this.isUnmounted() && this.sandBox) {
             const libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
             const proxyWindow = this.sandBox.proxyWindow;
             // compatible with pre versions
@@ -6964,7 +7071,7 @@ function isIframeSandbox(appName) {
 function defineElement(tagName) {
     class MicroAppElement extends HTMLElement {
         constructor() {
-            super();
+            super(...arguments);
             this.isWaiting = false;
             this.cacheData = null;
             this.connectedCount = 0;
@@ -6988,16 +7095,14 @@ function defineElement(tagName) {
                      * If oldApp exist & appName is different, determine whether oldApp is running
                      */
                     if (formatAttrName !== this.appName && oldApp) {
-                        if (oldApp.getAppState() !== appStates.UNMOUNT &&
-                            oldApp.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN &&
-                            !oldApp.isPrefetch) {
+                        if (!oldApp.isUnmounted() && !oldApp.isHidden() && !oldApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
                             return logError(`app name conflict, an app named ${formatAttrName} is running`);
                         }
                     }
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
                         if (formatAttrName === this.appName) {
-                            this.handleUnmount(true, () => {
+                            this.unmount(true, () => {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                             });
                         }
@@ -7006,7 +7111,7 @@ function defineElement(tagName) {
                             this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                         }
                         else {
-                            this.handleUnmount(this.getDestroyCompatibleResult(), () => {
+                            this.unmount(false, () => {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                             });
                         }
@@ -7016,8 +7121,6 @@ function defineElement(tagName) {
                     this.setAttribute('name', this.appName);
                 }
             };
-            // patchSetAttribute hijiack data attribute, it needs exec first
-            patchSetAttribute();
         }
         static get observedAttributes() {
             return ['name', 'url'];
@@ -7080,15 +7183,13 @@ function defineElement(tagName) {
          */
         handleDisconnected(destroy = false, callback) {
             const app = appInstanceMap.get(this.appName);
-            if (app &&
-                app.getAppState() !== appStates.UNMOUNT &&
-                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
+            if (app && !app.isUnmounted() && !app.isHidden()) {
                 // keep-alive
                 if (this.getKeepAliveModeResult() && !destroy) {
                     this.handleHiddenKeepAliveApp(callback);
                 }
                 else {
-                    this.handleUnmount(destroy || this.getDestroyCompatibleResult(), callback);
+                    this.unmount(destroy, callback);
                 }
             }
         }
@@ -7148,16 +7249,16 @@ function defineElement(tagName) {
                  * 2. Even if the keep-alive app is pushed into the background, it is still active and cannot be replaced. Otherwise, it is difficult for developers to troubleshoot in case of conflict and  will leave developers at a loss
                  * 3. When scopecss, useSandbox of prefetch app different from target app, delete prefetch app and create new one
                  */
-                if (oldApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
+                if (oldApp.isHidden() &&
                     oldApp.url === this.appUrl) {
                     this.handleShowKeepAliveApp(oldApp);
                 }
-                else if (oldAppUrl === targetUrl && (oldApp.getAppState() === appStates.UNMOUNT ||
+                else if (oldAppUrl === targetUrl && (oldApp.isUnmounted() ||
                     (oldApp.isPrefetch &&
                         this.sameCoreOptions(oldApp)))) {
-                    this.handleAppMount(oldApp);
+                    this.handleMount(oldApp);
                 }
-                else if (oldApp.isPrefetch || oldApp.getAppState() === appStates.UNMOUNT) {
+                else if (oldApp.isPrefetch || oldApp.isUnmounted()) {
                     if ((process.env.NODE_ENV !== 'production') && this.sameCoreOptions(oldApp)) {
                         /**
                          * url is different & old app is unmounted or prefetch, create new app to replace old one
@@ -7196,7 +7297,7 @@ function defineElement(tagName) {
              * scene5: if oldApp is KEEP_ALIVE_HIDDEN, name must different
              */
             if (oldApp) {
-                if (oldApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                if (oldApp.isHidden()) {
                     if (oldApp.url === this.appUrl) {
                         this.handleShowKeepAliveApp(oldApp);
                     }
@@ -7211,7 +7312,7 @@ function defineElement(tagName) {
                      * 推荐：if (
                      *  oldApp.url === this.appUrl &&
                      *  oldApp.ssrUrl === this.ssrUrl && (
-                     *    oldApp.getAppState() === appStates.UNMOUNT ||
+                     *    oldApp.isUnmounted() ||
                      *    (oldApp.isPrefetch && this.sameCoreOptions(oldApp))
                      *  )
                      * )
@@ -7219,7 +7320,7 @@ function defineElement(tagName) {
                 }
                 else if (oldApp.url === this.appUrl && oldApp.ssrUrl === this.ssrUrl) {
                     // mount app
-                    this.handleAppMount(oldApp);
+                    this.handleMount(oldApp);
                 }
                 else {
                     this.handleCreateApp();
@@ -7266,7 +7367,7 @@ function defineElement(tagName) {
             const oldApp = appInstanceMap.get(this.appName);
             if (oldApp) {
                 if (oldApp.isPrerender) {
-                    this.handleUnmount(true, createAppInstance);
+                    this.unmount(true, createAppInstance);
                 }
                 else {
                     oldApp.actionsForCompletelyDestroy();
@@ -7284,8 +7385,9 @@ function defineElement(tagName) {
          * 2. is remount in another container ?
          * 3. is remount with change properties of the container ?
          */
-        handleAppMount(app) {
+        handleMount(app) {
             app.isPrefetch = false;
+            // TODO: Can defer be removed?
             defer(() => this.mount(app));
         }
         /**
@@ -7306,13 +7408,13 @@ function defineElement(tagName) {
         /**
          * unmount app
          * @param destroy delete cache resources when unmount
+         * @param unmountcb callback
          */
-        handleUnmount(destroy, unmountcb) {
+        unmount(destroy, unmountcb) {
             const app = appInstanceMap.get(this.appName);
-            if (app &&
-                app.getAppState() !== appStates.UNMOUNT) {
+            if (app && !app.isUnmounted()) {
                 app.unmount({
-                    destroy,
+                    destroy: destroy || this.getDestroyCompatibleResult(),
                     clearData: this.getDisposeResult('clear-data'),
                     keepRouteState: this.getDisposeResult('keep-router-state'),
                     unmountcb,
@@ -7322,9 +7424,7 @@ function defineElement(tagName) {
         // hidden app when disconnectedCallback called with keep-alive
         handleHiddenKeepAliveApp(callback) {
             const app = appInstanceMap.get(this.appName);
-            if (app &&
-                app.getAppState() !== appStates.UNMOUNT &&
-                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
+            if (app && !app.isUnmounted() && !app.isHidden()) {
                 app.hiddenKeepAliveApp(callback);
             }
         }
@@ -7427,6 +7527,30 @@ function defineElement(tagName) {
                 this.getAttribute('defaultPage') ||
                 '');
         }
+        /**
+         * Rewrite micro-app.setAttribute, process attr data
+         * @param key attr name
+         * @param value attr value
+         */
+        setAttribute(key, value) {
+            if (key === 'data') {
+                if (isPlainObject(value)) {
+                    const cloneValue = {};
+                    Object.getOwnPropertyNames(value).forEach((ownKey) => {
+                        if (!(isString(ownKey) && ownKey.indexOf('__') === 0)) {
+                            cloneValue[ownKey] = value[ownKey];
+                        }
+                    });
+                    this.data = cloneValue;
+                }
+                else if (value !== '[object Object]') {
+                    logWarn('property data must be an object', this.appName);
+                }
+            }
+            else {
+                globalEnv.rawSetAttribute.call(this, key, value);
+            }
+        }
         /**
          * Data from the base application
          */
@@ -7598,10 +7722,10 @@ function fetchGlobalResources(resources, suffix, sourceHandler) {
 function getActiveApps({ excludeHiddenApp = false, excludePreRender = false, } = {}) {
     const activeApps = [];
     appInstanceMap.forEach((app, appName) => {
-        if (appStates.UNMOUNT !== app.getAppState() &&
+        if (!app.isUnmounted() &&
             (!app.isPrefetch || (app.isPrerender && !excludePreRender)) &&
             (!excludeHiddenApp ||
-                keepAliveStates.KEEP_ALIVE_HIDDEN !== app.getKeepAliveState())) {
+                !app.isHidden())) {
             activeApps.push(appName);
         }
     });
@@ -7621,7 +7745,7 @@ function unmountApp(appName, options) {
     const app = appInstanceMap.get(formatAppName(appName));
     return new Promise((resolve) => {
         if (app) {
-            if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
+            if (app.isUnmounted() || app.isPrefetch) {
                 if (app.isPrerender) {
                     app.unmount({
                         destroy: !!(options === null || options === void 0 ? void 0 : options.destroy),
@@ -7636,7 +7760,7 @@ function unmountApp(appName, options) {
                     resolve(true);
                 }
             }
-            else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+            else if (app.isHidden()) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
                     app.unmount({
                         destroy: true,