改了 3 个字符，10 倍的沙箱性能提升？！！

发表于 1年以前 | 总阅读数：278 次

‍♀️ 编者按：真不是标题党。本文作者是蚂蚁集团前端工程师有知，介绍如何更改 3 个字符，便可以实现 10 倍的沙箱性能提升。

确实会慢，但不多

qiankun2 自发布以来，常被人诟病慢、有性能问题。虽在大部分场景下，这个问题表现的并不明显，不会对应用造成可感知的影响（2m JS 的解析约增加 200ms 耗时，单个函数调用增加耗时可忽略不计）。大部分情况下应用渲染慢，真的就是因为你的 JS 太大（一个不分片的超大的 bundle），接口响应太长，UI 不够有「弹性」导致的。

但在面临一些 CPU 密集型的 UI 操作时，如图表、超量 DOM 变更（1000以上）等场景，确实存在明显的卡顿现象。所以我们也不好反驳什么，通常的解决方案就是推荐用户关闭沙箱来提升性能。

去年底我们曾尝试过一波优化，虽然略有成效，但整体优化幅度不大，因为有一些必要访问耗时省不掉，最终以失败告终。

重启优化之路

近期有社区用户又提到了这个问题，加之年初的时候「获取」到了一些灵感，中秋假期在家决定对这个问题重新做一次尝试。

我们知道 qiankun 的沙箱核心思路其实是这样的：

const windowProxy = new Proxy(window, traps);

with(windowProxy) {
  // 应用代码，通过 with 确保所有的全局变量的操作实际都是在操作 qiankun 提供的代理对象
  ${appCode}  
}

此前主要的性能问题出在应用的代码会频繁的访问沙箱，比如 Symbol.unscopables [1] 在图表场景很容易就达到千万级次的访问。

优化的思路也很简单，就是要减少全局变量在 proxy 里的 lookup 次数。比如可以先缓存起来，后续访问直接走作用域里的缓存即可：

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 [2]。

验证

假期结束来公司，借了台 windows 设备，验证了一下。

糟了，没效果。优化前跟优化后的速度几乎没有变化。

想了下觉得不应该啊，理论上来讲多少得有点作用才是，百思不得其解。

苦恼之际，突然好像想到了什么，于是做出了下面的修改：

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 列表变更

优化前，每次 checkbox click 耗时 400+ ms

优化后，每次 checkbox click 耗时 60+ ms

独立访问场景，每次 checkbox click 耗时 50+ ms

在有沙箱的情况下，耗时基本与原生框架的一致了。

场景 2：10000 个 dom 插入/变更

在 vue 的 event handler 中做原生的 10000 次的 for 循环，然后插入/更新 10000 个 dom，记录中间的耗时：

<template>
  <div class="pt60">
    <ul class="wrapper">
      <li v-for="item in aaa" :key="item">{{ item }}</li>
    </ul>
    <button @click="test">test</button>
  </div>
</template>

<script>
  import logo from "@/assets/logo.png";
  export default {
    data() {
      return {
        aaa: 1
      };
    },
    methods: {
      test() {
        console.time("run loop", 10000);

        for (let index = 2; index < 1 * 10000; index++) {
          this.aaa = index;
        }

        console.timeLog("run loop", 10000);

        this.$nextTick(() => {
          // 10000 个 dom 更新完毕后触发
          console.timeEnd("run loop", 10000);
        });
      }
    }
  };
</script>

优化前，每次 dom 变更都在 1.5s 左右

优化后，变更只需要 30ms

独立访问，无沙箱环境，dom 变更耗时 25ms

可以看到，这个优化后的提升已经不止 10 倍了，都超过 50 倍了，跟原生的表现基本无异。

如何做到的

完成最后的性能飞跃，实际上我只改了 3 个字符，就是把 with 里的 var 换成了 const，这是为什么呢？其实我之前的这篇文章早就告诉了我答案：ES 拾遗之 with 声明与 var 变量赋值（https://www.yuque.com/kuitos/gky7yw/mhfzh7），里面有一个重要的结论：