Proxy 的性能，可能比 DefineProperty 更差
老有人跑來跟我說 Proxy 和 defineProperty 相比，是性能的巨大提升。我一聽，這不對勁啊，跟我學的知識不太一樣，我明明記得Proxy 性能比 defineProperty 更差。
所以我就寫了幾個簡單的例子來驗證一下。
這個例子的邏輯非常簡單，我們在大數據量循環的過程中，分別用 Object.defineProperty 與 Proxy 劫持的數據，執行一次 getter 與 setter。然后利用 performance.now 記錄執行時間。
先看 defineProperty 的案例。
首先定義一個簡單對象。
// 在循環中，我們會執行計算操作
var target = {
total: 0
}然后另外定義一個普通變量用于存儲劫持過程中訪問和設置的值。
然后用 Object.defineProperty 劫持 target。
Object.defineProperty(target, 'count', {
get: function () {
return b;
},
set: function (value) {
b = value;
},
});然后循環 1000000 次，并打印執行時間。
var total = 0;
var now = performance.now()
for (let index = 0; index < end; index++) {
total += target.count;
target.count = index;
}
console.log('defineProperty', performance.now() - now)接下來看使用 Proxy 的案例。
也是首先定義一個普通對象。
var target = {
count: 0
}然后使用 Proxy 代理。
let proxy = new Proxy(target, {
get: (target, prop, receiver) => {
return Reflect.get(target, prop, receiver)
},
set(target, prop, value) {
return Reflect.set(target, prop, value)
}
});然后循環訪問 getter 和 setter。
var total = 0;
var now = performance.now()
for (let index = 0; index < end; index++) {
total += proxy.count;
proxy.count = index;
proxy.count
}
console.log('Proxy', performance.now() - now)完整代碼如下：
<script>
var end = 1000000
var b = 0;
var target = {
count: 0
}
Object.defineProperty(target, 'count', {
get: function () {
return b;
},
set: function (value) {
b = value;
},
});
var total = 0;
var now = performance.now()
for (let index = 0; index < end; index++) {
total += target.count;
target.count = index;
}
console.log('defineProperty', performance.now() - now)
</script><script>
var end = 1000000
var target = {
count: 0
}
let proxy = new Proxy(target, {
get: (target, prop, receiver) => {
return Reflect.get(target, prop, receiver)
},
set(target, prop, value) {
return Reflect.set(target, prop, value)
}
});
var total = 0;
var now = performance.now()
for (let index = 0; index < end; index++) {
total += proxy.count;
proxy.count = index;
}
console.log('Proxy', performance.now() - now)
</script>我的測試電腦如下，性能強悍，對應的瀏覽器都是最新版。因此這里我們都定義的是 1000000 萬次的執行，以更加方便的放大差異。
理論上絕大多數客戶的電腦性能都很差，特別是許多面向 B 端的客戶，所以如果有條件的朋友可以用客戶的環境來做一下測試看看客戶電腦上的真實差異
在 chrome 中執行結果為：
我連續執行了 10 次，發現執行結果都相差不大，執行時間上，Proxy 用時更久。
然后我切換瀏覽器，在 safari 中執行同樣的代碼，執行結果如下：
結果沒想到，在 safari 瀏覽器中，Proxy 的性能嚴重低于 defineProperty。
然后我又把代碼發給群友，群友用 QQ 瀏覽器執行了一下。
萬萬沒想到的是，firefox 的執行結果差異最大。
然后我又嘗試讓 Proxy 代理的對象增加層級，然后進行 set 操作。
注意，這里只是簡單的增加對象復雜度，并不代表更深層級的屬性也能被代理。
var target = {
count: 0,
b: {
c: 0
}
}for (let index = 0; index < end; index++) {
total += proxy.count;
proxy.count = index;
proxy.b.c = target.count
}驗證結果發現，當層級變深，執行消耗的時間越長。下圖是 chrome 的執行結果。
結論
在常用的幾種瀏覽器中，測試結果比較統一，Proxy 的性能都弱于 defineProperty，在 safari，firefox 中，defineProperty 的性能大幅度領先。
當 Proxy 的目標對象深層次 getter/setter 時，會增加更多的性能損耗。
針對 Proxy 的性能，chrome 優化做得最好。但依然小幅度弱于 defineProperty。
針對于 defineProperty 的性能，firefox 和 safari 做得比較好，大幅度領先其他瀏覽器。
