> 编者按：真不是标题党。本文作者是蚂蚁集团前端工程师有知，介绍了如何更改 3 个字符，便可以实现 10 倍的沙箱性能提升。 ## 确实会慢，但不多 🤪 qiankun2 自发布以来，常被人诟病慢、有性能问题。虽在大部分场景下，这个问题表现的并不明显，不会对应用造成可感知的影响（2m JS 的解析约增加 200ms 耗时，单个函数调用增加耗时可忽略不计）。大部分情况下应用渲染慢，真的就是因为你的 JS 太大（一个不分片的超大的 bundle），接口响应太长，UI 不够有「弹性」导致的。但在面临一些 CPU 密集型的 UI 操作时，如图表、超量 DOM 变更（1000以上）等场景，确实存在明显的卡顿现象。所以我们也不好反驳什么，通常的解决方案就是推荐用户关闭沙箱来提升性能。去年底我们曾尝试过一波优化，虽然略有成效，但整体优化幅度不大，因为有一些必要访问耗时省不掉，最终以失败告终。 ## 重启优化之路 😤 近期有社区用户又提到了这个问题，加之年初的时候「获取」到了一些灵感，中秋假期在家决定对这个问题重新做一次尝试。我们知道 qiankun 的沙箱核心思路其实是这样的： ```javascript const windowProxy = new Proxy(window, traps); with(windowProxy) { // 应用代码，通过 with 确保所有的全局变量的操作实际都是在操作 qiankun 提供的代理对象 ${appCode} } ``` 此前主要的性能问题出在应用的代码会频繁的访问沙箱，比如 [Symbol.unscopables](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/unscopables) 在图表场景很容易就达到千万级次的访问。优化的思路也很简单，就是要减少全局变量在 proxy 里的 lookup 次数。比如可以先缓存起来，后续访问直接走作用域里的缓存即可： ```diff const windowProxy = new Proxy(window, traps); with(windowProxy) { + // 提前将一些全局变量通过赋值/取值从 proxy 里缓存下来 + var undefined = windowProxy.undefined; var Array = windowProxy.Array; var Promise = windowProxy.Promise; // 应用代码，通过 with 确保所有的全局变量的操作实际都是在操作 qiankun 提供的代理对象 ${appCode} } ``` 看上去很完美，不过手上没有 windows 设备没法验证（M1性能太强测不出来），于是先提了个 [pr](https://github.com/kuitos/import-html-entry/pull/82/files)。 ## 验证 👻 假期结束来公司，借了台 windows 设备，验证了一下。糟了，没效果。优化前跟优化后的速度几乎没有变化。🥲 想了下觉得不应该啊，理论上来讲多少得有点作用才是，百思不得其解。苦恼之际，**突然好像想到了什么**，于是做出了下面的修改： ```diff const windowProxy = new Proxy(window, traps); with(windowProxy) { + // 提前将一些全局变量通过赋值/取值从 proxy 里缓存下来 - var undefined = windowProxy.undefined; var Array = windowProxy.Array; var Promise = windowProxy.Promise; + const undefined = windowProxy.undefined; const Array = windowProxy.Array; const Promise = windowProxy.Promise; // 应用代码，通过 with 确保所有的全局变量的操作实际都是在操作 qiankun 提供的代理对象 ${appCode} } ``` 改动更简单，就是将 var 声明换成了 const，立马保存验证一把。直接起飞！ ### 场景 1：vue 技术栈下大 checkbox 列表变更 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0fb645f4e5e4f91ad542d791756b38c~tplv-k3u1fbpfcp-zoom-1.image "优化前，每次 checkbox click 耗时 400+ ms") ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7bb3190bac2d4f9aad0639d30343d656~tplv-k3u1fbpfcp-zoom-1.image "优化后，每次 checkbox click 耗时 60+ ms") ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/32eb849cb5ff48638e9d43d3b1aea416~tplv-k3u1fbpfcp-zoom-1.image "独立访问场景，每次 checkbox click 耗时 50+ ms") 在有沙箱的情况下，耗时基本与原生框架的一致了。 ### 场景 2：10000 个 dom 插入/变更在 vue 的 event handler 中做原生的 10000 次的 for 循环，然后插入/更新 10000 个 dom，记录中间的耗时： ```vue ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c7cbd9a97e34a83937ed7be96234eb7~tplv-k3u1fbpfcp-zoom-1.image "优化前，每次 dom 变更都在 1.5s 左右") ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c91dd933594746efbc5409d24a0636cb~tplv-k3u1fbpfcp-zoom-1.image "优化后，变更只需要 30ms") ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8f70962218ec4f2c94bc5957a15f7287~tplv-k3u1fbpfcp-zoom-1.image "独立访问，无沙箱环境，dom 变更耗时 25ms") 可以看到，这个优化后的提升已经不止 10 倍了，都超过 50 倍了，跟原生的表现基本无异。 ## 如何做到的 🧙 完成最后的性能飞跃，实际上我只改了 3 个字符，就是把 with 里的 var 换成了 const，这是为什么呢？其实我之前的这篇文章早就告诉了我答案： [ES 拾遗之 with 声明与 var 变量赋值](https://www.yuque.com/kuitos/gky7yw/mhfzh7?view=doc_embed) 里面有一个重要的结论： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4260a822fec46e887fc579b3f5063be~tplv-k3u1fbpfcp-zoom-1.image) 因为 windowProxy 里有所有的全局变量，那么我们之前使用 var 去尝试做作用域缓存的方案其实是无效的，声明的变量实际还是在全局的词法环境中的，也就避免不了作用域链的查找。而换成 const，就可以顺利的将变量写到 with 下的词法环境了。 ## one more thing 😂 至此，如果以后你的应用在微前端场景下表现的不尽如人意，请先考虑： 1. 是否是应用的打包策略不合理，导致 bundle 过大 js 执行耗时过长 2. 是否是前置依赖逻辑过多执行过慢（如接口响应），阻塞了页面渲染 3. 是否是微应用的加载策略不合理，导致过晚的加载 4. 没有加载过渡动画，只有硬生生的白屏别再试图甩锅给微前端了，瑞思拜🫡。