淺談 js 下 with 對性能的影響

這幾天多次看到有博主們在寫 with 的文章，這貨確實非常方便，但是卻是個性能殺手，所以一直都是上不得台面的。
那么他究竟會讓效率低下到什么程度呢？
先來看下 with 是如何的便捷吧。。

// 正常調用
console.log(location.host);
console.log(location.pathname);

// 在 with 下
with (location) {
    console.log(host);
    console.log(pathname);
}

如果不影響性能，確實是非常霸氣的存在，可是看了下面的例子，也許就嚇尿了。

var obj = {key: "string"};
var tmp;
var n = 1e6;

console.time("no with");
for (var i=0; i<n; i++) {
    tmp = obj.key;
}
console.timeEnd("no with");

console.time("with");
with (obj) {
    for (var i=0; i<n; i++) {
        tmp = key;
    }
}
console.timeEnd("with");

嚇尿了，with 下竟然相差100倍。
甚至 FF 下不是直接 with 也會影響性能，詳見參考閱讀。

不要在 chrome 的控制台下進行壓力測試，因為 chrome 控制台就是 with 環境。
如果想看 chrome 控制台環境，在控制台輸入 debugger 就可以看到 with 這貨了。

然后按兩下 F11 就可以來到 chrome 控制台環境，剩下的自己折騰吧，因為今天的分享到此結束。。

參考閱讀：
with語句是JavaScript的性能殺手